@govtechsg/sgds-web-component 3.12.0-rc.0 → 3.12.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/base/card.js +1 -1
- package/base/dropdown-list-element.d.ts +5 -1
- package/base/dropdown-list-element.js +2 -2
- package/base/dropdown-list-element.js.map +1 -1
- package/components/Breadcrumb/index.umd.min.js +20 -20
- package/components/Breadcrumb/index.umd.min.js.map +1 -1
- package/components/Card/index.umd.min.js +1 -1
- package/components/Card/index.umd.min.js.map +1 -1
- package/components/Checkbox/index.umd.min.js +6 -6
- package/components/Checkbox/index.umd.min.js.map +1 -1
- package/components/Checkbox/sgds-checkbox.d.ts +3 -0
- package/components/Checkbox/sgds-checkbox.js +17 -0
- package/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/components/ComboBox/index.umd.min.js +2 -2
- package/components/ComboBox/index.umd.min.js.map +1 -1
- package/components/Dropdown/dropdown-item.js +1 -1
- package/components/Dropdown/index.umd.min.js +2 -2
- package/components/Dropdown/index.umd.min.js.map +1 -1
- package/components/Dropdown/sgds-dropdown-item.js +0 -3
- package/components/Dropdown/sgds-dropdown-item.js.map +1 -1
- package/components/IconCard/icon-card.js +1 -1
- package/components/IconCard/index.umd.min.js +1 -1
- package/components/IconCard/index.umd.min.js.map +1 -1
- package/components/ImageCard/image-card.js +1 -1
- package/components/ImageCard/index.umd.min.js +1 -1
- package/components/ImageCard/index.umd.min.js.map +1 -1
- package/components/Mainnav/index.umd.min.js +2 -2
- package/components/Mainnav/index.umd.min.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/masthead.js +1 -1
- package/components/OverflowMenu/index.umd.min.js +2 -2
- package/components/OverflowMenu/index.umd.min.js.map +1 -1
- package/components/Select/index.umd.min.js +1 -1
- package/components/Select/index.umd.min.js.map +1 -1
- package/components/SystemBanner/index.umd.min.js +10 -9
- package/components/SystemBanner/index.umd.min.js.map +1 -1
- package/components/SystemBanner/sgds-system-banner-item.d.ts +2 -1
- package/components/SystemBanner/sgds-system-banner-item.js +7 -2
- package/components/SystemBanner/sgds-system-banner-item.js.map +1 -1
- package/components/SystemBanner/system-banner-item.js +1 -1
- package/components/SystemBanner/system-banner.js +1 -1
- package/components/ThumbnailCard/index.umd.min.js +1 -1
- package/components/ThumbnailCard/index.umd.min.js.map +1 -1
- package/components/ThumbnailCard/thumbnail-card.js +1 -1
- package/components/index.umd.min.js +9 -9
- package/components/index.umd.min.js.map +1 -1
- package/css/utility.css +23 -3
- package/index.umd.min.js +11 -10
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/card.cjs.js +1 -1
- package/react/base/card.js +1 -1
- package/react/base/dropdown-list-element.cjs.js +2 -2
- package/react/base/dropdown-list-element.cjs.js.map +1 -1
- package/react/base/dropdown-list-element.js +2 -2
- package/react/base/dropdown-list-element.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.cjs.js +17 -0
- package/react/components/Checkbox/sgds-checkbox.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.js +17 -0
- package/react/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/react/components/Dropdown/dropdown-item.cjs.js +1 -1
- package/react/components/Dropdown/dropdown-item.js +1 -1
- package/react/components/Dropdown/sgds-dropdown-item.cjs.js +0 -3
- package/react/components/Dropdown/sgds-dropdown-item.cjs.js.map +1 -1
- package/react/components/Dropdown/sgds-dropdown-item.js +0 -3
- package/react/components/Dropdown/sgds-dropdown-item.js.map +1 -1
- package/react/components/IconCard/icon-card.cjs.js +1 -1
- package/react/components/IconCard/icon-card.js +1 -1
- package/react/components/ImageCard/image-card.cjs.js +1 -1
- package/react/components/ImageCard/image-card.js +1 -1
- package/react/components/Masthead/masthead.cjs.js +1 -1
- package/react/components/Masthead/masthead.js +1 -1
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js +7 -2
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js.map +1 -1
- package/react/components/SystemBanner/sgds-system-banner-item.js +7 -2
- package/react/components/SystemBanner/sgds-system-banner-item.js.map +1 -1
- package/react/components/SystemBanner/system-banner-item.cjs.js +1 -1
- package/react/components/SystemBanner/system-banner-item.js +1 -1
- package/react/components/SystemBanner/system-banner.cjs.js +1 -1
- package/react/components/SystemBanner/system-banner.js +1 -1
- package/react/components/ThumbnailCard/thumbnail-card.cjs.js +1 -1
- package/react/components/ThumbnailCard/thumbnail-card.js +1 -1
- package/themes/day.css +1 -3
- package/themes/night.css +2 -2
package/Masthead/index.js
CHANGED
|
@@ -27,7 +27,7 @@ let $e;Ce?.({LitElement:be}),(_e.litElementVersions??=[]).push("4.2.2"),_e.litEl
|
|
|
27
27
|
* @license
|
|
28
28
|
* Copyright 2017 Google LLC
|
|
29
29
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
30
|
-
*/globalThis.litIssuedWarnings??=new Set;var ke=o`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Ee extends be{emit(e,t){const i=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(i),i}static define(e,t=this,i={}){if(customElements.get(e));else try{customElements.define(e,t,i)}catch(s){customElements.define(e,class extends t{},i)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([e,t])=>{this.constructor.define(e,t)})}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach(e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}Ee.styles=[ke],Ee.dependencies={},e([Pe({type:Boolean,reflect:!0})],Ee.prototype,"ssr",void 0);var Ve,Te,Me,Ne=o`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(#f3f3f3,#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(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus-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}}`,Oe=o`svg{vertical-align:middle}`,Ue=o`::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}`;class He extends Ee{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 Q`
|
|
30
|
+
*/globalThis.litIssuedWarnings??=new Set;var ke=o`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Ee extends be{emit(e,t){const i=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(i),i}static define(e,t=this,i={}){if(customElements.get(e));else try{customElements.define(e,t,i)}catch(s){customElements.define(e,class extends t{},i)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([e,t])=>{this.constructor.define(e,t)})}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach(e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}Ee.styles=[ke],Ee.dependencies={},e([Pe({type:Boolean,reflect:!0})],Ee.prototype,"ssr",void 0);var Ve,Te,Me,Ne=o`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}}`,Oe=o`svg{vertical-align:middle}`,Ue=o`::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}`;class He extends Ee{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 Q`
|
|
31
31
|
<div id="sgds-masthead" class="sgds-masthead" aria-label="A Singapore Government Agency Website" role="banner">
|
|
32
32
|
<div class="banner">
|
|
33
33
|
<div class="container">
|
package/base/card.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = css`:host([disabled]){cursor:not-allowed}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-14)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-20)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important;text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
|
|
3
|
+
var css_248z = css`:host([disabled]){cursor:not-allowed}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-14)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-20)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important;text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
|
|
4
4
|
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
//# sourceMappingURL=card.js.map
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { DropdownElement } from "./dropdown-element";
|
|
2
|
+
import { SgdsDropdownItem } from "../components";
|
|
2
3
|
import { PropertyValueMap } from "lit";
|
|
3
4
|
/**
|
|
4
|
-
* @event sgds-select - Emitted
|
|
5
|
+
* @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.
|
|
5
6
|
*/
|
|
6
7
|
export declare class DropdownListElement extends DropdownElement {
|
|
7
8
|
static styles: import("lit").CSSResult[];
|
|
@@ -22,3 +23,6 @@ export declare class DropdownListElement extends DropdownElement {
|
|
|
22
23
|
private _getActiveMenuItems;
|
|
23
24
|
private _setMenuItem;
|
|
24
25
|
}
|
|
26
|
+
export interface IDropdownListElement {
|
|
27
|
+
item: SgdsDropdownItem;
|
|
28
|
+
}
|
|
@@ -7,7 +7,7 @@ const ARROW_DOWN = "ArrowDown";
|
|
|
7
7
|
const ARROW_UP = "ArrowUp";
|
|
8
8
|
const ENTER = "Enter";
|
|
9
9
|
/**
|
|
10
|
-
* @event sgds-select - Emitted
|
|
10
|
+
* @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.
|
|
11
11
|
*/
|
|
12
12
|
class DropdownListElement extends DropdownElement {
|
|
13
13
|
constructor() {
|
|
@@ -38,7 +38,7 @@ class DropdownListElement extends DropdownElement {
|
|
|
38
38
|
/** Emitted event from SgdsDropdown element when a slot item is selected */
|
|
39
39
|
const selectedItem = e.target;
|
|
40
40
|
if (!selectedItem.disabled) {
|
|
41
|
-
this.emit("sgds-select");
|
|
41
|
+
this.emit("sgds-select", { detail: { item: selectedItem } });
|
|
42
42
|
if (this.close !== "outside") {
|
|
43
43
|
this.hideMenu(); // <-- Use new API
|
|
44
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-list-element.js","sources":["../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\n\n/**\n * @event sgds-select - Emitted event when a slot item is selected\n */\nexport class DropdownListElement extends DropdownElement {\n static styles = DropdownElement.styles;\n\n /**@internal */\n @query(\"ul.dropdown-menu\")\n private menu: HTMLUListElement;\n\n /** @internal */\n @state()\n nextDropdownItemNo = 0;\n\n /** @internal */\n @state()\n prevDropdownItemNo = -1;\n\n @property({ type: Boolean, reflect: true })\n hidden = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-hide\", this._resetMenu);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"sgds-hide\", this._resetMenu);\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n }\n\n protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n const items = this._getActiveMenuItems();\n const currentItemNo = items.indexOf(e.target as SgdsDropdownItem);\n this.nextDropdownItemNo = currentItemNo + 1;\n this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n /** Emitted event from SgdsDropdown element when a slot item is selected */\n const selectedItem = e.target as SgdsDropdownItem;\n if (!selectedItem.disabled) {\n this.emit(\"sgds-select\");\n if (this.close !== \"outside\") {\n this.hideMenu(); // <-- Use new API\n }\n }\n }\n\n private _resetMenu() {\n this.nextDropdownItemNo = 0;\n this.prevDropdownItemNo = -1;\n // reset the tabindex\n const items = this._getMenuItems();\n items.forEach(item => {\n const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n });\n }\n protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n if (this.readonly) return;\n const menuItems = this._getActiveMenuItems();\n if (menuItems.length === 0) return;\n\n switch (e.key) {\n case ARROW_DOWN:\n e.preventDefault();\n this._setMenuItem(this.nextDropdownItemNo);\n break;\n case ARROW_UP:\n e.preventDefault();\n this._setMenuItem(this.prevDropdownItemNo);\n break;\n case TAB:\n if (!this.menuIsOpen) return;\n e.preventDefault();\n if (e.shiftKey) {\n this._setMenuItem(this.prevDropdownItemNo);\n } else {\n this._setMenuItem(this.nextDropdownItemNo);\n }\n break;\n case ENTER:\n if (menuItems.includes(e.target as SgdsDropdownItem)) {\n this.handleSelectSlot(e);\n }\n break;\n default:\n break;\n }\n }\n\n private _getMenuItems(): SgdsDropdownItem[] {\n const defaultSlot = this.shadowRoot.querySelector(\"slot#default\");\n // for case when default slot is used e.g. dropdown, mainnavdropdown\n if (defaultSlot) {\n const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n ?.assignedElements({\n flatten: true\n })\n .filter(el => !el.classList.contains(\"empty-menu\") && !el.hasAttribute(\"hidden\")) as SgdsDropdownItem[];\n return defaultSlotItems;\n }\n // for case when there is no slot e.g. combobox\n if (this.menu?.hasChildNodes()) {\n const menuItems = Array.from(this.menu.children);\n return [...menuItems] as SgdsDropdownItem[];\n }\n\n return [];\n }\n\n private _getActiveMenuItems(): SgdsDropdownItem[] {\n return this._getMenuItems().filter(item => !item.disabled && !item.hidden);\n }\n private _setMenuItem(currentItemIdx: number) {\n const items = this._getActiveMenuItems();\n if (items.length === 0) return;\n\n // Use modulo for looping\n const idx = ((currentItemIdx % items.length) + items.length) % items.length;\n const activeItem = items[idx];\n this.emit(\"i-sgds-option-focus\", { detail: { option: activeItem } });\n this.nextDropdownItemNo = (idx + 1) % items.length;\n this.prevDropdownItemNo = (idx - 1 + items.length) % items.length;\n\n items.forEach(item => {\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n if (item === activeItem) dropdownItem.focus();\n });\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-list-element.js","sources":["../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\n\n/**\n * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.\n */\nexport class DropdownListElement extends DropdownElement {\n static styles = DropdownElement.styles;\n\n /**@internal */\n @query(\"ul.dropdown-menu\")\n private menu: HTMLUListElement;\n\n /** @internal */\n @state()\n nextDropdownItemNo = 0;\n\n /** @internal */\n @state()\n prevDropdownItemNo = -1;\n\n @property({ type: Boolean, reflect: true })\n hidden = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"sgds-hide\", this._resetMenu);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"sgds-hide\", this._resetMenu);\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n }\n\n protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n const items = this._getActiveMenuItems();\n const currentItemNo = items.indexOf(e.target as SgdsDropdownItem);\n this.nextDropdownItemNo = currentItemNo + 1;\n this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n /** Emitted event from SgdsDropdown element when a slot item is selected */\n const selectedItem = e.target as SgdsDropdownItem;\n if (!selectedItem.disabled) {\n this.emit(\"sgds-select\", { detail: { item: selectedItem } });\n if (this.close !== \"outside\") {\n this.hideMenu(); // <-- Use new API\n }\n }\n }\n\n private _resetMenu() {\n this.nextDropdownItemNo = 0;\n this.prevDropdownItemNo = -1;\n // reset the tabindex\n const items = this._getMenuItems();\n items.forEach(item => {\n const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n });\n }\n protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n if (this.readonly) return;\n const menuItems = this._getActiveMenuItems();\n if (menuItems.length === 0) return;\n\n switch (e.key) {\n case ARROW_DOWN:\n e.preventDefault();\n this._setMenuItem(this.nextDropdownItemNo);\n break;\n case ARROW_UP:\n e.preventDefault();\n this._setMenuItem(this.prevDropdownItemNo);\n break;\n case TAB:\n if (!this.menuIsOpen) return;\n e.preventDefault();\n if (e.shiftKey) {\n this._setMenuItem(this.prevDropdownItemNo);\n } else {\n this._setMenuItem(this.nextDropdownItemNo);\n }\n break;\n case ENTER:\n if (menuItems.includes(e.target as SgdsDropdownItem)) {\n this.handleSelectSlot(e);\n }\n break;\n default:\n break;\n }\n }\n\n private _getMenuItems(): SgdsDropdownItem[] {\n const defaultSlot = this.shadowRoot.querySelector(\"slot#default\");\n // for case when default slot is used e.g. dropdown, mainnavdropdown\n if (defaultSlot) {\n const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n ?.assignedElements({\n flatten: true\n })\n .filter(el => !el.classList.contains(\"empty-menu\") && !el.hasAttribute(\"hidden\")) as SgdsDropdownItem[];\n return defaultSlotItems;\n }\n // for case when there is no slot e.g. combobox\n if (this.menu?.hasChildNodes()) {\n const menuItems = Array.from(this.menu.children);\n return [...menuItems] as SgdsDropdownItem[];\n }\n\n return [];\n }\n\n private _getActiveMenuItems(): SgdsDropdownItem[] {\n return this._getMenuItems().filter(item => !item.disabled && !item.hidden);\n }\n private _setMenuItem(currentItemIdx: number) {\n const items = this._getActiveMenuItems();\n if (items.length === 0) return;\n\n // Use modulo for looping\n const idx = ((currentItemIdx % items.length) + items.length) % items.length;\n const activeItem = items[idx];\n this.emit(\"i-sgds-option-focus\", { detail: { option: activeItem } });\n this.nextDropdownItemNo = (idx + 1) % items.length;\n this.prevDropdownItemNo = (idx - 1 + items.length) % items.length;\n\n items.forEach(item => {\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n if (item === activeItem) dropdownItem.focus();\n });\n }\n}\n\nexport interface IDropdownListElement {\n item: SgdsDropdownItem;\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,GAAG,GAAG,KAAK,CAAC;AAClB,MAAM,UAAU,GAAG,WAAW,CAAC;AAC/B,MAAM,QAAQ,GAAG,SAAS,CAAC;AAC3B,MAAM,KAAK,GAAG,OAAO,CAAC;AAEtB;;AAEG;AACG,MAAO,mBAAoB,SAAQ,eAAe,CAAA;AAAxD,IAAA,WAAA,GAAA;;;QASE,IAAkB,CAAA,kBAAA,GAAG,CAAC,CAAC;;QAIvB,IAAkB,CAAA,kBAAA,GAAG,CAAC,CAAC,CAAC;QAGxB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAoHhB;IAlHC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KACrD;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KACxD;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;KACtE;AAES,IAAA,gBAAgB,CAAC,CAA6B,EAAA;AACtD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACzC,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAA0B,CAAC,CAAC;AAClE,QAAA,IAAI,CAAC,kBAAkB,GAAG,aAAa,GAAG,CAAC,CAAC;QAC5C,IAAI,CAAC,kBAAkB,GAAG,aAAa,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC;;AAGpF,QAAA,MAAM,YAAY,GAAG,CAAC,CAAC,MAA0B,CAAC;AAClD,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;AAC1B,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC;AAC7D,YAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;AAC5B,gBAAA,IAAI,CAAC,QAAQ,EAAE,CAAC;aACjB;SACF;KACF;IAEO,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;AAC5B,QAAA,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,CAAC;;AAE7B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;AACnC,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;AACnB,YAAA,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,IAAI,aAAJ,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAE,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAAC,gBAAgB,CAAsB,CAAC;AAC5F,YAAA,YAAY,IAAI,YAAY,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;AAC3D,SAAC,CAAC,CAAC;KACJ;AACS,IAAA,6BAA6B,CAAC,CAAgB,EAAA;QACtD,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;AAC1B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAC7C,QAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;AAEnC,QAAA,QAAQ,CAAC,CAAC,GAAG;AACX,YAAA,KAAK,UAAU;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBAC3C,MAAM;AACR,YAAA,KAAK,QAAQ;gBACX,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBAC3C,MAAM;AACR,YAAA,KAAK,GAAG;gBACN,IAAI,CAAC,IAAI,CAAC,UAAU;oBAAE,OAAO;gBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,gBAAA,IAAI,CAAC,CAAC,QAAQ,EAAE;AACd,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;iBAC5C;qBAAM;AACL,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;iBAC5C;gBACD,MAAM;AACR,YAAA,KAAK,KAAK;gBACR,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,MAA0B,CAAC,EAAE;AACpD,oBAAA,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;iBAC1B;gBACD,MAAM;SAGT;KACF;IAEO,aAAa,GAAA;;QACnB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;;QAElE,IAAI,WAAW,EAAE;AACf,YAAA,MAAM,gBAAgB,GAAG,CAAC,EAAA,GAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAqB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CACvF,gBAAgB,CAAC;AACjB,gBAAA,OAAO,EAAE,IAAI;aACd,CACA,CAAA,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAuB,CAAC;AAC1G,YAAA,OAAO,gBAAgB,CAAC;SACzB;;QAED,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,EAAE,EAAE;AAC9B,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACjD,YAAA,OAAO,CAAC,GAAG,SAAS,CAAuB,CAAC;SAC7C;AAED,QAAA,OAAO,EAAE,CAAC;KACX;IAEO,mBAAmB,GAAA;QACzB,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC5E;AACO,IAAA,YAAY,CAAC,cAAsB,EAAA;AACzC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;AACzC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;;AAG/B,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC;AAC5E,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;AACrE,QAAA,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC;AACnD,QAAA,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC;AAElE,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;YACnB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAsB,CAAC;AAC1F,YAAA,YAAY,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,KAAK,UAAU,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;YACxE,IAAI,IAAI,KAAK,UAAU;gBAAE,YAAY,CAAC,KAAK,EAAE,CAAC;AAChD,SAAC,CAAC,CAAC;KACJ;;AAlIM,mBAAA,CAAA,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;AAI/B,UAAA,CAAA;IADP,KAAK,CAAC,kBAAkB,CAAC;AACK,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI/B,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACe,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIvB,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACgB,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGxB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
|