npm - @govtechsg/sgds-web-component - Versions diffs - 3.12.0-rc.0 → 3.12.0 - Mend

@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.

Files changed (86) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.12.0-rc.0",
+  "version": "3.12.0",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/base/card.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.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)}`;
+var css_248z = lit.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)}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=card.cjs.js.map

package/react/base/card.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-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)}`;
+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)}`;
 export { css_248z as default };
 //# sourceMappingURL=card.js.map

package/react/base/dropdown-list-element.cjs.js CHANGED Viewed

@@ -12,7 +12,7 @@ const ARROW_DOWN = "ArrowDown";
 const ARROW_UP = "ArrowUp";
 const ENTER = "Enter";
 /**
- * @event sgds-select - Emitted event when a slot item is selected
+ * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.
  */
 class DropdownListElement extends dropdownElement.DropdownElement {
     constructor() {
@@ -43,7 +43,7 @@ class DropdownListElement extends dropdownElement.DropdownElement {
         /** Emitted event from SgdsDropdown element when a slot item is selected */
         const selectedItem = e.target;
         if (!selectedItem.disabled) {
-            this.emit("sgds-select");
+            this.emit("sgds-select", { detail: { item: selectedItem } });
             if (this.close !== "outside") {
                 this.hideMenu(); // <-- Use new API
             }

package/react/base/dropdown-list-element.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-list-element.cjs.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":["DropdownElement","__decorate","query","state","property"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown-list-element.cjs.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":["DropdownElement","__decorate","query","state","property"],"mappings":"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"}

package/react/base/dropdown-list-element.js CHANGED Viewed

@@ -8,7 +8,7 @@ const ARROW_DOWN = "ArrowDown";
 const ARROW_UP = "ArrowUp";
 const ENTER = "Enter";
 /**
- * @event sgds-select - Emitted event when a slot item is selected
+ * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.
  */
 class DropdownListElement extends DropdownElement {
     constructor() {
@@ -39,7 +39,7 @@ class DropdownListElement extends DropdownElement {
         /** Emitted event from SgdsDropdown element when a slot item is selected */
         const selectedItem = e.target;
         if (!selectedItem.disabled) {
-            this.emit("sgds-select");
+            this.emit("sgds-select", { detail: { item: selectedItem } });
             if (this.close !== "outside") {
                 this.hideMenu(); // <-- Use new API
             }

package/react/base/dropdown-list-element.js.map CHANGED Viewed

	@@ -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":";;;;;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,CAAC,CAAC;AACzB,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;;;;"}
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":"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"}

package/react/components/Checkbox/sgds-checkbox.cjs.js CHANGED Viewed

@@ -41,6 +41,15 @@ class SgdsCheckbox extends validatorMixin.SgdsFormValidatorMixin(formControlElem
         /**Feedback text for error state when validated */
         this.invalidFeedback = "";
         this._isTouched = false;
+        // Delegates host-targeted clicks to the internal input so that clicking anywhere
+        // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles
+        // the checkbox. Clicks already originating from inside the shadow DOM are left alone.
+        this._handleHostClick = (e) => {
+            if (e.composedPath()[0] === this) {
+                e.stopPropagation();
+                this.input.click();
+            }
+        };
     }
     /** Simulates a click on the checkbox. */
     click() {
@@ -127,6 +136,14 @@ class SgdsCheckbox extends validatorMixin.SgdsFormValidatorMixin(formControlElem
         super.firstUpdated(_changedProperties);
         this.checked && this.emit("sgds-check", { detail: { value: this.value } });
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this._handleHostClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this._handleHostClick);
+    }
     render() {
         const displayFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
         const displayFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";

package/react/components/Checkbox/sgds-checkbox.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-checkbox.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/*\n @summary Checkbox component is used when you require users to select multiple items from a list.\n \n @slot default - The label of checkbox.\n \n @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n /\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n /* Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @property({ type: String, reflect: true }) value: string;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Allows invalidFeedback, invalid and valid styles to be visible with the input /\n @property({ type: String, reflect: true }) hasFeedback: \"style\" \| \"text\" \| \"both\";\n\n /* Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"checked\")\n defaultChecked = false;\n\n /* Marks the checkbox input as indeterminate , with indeterminate logo /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n /Feedback text for error state when validated /\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n @state() private _isTouched = false;\n\n /** Simulates a click on the checkbox. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the checkbox. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange(e: Event) {\n if (this.indeterminate) {\n this.indeterminate = !this.indeterminate;\n }\n\n this.checked = !this.checked;\n super._mixinHandleChange(e);\n this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n this.checked\n ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === \"Enter\" && !hasModifier) {\n this.click();\n }\n }\n\n private _handleBlur() {\n this._isTouched = true;\n this.emit(\"sgds-blur\");\n }\n\n private _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\n }\n\n /* @internal /\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n private _mixinResetFormControl() {\n this._isTouched = false;\n this.checked = this.input.checked = this.defaultChecked;\n this.input.dispatchEvent(new InputEvent(\"reset\"));\n this._mixinResetValidity(this.input);\n }\n /\n Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n /\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /\n Checks for validity without any native error popup message\n /\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /\n Returns the ValidityState object\n /\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /\n Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n }\n render() {\n const displayFeedbackStyle = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"style\";\n const displayFeedbackText = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"text\";\n\n return html`\n <div class=\"form-check\">\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": displayFeedbackStyle && this.invalid\n })}\n type=\"checkbox\"\n id=${this._controlId}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n name=${ifDefined(this.name)}\n ?indeterminate=${this.indeterminate}\n ?required=${this.required}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${(e: Event) => this._handleChange(e)}\n @keydown=${this._handleKeyDown}\n @invalid=${(e: Event) => this._handleInvalid(e)}\n ?checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n />\n <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\n </div>\n ${displayFeedbackText && this.invalid\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n}\n\nexport default SgdsCheckbox;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","nothing","formCheckStyles","checkboxStyle","__decorate","property","defaultValue","state","watch"],"mappings":";;;;;;;;;;;;;;;;;;AAaA;;;;;;;;;;AAUG;MACU,YAAa,SAAQA,qCAAsB,CAACC,6BAAkB,CAAC,CAAA;AAA5E,IAAA,WAAA,GAAA;;;QAO8C,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAO5D,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;;QAGqB,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;;QAGtB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGlB,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;QAE/C,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;KAsJrC;;IAnJQ,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;;AAEM,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC3B;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACnB;AAEO,IAAA,aAAa,CAAC,CAAQ,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;SAC1C;AAED,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7B,QAAA,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAEnF,QAAA,IAAI,CAAC,OAAO;AACV,cAAE,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;AAC5D,cAAE,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;KAClE;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC;QACrF,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,WAAW,EAAE;YACzC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF;IAEO,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACxB;IAEO,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACzB;AAEO,IAAA,cAAc,CAAC,CAAQ,EAAA;QAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;;IAID,qBAAqB,GAAA;;AAEnB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACxB;IAGD,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;SAC5C;KACF;IAEO,sBAAsB,GAAA;AAC5B,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;QACxD,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AAClD,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;AACD;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AACD;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;AAED,IAAA,YAAY,CAAC,kBAAkB,EAAA;AAC7B,QAAA,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;KAC5E;IACD,MAAM,GAAA;AACJ,QAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,OAAO,CAAC;AACzF,QAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC;AAEvF,QAAA,OAAOC,QAAI,CAAA,CAAA;;;AAGG,gBAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,YAAY,EAAE,oBAAoB,IAAI,IAAI,CAAC,OAAO;SACnD,CAAC,CAAA;;AAEG,aAAA,EAAA,IAAI,CAAC,UAAU,CAAA;yBACL,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACvC,eAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACV,yBAAA,EAAA,IAAI,CAAC,aAAa,CAAA;AACvB,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;0BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;yBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;oBACpC,CAAC,CAAQ,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;AAClC,mBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;qBACnB,CAAC,CAAQ,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;AACpC,mBAAA,EAAAC,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACjB,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACb,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACjB,gBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AACf,iBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;AAEd,oBAAA,EAAA,IAAI,CAAC,UAAU,CAAkC,+BAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;QAE5E,mBAAmB,IAAI,IAAI,CAAC,OAAO;cACjCH,QAAI,CAAA,CAAA;;;;;;;;;;;AAWI,gBAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAA;;;AAGjF,UAAA,CAAA;AACH,cAAEI,WAAO,CAAA;KACZ,CAAC;KACH;;AA7KM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAGL,6BAAkB,CAAC,MAAM,EAAEM,oBAAe,EAAEC,mBAAa,CAAhE,CAAkE;AAGpCC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGbD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAwC,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIlFD,gBAAA,CAAA;IADCE,yBAAY,CAAC,SAAS,CAAC;AACD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGqBF,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGtBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE/CD,gBAAA,CAAA;AAAhB,IAAAG,mBAAK,EAAE;AAA4B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAqDpCH,gBAAA,CAAA;IADCI,WAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAIjD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA,CAAA;AAGDJ,gBAAA,CAAA;IADCI,WAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKnD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA;;;;;"}
1	+ {"version":3,"file":"sgds-checkbox.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/*\n @summary Checkbox component is used when you require users to select multiple items from a list.\n \n @slot default - The label of checkbox.\n \n @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n /\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n /* Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @property({ type: String, reflect: true }) value: string;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Allows invalidFeedback, invalid and valid styles to be visible with the input /\n @property({ type: String, reflect: true }) hasFeedback: \"style\" \| \"text\" \| \"both\";\n\n /* Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"checked\")\n defaultChecked = false;\n\n /* Marks the checkbox input as indeterminate , with indeterminate logo /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n /Feedback text for error state when validated /\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n @state() private _isTouched = false;\n\n /** Simulates a click on the checkbox. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the checkbox. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange(e: Event) {\n if (this.indeterminate) {\n this.indeterminate = !this.indeterminate;\n }\n\n this.checked = !this.checked;\n super._mixinHandleChange(e);\n this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n this.checked\n ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === \"Enter\" && !hasModifier) {\n this.click();\n }\n }\n\n private _handleBlur() {\n this._isTouched = true;\n this.emit(\"sgds-blur\");\n }\n\n private _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\n }\n\n /* @internal /\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n private _mixinResetFormControl() {\n this._isTouched = false;\n this.checked = this.input.checked = this.defaultChecked;\n this.input.dispatchEvent(new InputEvent(\"reset\"));\n this._mixinResetValidity(this.input);\n }\n /\n Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n /\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /\n Checks for validity without any native error popup message\n /\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /\n Returns the ValidityState object\n /\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /\n Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"click\", this._handleHostClick);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"click\", this._handleHostClick);\n }\n\n // Delegates host-targeted clicks to the internal input so that clicking anywhere\n // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n private _handleHostClick = (e: Event) => {\n if (e.composedPath()[0] === this) {\n e.stopPropagation();\n this.input.click();\n }\n };\n render() {\n const displayFeedbackStyle = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"style\";\n const displayFeedbackText = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"text\";\n\n return html`\n <div class=\"form-check\">\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": displayFeedbackStyle && this.invalid\n })}\n type=\"checkbox\"\n id=${this._controlId}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n name=${ifDefined(this.name)}\n ?indeterminate=${this.indeterminate}\n ?required=${this.required}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${(e: Event) => this._handleChange(e)}\n @keydown=${this._handleKeyDown}\n @invalid=${(e: Event) => this._handleInvalid(e)}\n ?checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n />\n <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\n </div>\n ${displayFeedbackText && this.invalid\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n}\n\nexport default SgdsCheckbox;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","nothing","formCheckStyles","checkboxStyle","__decorate","property","defaultValue","state","watch"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox.js CHANGED Viewed

