@govtechsg/sgds-web-component 3.12.0 → 3.13.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.
- package/Masthead/index.js +1 -1
- package/components/Drawer/drawer.js +1 -1
- package/components/Drawer/index.umd.min.js +17 -11
- package/components/Drawer/index.umd.min.js.map +1 -1
- package/components/Drawer/sgds-drawer.js +12 -6
- package/components/Drawer/sgds-drawer.js.map +1 -1
- package/components/Masthead/index.umd.min.js +1 -1
- package/components/Masthead/index.umd.min.js.map +1 -1
- package/components/Masthead/sgds-masthead.js +1 -1
- package/components/Masthead/sgds-masthead.js.map +1 -1
- package/components/index.umd.min.js +14 -8
- package/components/index.umd.min.js.map +1 -1
- package/css/fouc.css +1 -1
- package/css/utility.css +14 -0
- package/index.umd.min.js +14 -8
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Drawer/drawer.cjs.js +1 -1
- package/react/components/Drawer/drawer.js +1 -1
- package/react/components/Drawer/sgds-drawer.cjs.js +12 -6
- package/react/components/Drawer/sgds-drawer.cjs.js.map +1 -1
- package/react/components/Drawer/sgds-drawer.js +12 -6
- package/react/components/Drawer/sgds-drawer.js.map +1 -1
- package/react/components/Masthead/sgds-masthead.cjs.js +1 -1
- package/react/components/Masthead/sgds-masthead.cjs.js.map +1 -1
- package/react/components/Masthead/sgds-masthead.js +1 -1
- package/react/components/Masthead/sgds-masthead.js.map +1 -1
- package/react/index.cjs.js +4 -4
- package/react/index.d.ts +1 -1
- package/react/index.js +1 -1
|
@@ -30,7 +30,7 @@ class SgdsMasthead extends SgdsElement {
|
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
32
|
return html `
|
|
33
|
-
<div id="sgds-masthead" class="sgds-masthead"
|
|
33
|
+
<div id="sgds-masthead" class="sgds-masthead">
|
|
34
34
|
<div class="banner">
|
|
35
35
|
<div class="container">
|
|
36
36
|
<div class="masthead-layout">
|
|
@@ -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 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 /** When true, removes max-width constraint to allow content to stretch full screen width */\n @property({ type: Boolean, reflect: true })\n fluid = false;\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.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=\"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.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=\"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,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,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;;AAjLM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,EAAEC,UAAY,EAAEC,UAAa,CAAC,CAAC;AAIhF,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 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 /** When true, removes max-width constraint to allow content to stretch full screen width */\n @property({ type: Boolean, reflect: true })\n fluid = false;\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\">\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.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=\"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.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=\"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,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,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;;AAjLM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,EAAEC,UAAY,EAAEC,UAAa,CAAC,CAAC;AAIhF,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;;;;"}
|
|
@@ -2968,7 +2968,7 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
|
|
|
2968
2968
|
<slot></slot>
|
|
2969
2969
|
</div>
|
|
2970
2970
|
</div>
|
|
2971
|
-
`}}Gr.styles=[...He.styles,Kr],t([De({type:Boolean,reflect:!0})],Gr.prototype,"bordered",void 0),t([De({type:Boolean,reflect:!0})],Gr.prototype,"stacked",void 0),t([De({type:Boolean})],Gr.prototype,"hasTitleSlot",void 0),t([De({type:Boolean})],Gr.prototype,"hasDescriptionSlot",void 0),t([Te({flatten:!0})],Gr.prototype,"_descriptionLists",void 0);var Xr=r`:host{--container-size:8px}:host([orientation=horizontal]){border-top:var(--border-width) solid var(--sgds-border-color-muted);display:block;margin:calc((var(--container-size) - var(--border-width))/2) 0;width:100%}:host([orientation=vertical]){border-left:var(--border-width) solid var(--sgds-border-color-muted);display:inline-block;height:100%;margin:0 calc((var(--container-size) - var(--border-width))/2)}:host([thickness=thin]){--border-width:var(--sgds-border-width-1)}:host([thickness=thick]){--border-width:var(--sgds-border-width-2)}:host([thickness=thicker]){--border-width:var(--sgds-border-width-4)}`;class Qr extends He{constructor(){super(...arguments),this.orientation="horizontal",this.thickness="thin"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",this.orientation)}}Qr.styles=[Xr],t([De({type:String,reflect:!0})],Qr.prototype,"orientation",void 0),t([De({type:String,reflect:!0})],Qr.prototype,"thickness",void 0);const Jr=new Set;function el(e){Jr.add(e),document.body.style.overflow="hidden"}function tl(e){Jr.delete(e),0===Jr.size&&(document.body.style.overflow="")}var sl=r`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;
|
|
2971
|
+
`}}Gr.styles=[...He.styles,Kr],t([De({type:Boolean,reflect:!0})],Gr.prototype,"bordered",void 0),t([De({type:Boolean,reflect:!0})],Gr.prototype,"stacked",void 0),t([De({type:Boolean})],Gr.prototype,"hasTitleSlot",void 0),t([De({type:Boolean})],Gr.prototype,"hasDescriptionSlot",void 0),t([Te({flatten:!0})],Gr.prototype,"_descriptionLists",void 0);var Xr=r`:host{--container-size:8px}:host([orientation=horizontal]){border-top:var(--border-width) solid var(--sgds-border-color-muted);display:block;margin:calc((var(--container-size) - var(--border-width))/2) 0;width:100%}:host([orientation=vertical]){border-left:var(--border-width) solid var(--sgds-border-color-muted);display:inline-block;height:100%;margin:0 calc((var(--container-size) - var(--border-width))/2)}:host([thickness=thin]){--border-width:var(--sgds-border-width-1)}:host([thickness=thick]){--border-width:var(--sgds-border-width-2)}:host([thickness=thicker]){--border-width:var(--sgds-border-width-4)}`;class Qr extends He{constructor(){super(...arguments),this.orientation="horizontal",this.thickness="thin"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",this.orientation)}}Qr.styles=[Xr],t([De({type:String,reflect:!0})],Qr.prototype,"orientation",void 0),t([De({type:String,reflect:!0})],Qr.prototype,"thickness",void 0);const Jr=new Set;function el(e){Jr.add(e),document.body.style.overflow="hidden"}function tl(e){Jr.delete(e),0===Jr.size&&(document.body.style.overflow="")}var sl=r`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;overflow:auto;pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-bottom .drawer-panel{bottom:0;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-close-wrapper{position:sticky;top:0}sgds-close-button.drawer-close{inset-inline-end:8px;position:absolute;top:8px}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}slot[name=title]::slotted(*){color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-24)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=footer]::slotted(*){background-color:var(--sgds-surface-default);bottom:0;padding:var(--sgds-padding-lg);position:sticky}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:hidden;padding:var(--sgds-padding-lg)}.drawer-overlay{background-color:var(--sgds-bg-overlay);display:block;inset:0;pointer-events:all;position:fixed}.drawer-contained .drawer-overlay{display:none}.drawer-contained{height:unset;width:unset}@media screen and (min-width:512px){.drawer-body{padding:var(--sgds-padding-2-xl)}.drawer-header{padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}slot[name=footer]::slotted(*){padding:var(--sgds-padding-2-xl)}}`;class il extends He{constructor(){super(...arguments),this.open=!1,this.size="sm",this.placement="end",this.contained=!1,this.handleDocumentKeyDown=e=>{this.open&&!this.contained&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}}firstUpdated(e){super.firstUpdated(e),this.open&&(this.addOpenListeners(),this.contained||el(this))}disconnectedCallback(){super.disconnectedCallback(),tl(this)}uppercaseFirstLetter(e){return e.charAt(0).toUpperCase()+e.slice(1)}requestClose(e){if(this.emit("sgds-request-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){const e=st(this,"drawer.denyClose");return void Ge(this.panel,e.keyframes,e.options)}this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}async handleOpenChange(){if(this.open){this.emit("sgds-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.contained||el(this);const e=this.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await Promise.all([Je(this.drawer),Je(this.overlay)]),this.drawer.hidden=!1,requestAnimationFrame(()=>{this.emit("sgds-initial-focus",{cancelable:!0}).defaultPrevented||(e?e.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),e&&e.setAttribute("autofocus","")});const t=st(this,`drawer.show${this.uppercaseFirstLetter(this.placement)}`),s=st(this,"drawer.overlay.show");await Promise.all([Ge(this.panel,t.keyframes,t.options),Ge(this.overlay,s.keyframes,s.options)]),this.emit("sgds-after-show")}else{this.emit("sgds-hide"),this.removeOpenListeners(),this.contained||tl(this),await Promise.all([Je(this.drawer),Je(this.overlay)]);const e=st(this,`drawer.hide${this.uppercaseFirstLetter(this.placement)}`),t=st(this,"drawer.overlay.hide");await Promise.all([Ge(this.overlay,t.keyframes,t.options).then(()=>{this.overlay.hidden=!0}),Ge(this.panel,e.keyframes,e.options).then(()=>{this.panel.hidden=!0})]),this.drawer.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1;const s=this.originalTrigger;"function"==typeof(null==s?void 0:s.focus)&&setTimeout(()=>s.focus()),this.emit("sgds-after-hide")}}handleNoModalChange(){this.open&&!this.contained&&el(this),this.open&&this.contained&&tl(this)}async show(){if(!this.open)return this.open=!0,at(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,at(this,"sgds-after-hide")}render(){const e=this.hasUpdated,t=!this.open&&!e;return te`
|
|
2972
2972
|
<div
|
|
2973
2973
|
class=${Ke({drawer:!0,"drawer-top":"top"===this.placement,"drawer-end":"end"===this.placement,"drawer-bottom":"bottom"===this.placement,"drawer-start":"start"===this.placement,"drawer-contained":this.contained,"drawer-fixed":!this.contained})}
|
|
2974
2974
|
?hidden=${t}
|
|
@@ -2982,17 +2982,23 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
|
|
|
2982
2982
|
aria-hidden=${this.open?"false":"true"}
|
|
2983
2983
|
tabindex="0"
|
|
2984
2984
|
>
|
|
2985
|
-
<
|
|
2986
|
-
<slot name="title"></slot>
|
|
2987
|
-
<slot name="description"></slot>
|
|
2985
|
+
<div class="drawer-close-wrapper">
|
|
2988
2986
|
<sgds-close-button
|
|
2989
2987
|
class="drawer-close"
|
|
2990
2988
|
aria-label="close drawer"
|
|
2991
2989
|
@click="${()=>this.requestClose("close-button")}"
|
|
2992
2990
|
></sgds-close-button>
|
|
2993
|
-
</
|
|
2994
|
-
<
|
|
2995
|
-
|
|
2991
|
+
</div>
|
|
2992
|
+
<div class="drawer-header_and_body">
|
|
2993
|
+
<div class="drawer-header">
|
|
2994
|
+
<slot name="title"></slot>
|
|
2995
|
+
<slot name="description"></slot>
|
|
2996
|
+
</div>
|
|
2997
|
+
</div>
|
|
2998
|
+
<div>
|
|
2999
|
+
<slot class="drawer-body"></slot>
|
|
3000
|
+
<slot name="footer"></slot>
|
|
3001
|
+
</div>
|
|
2996
3002
|
</div>
|
|
2997
3003
|
</div>
|
|
2998
3004
|
`}}il.styles=[...He.styles,sl],il.dependencies={"sgds-close-button":mt},t([Be(".drawer")],il.prototype,"drawer",void 0),t([Be(".drawer-panel")],il.prototype,"panel",void 0),t([Be(".drawer-overlay")],il.prototype,"overlay",void 0),t([De({type:Boolean,reflect:!0})],il.prototype,"open",void 0),t([De({type:String,reflect:!0})],il.prototype,"size",void 0),t([De({type:String,reflect:!0})],il.prototype,"placement",void 0),t([De({type:Boolean,reflect:!0})],il.prototype,"contained",void 0),t([ot("open",{waitUntilFirstUpdate:!0})],il.prototype,"handleOpenChange",null),t([ot("contained",{waitUntilFirstUpdate:!0})],il.prototype,"handleNoModalChange",null),it("drawer.showTop",{keyframes:[{opacity:0,translate:"0 -100%"},{opacity:1,translate:"0 0"}],options:{duration:250,easing:"ease"}}),it("drawer.hideTop",{keyframes:[{opacity:1,translate:"0 0"},{opacity:0,translate:"0 -100%"}],options:{duration:250,easing:"ease"}}),it("drawer.showEnd",{keyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}}),it("drawer.hideEnd",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],options:{duration:250,easing:"ease"}}),it("drawer.showBottom",{keyframes:[{opacity:0,translate:"0 100%"},{opacity:1,translate:"0 0"}],options:{duration:250,easing:"ease"}}),it("drawer.hideBottom",{keyframes:[{opacity:1,translate:"0 0"},{opacity:0,translate:"0 100%"}],options:{duration:250,easing:"ease"}}),it("drawer.showStart",{keyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}}),it("drawer.hideStart",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],options:{duration:250,easing:"ease"}}),it("drawer.denyClose",{keyframes:[{scale:1},{scale:1.01},{scale:1}],options:{duration:250}}),it("drawer.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:250}}),it("drawer.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:250}});var al=r`.file-upload{display:flex;flex-direction:column;gap:var(--sgds-form-gap-2-xl)}.file-upload-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.file-upload-list{display:flex;flex-direction:column;gap:var(--sgds-form-gap-xl);list-style-type:none}.file-upload-list-item{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-lg);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.file-upload-list-item span:not(:first-of-type){cursor:pointer}ul{margin:0;padding:0}input{display:none}label,sgds-button{cursor:pointer}sgds-close-button{margin-left:auto}sgds-icon.valid{color:var(--sgds-form-success-color-default)}sgds-icon.invalid{color:var(--sgds-color-muted)}`;class ol extends(Sa(ka)){constructor(){super(...arguments),this.multiple=!1,this.accept="",this.hasFeedback=!1,this.required=!1,this.selectedFiles=[],this.inputRef=as()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}get files(){return this.selectedFiles}_setFileList(e){this.emit("sgds-files-selected",{detail:e})}_handleClick(e){if(e.preventDefault(),!this.disabled){this.inputRef.value.click()}}_handleChange(e){const t=e.target.files;t.length>0&&(this.selectedFiles=Array.from(t)),this._setFileList(t),this.requestUpdate(),super._mixinHandleChange(e)}_removeFileHandler(e){const t=this.inputRef.value,s=t.files,i=new DataTransfer;for(let t=0;t<s.length;t++)e!==t&&i.items.add(s[t]);t.files=i.files,this._setFileList(i.files),this.selectedFiles=Array.from(i.files),this.requestUpdate(),this._mixinValidate(this.input)}_clearAllFiles(){const e=this.inputRef.value,t=new DataTransfer;e.files=t.files,this._setFileList(t.files),this.selectedFiles=Array.from(t.files)}_mixinResetFormControl(){this._clearAllFiles(),this._mixinResetValidity(this.input)}_handleDisabledChange(){this.setInvalid(!1)}_renderLabel(){const e=te`
|
|
@@ -3253,7 +3259,7 @@ class fl{constructor(e,t,s,i){if(this.subscribe=!1,this.provided=!1,this.value=v
|
|
|
3253
3259
|
</a>
|
|
3254
3260
|
<slot @slotchange=${this._handleDesktopSlotChange}></slot>
|
|
3255
3261
|
</sgds-dropdown>`;return this._breakpointReached?e:t}}El.styles=[...He.styles,Yi,qi,Vl],El.dependencies={"sgds-dropdown":ji,"sgds-dropdown-item":Ki,"sgds-icon":Bt},t([kl({context:Cl,subscribe:!0}),Ee()],El.prototype,"_breakpointReached",void 0),t([kl({context:Sl,subscribe:!0}),Ee()],El.prototype,"expanded",void 0),t([Be(".nav-link")],El.prototype,"navLink",void 0),t([Be(".dropdown-items")],El.prototype,"dropdownItems",void 0),t([Be(".dropdown-items a")],El.prototype,"menuHeaderButton",void 0),t([Be(".dropdown-items span")],El.prototype,"menuHeaderText",void 0),t([De({type:Boolean})],El.prototype,"active",void 0),t([De({type:Boolean,reflect:!0})],El.prototype,"disabled",void 0),t([Te({slot:"toggler"})],El.prototype,"togglerNodes",void 0),t([Te()],El.prototype,"defaultNodes",void 0);var Zl=r`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;min-height:100%;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (max-width:767px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;class Il extends He{constructor(){super(...arguments),this.active=!1,this.disabled=!1}_handleDisabled(){this.setAttribute("aria-disabled",`${this.disabled}`)}_handleSlotChange(e){const t=e.target,s=t.assignedElements({flatten:!0}).filter(e=>"a"===e.tagName.toLowerCase()||"sgds-link"===e.tagName.toLowerCase());if(s.length>1)console.error("More than one anchor tag is added to sgds-mainnav-item");else{if(0===s.length){t.assignedNodes({flatten:!0}).forEach(e=>{if(e.nodeType===Node.TEXT_NODE){const t=document.createElement("a");t.textContent=e.textContent,e.parentNode.replaceChild(t,e)}})}if(1===s.length){const e=s[0];if(this.active&&e.setAttribute("aria-current","true"),this.disabled)return e.setAttribute("href","javascript:void(0)"),void e.setAttribute("tabindex","-1");e.addEventListener("click",e=>{e.target.closest("sgds-mainnav").hide()})}}}render(){return te`<slot @slotchange=${this._handleSlotChange}></slot>`}}Il.styles=[...He.styles,Zl],t([De({type:Boolean,reflect:!0})],Il.prototype,"active",void 0),t([De({type:Boolean,reflect:!0})],Il.prototype,"disabled",void 0),t([ot("disabled")],Il.prototype,"_handleDisabled",null);var Bl=r`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm)!important;-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;width:var(--sgds-icon-size-sm)!important}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(#f7f7f7,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}:host([fluid]) .container{max-width:none}.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(#f7f7f7,#1a1a1a)}.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-visible,a.trusted-websites-link:focus-visible{outline:4px solid #60aaf4}@media screen and (max-width:767px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`,Ll=r`svg{vertical-align:middle}`;class Tl extends He{constructor(){super(...arguments),this.fluid=!1,this.toggleVisibility=!1}_handleKeydown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this._toggleVisibility())}_toggleVisibility(){this.toggleVisibility=!this.toggleVisibility}render(){return te`
|
|
3256
|
-
<div id="sgds-masthead" class="sgds-masthead"
|
|
3262
|
+
<div id="sgds-masthead" class="sgds-masthead">
|
|
3257
3263
|
<div class="banner">
|
|
3258
3264
|
<div class="container">
|
|
3259
3265
|
<div class="masthead-layout">
|