@@ -37,6 +37,15 @@ class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
         /**Feedback text for error state when validated */
         this.invalidFeedback = "";
         this._isTouched = false;
+        // Delegates host-targeted clicks to the internal input so that clicking anywhere
+        // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles
+        // the checkbox. Clicks already originating from inside the shadow DOM are left alone.
+        this._handleHostClick = (e) => {
+            if (e.composedPath()[0] === this) {
+                e.stopPropagation();
+                this.input.click();
+            }
+        };
     }
     /** Simulates a click on the checkbox. */
     click() {
@@ -123,6 +132,14 @@ class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
         super.firstUpdated(_changedProperties);
         this.checked && this.emit("sgds-check", { detail: { value: this.value } });
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this._handleHostClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this._handleHostClick);
+    }
     render() {
         const displayFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
         const displayFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";

package/react/components/Checkbox/sgds-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-checkbox.js","sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/*\n @summary Checkbox component is used when you require users to select multiple items from a list.\n \n @slot default - The label of checkbox.\n \n @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n /\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n /* Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @property({ type: String, reflect: true }) value: string;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Allows invalidFeedback, invalid and valid styles to be visible with the input /\n @property({ type: String, reflect: true }) hasFeedback: \"style\" \| \"text\" \| \"both\";\n\n /* Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"checked\")\n defaultChecked = false;\n\n /* Marks the checkbox input as indeterminate , with indeterminate logo /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n /Feedback text for error state when validated /\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n @state() private _isTouched = false;\n\n /** Simulates a click on the checkbox. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the checkbox. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange(e: Event) {\n if (this.indeterminate) {\n this.indeterminate = !this.indeterminate;\n }\n\n this.checked = !this.checked;\n super._mixinHandleChange(e);\n this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n this.checked\n ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === \"Enter\" && !hasModifier) {\n this.click();\n }\n }\n\n private _handleBlur() {\n this._isTouched = true;\n this.emit(\"sgds-blur\");\n }\n\n private _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\n }\n\n /* @internal /\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n private _mixinResetFormControl() {\n this._isTouched = false;\n this.checked = this.input.checked = this.defaultChecked;\n this.input.dispatchEvent(new InputEvent(\"reset\"));\n this._mixinResetValidity(this.input);\n }\n /\n Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n /\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /\n Checks for validity without any native error popup message\n /\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /\n Returns the ValidityState object\n /\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /\n Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n }\n render() {\n const displayFeedbackStyle = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"style\";\n const displayFeedbackText = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"text\";\n\n return html`\n <div class=\"form-check\">\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": displayFeedbackStyle && this.invalid\n })}\n type=\"checkbox\"\n id=${this._controlId}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n name=${ifDefined(this.name)}\n ?indeterminate=${this.indeterminate}\n ?required=${this.required}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${(e: Event) => this._handleChange(e)}\n @keydown=${this._handleKeyDown}\n @invalid=${(e: Event) => this._handleInvalid(e)}\n ?checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n />\n <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\n </div>\n ${displayFeedbackText && this.invalid\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n}\n\nexport default SgdsCheckbox;\n"],"names":["formCheckStyles","checkboxStyle"],"mappings":";;;;;;;;;;;;;;AAaA;;;;;;;;;;AAUG;MACU,YAAa,SAAQ,sBAAsB,CAAC,kBAAkB,CAAC,CAAA;AAA5E,IAAA,WAAA,GAAA;;;QAO8C,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAO5D,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;;QAGqB,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;;QAGtB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGlB,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;QAE/C,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;KAsJrC;;IAnJQ,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;;AAEM,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC3B;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACnB;AAEO,IAAA,aAAa,CAAC,CAAQ,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;SAC1C;AAED,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7B,QAAA,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAEnF,QAAA,IAAI,CAAC,OAAO;AACV,cAAE,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;AAC5D,cAAE,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;KAClE;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC;QACrF,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,WAAW,EAAE;YACzC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF;IAEO,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACxB;IAEO,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACzB;AAEO,IAAA,cAAc,CAAC,CAAQ,EAAA;QAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;;IAID,qBAAqB,GAAA;;AAEnB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACxB;IAGD,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;SAC5C;KACF;IAEO,sBAAsB,GAAA;AAC5B,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;QACxD,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AAClD,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;AACD;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AACD;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;AAED,IAAA,YAAY,CAAC,kBAAkB,EAAA;AAC7B,QAAA,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;KAC5E;IACD,MAAM,GAAA;AACJ,QAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,OAAO,CAAC;AACzF,QAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC;AAEvF,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGG,gBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,YAAY,EAAE,oBAAoB,IAAI,IAAI,CAAC,OAAO;SACnD,CAAC,CAAA;;AAEG,aAAA,EAAA,IAAI,CAAC,UAAU,CAAA;yBACL,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACvC,eAAA,EAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACV,yBAAA,EAAA,IAAI,CAAC,aAAa,CAAA;AACvB,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;0BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;yBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;oBACpC,CAAC,CAAQ,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;AAClC,mBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;qBACnB,CAAC,CAAQ,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;AACpC,mBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACjB,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACb,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACjB,gBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AACf,iBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;AAEd,oBAAA,EAAA,IAAI,CAAC,UAAU,CAAkC,+BAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;QAE5E,mBAAmB,IAAI,IAAI,CAAC,OAAO;cACjC,IAAI,CAAA,CAAA;;;;;;;;;;;AAWI,gBAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAA;;;AAGjF,UAAA,CAAA;AACH,cAAE,OAAO,CAAA;KACZ,CAAC;KACH;;AA7KM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAEA,QAAe,EAAEC,UAAa,CAAhE,CAAkE;AAGpC,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGb,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAwC,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIlF,UAAA,CAAA;IADC,YAAY,CAAC,SAAS,CAAC;AACD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGqB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGtB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE/C,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAA4B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAqDpC,UAAA,CAAA;IADC,KAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAIjD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKnD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA;;;;"}
1	+ {"version":3,"file":"sgds-checkbox.js","sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/*\n @summary Checkbox component is used when you require users to select multiple items from a list.\n \n @slot default - The label of checkbox.\n \n @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n /\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n /* Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @property({ type: String, reflect: true }) value: string;\n\n /* Draws the checkbox in a checked state. /\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /* Allows invalidFeedback, invalid and valid styles to be visible with the input /\n @property({ type: String, reflect: true }) hasFeedback: \"style\" \| \"text\" \| \"both\";\n\n /* Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. /\n @defaultValue(\"checked\")\n defaultChecked = false;\n\n /* Marks the checkbox input as indeterminate , with indeterminate logo /\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /* Makes the checkbox a required field. /\n @property({ type: Boolean, reflect: true }) required = false;\n\n /Feedback text for error state when validated /\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n @state() private _isTouched = false;\n\n /** Simulates a click on the checkbox. /\n public click() {\n this.input.click();\n }\n /* Sets focus on the checkbox. /\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* Removes focus from the checkbox. /\n public blur() {\n this.input.blur();\n }\n\n private _handleChange(e: Event) {\n if (this.indeterminate) {\n this.indeterminate = !this.indeterminate;\n }\n\n this.checked = !this.checked;\n super._mixinHandleChange(e);\n this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n this.checked\n ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const hasModifier = event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey;\n if (event.key === \"Enter\" && !hasModifier) {\n this.click();\n }\n }\n\n private _handleBlur() {\n this._isTouched = true;\n this.emit(\"sgds-blur\");\n }\n\n private _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n private _handleInvalid(e: Event) {\n e.preventDefault();\n this.invalid = true;\n }\n\n /* @internal /\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n private _mixinResetFormControl() {\n this._isTouched = false;\n this.checked = this.input.checked = this.defaultChecked;\n this.input.dispatchEvent(new InputEvent(\"reset\"));\n this._mixinResetValidity(this.input);\n }\n /\n Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n /\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /\n Checks for validity without any native error popup message\n /\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /\n Returns the ValidityState object\n /\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /\n Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"click\", this._handleHostClick);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"click\", this._handleHostClick);\n }\n\n // Delegates host-targeted clicks to the internal input so that clicking anywhere\n // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n private _handleHostClick = (e: Event) => {\n if (e.composedPath()[0] === this) {\n e.stopPropagation();\n this.input.click();\n }\n };\n render() {\n const displayFeedbackStyle = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"style\";\n const displayFeedbackText = this.hasFeedback === \"both\" \|\| this.hasFeedback === \"text\";\n\n return html`\n <div class=\"form-check\">\n <input\n class=${classMap({\n \"form-check-input\": true,\n \"is-invalid\": displayFeedbackStyle && this.invalid\n })}\n type=\"checkbox\"\n id=${this._controlId}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n name=${ifDefined(this.name)}\n ?indeterminate=${this.indeterminate}\n ?required=${this.required}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-checked=${this.checked ? \"true\" : \"false\"}\n @change=${(e: Event) => this._handleChange(e)}\n @keydown=${this._handleKeyDown}\n @invalid=${(e: Event) => this._handleInvalid(e)}\n ?checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n @blur=${this._handleBlur}\n @focus=${this._handleFocus}\n />\n <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\n </div>\n ${displayFeedbackText && this.invalid\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n `;\n }\n}\n\nexport default SgdsCheckbox;\n"],"names":["formCheckStyles","checkboxStyle"],"mappings":"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"}

package/react/components/Dropdown/dropdown-item.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}`;
+var css_248z = lit.css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=dropdown-item.cjs.js.map

package/react/components/Dropdown/dropdown-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}`;
+var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}`;
 export { css_248z as default };
 //# sourceMappingURL=dropdown-item.js.map

package/react/components/Dropdown/sgds-dropdown-item.cjs.js CHANGED Viewed

@@ -31,9 +31,6 @@ class SgdsDropdownItem extends sgdsElement["default"] {
                 this.anchor[0].click();
             }
         });
-        this.addEventListener("click", () => {
-            this.anchor.length > 0 && this.anchor[0].click();
-        });
         this.setAttribute("role", "menuitem");
         this.setAttribute("aria-disabled", `${this.disabled}`);
     }

package/react/components/Dropdown/sgds-dropdown-item.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-dropdown-item.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/*\n @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n /\nexport class SgdsDropdownItem extends SgdsElement {\n static styles = [dropdownStyle, dropdownItemStyle];\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /* @internal /\n @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n /* when true, sets the active stylings of dropdown item /\n @property({ type: Boolean })\n active = false;\n\n /* Disables the SgdsMainnavItem */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.anchor[0].click();\n }\n });\n this.~~addEventListener(\"click\", () => {\n this.anchor.length > 0 && this.anchor[0].click();\n });\n this.~~setAttribute(\"role\", \"menuitem\");\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n }\n\n render() {\n return html`\n <div\n class=\"dropdown-item ${classMap({\n disabled: this.disabled,\n active: this.active\n })}\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["SgdsElement","html","classMap","dropdownStyle","dropdownItemStyle","SgdsIcon","__decorate","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;AAOA;;;AAGG;AACG,MAAO,gBAAiB,SAAQA,sBAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;~~KA6BlB~~;~~IA3BC~~,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,~~gBAAgB,CAAC,OAAO,EAAE,MAAK;AAClC,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;AACnD,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,~~YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAAC,oBAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;mBACS,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;;KAIxC,CAAC;KACH;;~~AA1CM~~,gBAAA,CAAA,MAAM,GAAG,CAACC,mBAAa,EAAEC,uBAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAFkB,CAEjB;AAGgDC,gBAAA,CAAA;AAAjD,IAAAC,mCAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9ED,gBAAA,CAAA;AADC,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIfF,gBAAA,CAAA;IADCE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
1	+ {"version":3,"file":"sgds-dropdown-item.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/*\n @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n /\nexport class SgdsDropdownItem extends SgdsElement {\n static styles = [dropdownStyle, dropdownItemStyle];\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /* @internal /\n @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n /* when true, sets the active stylings of dropdown item /\n @property({ type: Boolean })\n active = false;\n\n /* Disables the SgdsMainnavItem */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.anchor[0].click();\n }\n });\n this.setAttribute(\"role\", \"menuitem\");\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n }\n\n render() {\n return html`\n <div\n class=\"dropdown-item ${classMap({\n disabled: this.disabled,\n active: this.active\n })}\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["SgdsElement","html","classMap","dropdownStyle","dropdownItemStyle","SgdsIcon","__decorate","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;AAOA;;;AAGG;AACG,MAAO,gBAAiB,SAAQA,sBAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KA0BlB;IAxBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAAC,oBAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;mBACS,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;;KAIxC,CAAC;KACH;;AAvCM,gBAAA,CAAA,MAAM,GAAG,CAACC,mBAAa,EAAEC,uBAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAFkB,CAEjB;AAGgDC,gBAAA,CAAA;AAAjD,IAAAC,mCAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9ED,gBAAA,CAAA;AADC,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIfF,gBAAA,CAAA;IADCE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Dropdown/sgds-dropdown-item.js CHANGED Viewed

@@ -27,9 +27,6 @@ class SgdsDropdownItem extends SgdsElement {
                 this.anchor[0].click();
             }
         });
-        this.addEventListener("click", () => {
-            this.anchor.length > 0 && this.anchor[0].click();
-        });
         this.setAttribute("role", "menuitem");
         this.setAttribute("aria-disabled", `${this.disabled}`);
     }

package/react/components/Dropdown/sgds-dropdown-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-dropdown-item.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/*\n @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n /\nexport class SgdsDropdownItem extends SgdsElement {\n static styles = [dropdownStyle, dropdownItemStyle];\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /* @internal /\n @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n /* when true, sets the active stylings of dropdown item /\n @property({ type: Boolean })\n active = false;\n\n /* Disables the SgdsMainnavItem */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.anchor[0].click();\n }\n });\n this.~~addEventListener(\"click\", () => {\n this.anchor.length > 0 && this.anchor[0].click();\n });\n this.~~setAttribute(\"role\", \"menuitem\");\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n }\n\n render() {\n return html`\n <div\n class=\"dropdown-item ${classMap({\n disabled: this.disabled,\n active: this.active\n })}\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle","dropdownItemStyle"],"mappings":";;;;;;;;;;AAOA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;~~KA6BlB~~;~~IA3BC~~,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,~~gBAAgB,CAAC,OAAO,EAAE,MAAK;AAClC,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;AACnD,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,~~YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAA,QAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;mBACS,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;;KAIxC,CAAC;KACH;;~~AA1CM~~,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,EAAEC,UAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAGgD,UAAA,CAAA;AAAjD,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9E,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"sgds-dropdown-item.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/*\n @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n /\nexport class SgdsDropdownItem extends SgdsElement {\n static styles = [dropdownStyle, dropdownItemStyle];\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /* @internal /\n @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n /* when true, sets the active stylings of dropdown item /\n @property({ type: Boolean })\n active = false;\n\n /* Disables the SgdsMainnavItem */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.anchor[0].click();\n }\n });\n this.setAttribute(\"role\", \"menuitem\");\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n }\n\n render() {\n return html`\n <div\n class=\"dropdown-item ${classMap({\n disabled: this.disabled,\n active: this.active\n })}\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle","dropdownItemStyle"],"mappings":";;;;;;;;;;AAOA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KA0BlB;IAxBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAA,QAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;mBACS,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;;KAIxC,CAAC;KACH;;AAvCM,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,EAAEC,UAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAGgD,UAAA,CAAA;AAAjD,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9E,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/IconCard/icon-card.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}: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([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}`;
+var css_248z = lit.css`:host([noPadding]) .card{background-color:inherit;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=icon-card.cjs.js.map

package/react/components/IconCard/icon-card.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}: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([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}`;
+var css_248z = css`:host([noPadding]) .card{background-color:inherit;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}`;
 export { css_248z as default };
 //# sourceMappingURL=icon-card.js.map

package/react/components/ImageCard/image-card.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}: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([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=image-badge]::slotted(*){left:20px;position:absolute;top:20px}slot[name=image-action]::slotted(*){position:absolute;right:20px;top:20px}`;
+var css_248z = lit.css`:host([noPadding]) .card{background-color:inherit;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=image-badge]::slotted(*){left:20px;position:absolute;top:20px}slot[name=image-action]::slotted(*){position:absolute;right:20px;top:20px}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=image-card.cjs.js.map

package/react/components/ImageCard/image-card.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}: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([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=image-badge]::slotted(*){left:20px;position:absolute;top:20px}slot[name=image-action]::slotted(*){position:absolute;right:20px;top:20px}`;
+var css_248z = css`:host([noPadding]) .card{background-color:inherit;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=image-badge]::slotted(*){left:20px;position:absolute;top:20px}slot[name=image-action]::slotted(*){position:absolute;right:20px;top:20px}`;
 export { css_248z as default };
 //# sourceMappingURL=image-card.js.map