@govtechsg/sgds-web-component 3.6.0 → 3.6.2

package/package.json

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

package/react/base/dropdown-element.cjs.js

@@ -64,7 +64,7 @@ class DropdownElement extends sgdsElement["default"] {
             if (!this.menuIsOpen)
                 return;
             if (!e.composedPath().includes(this)) {
-                this.hideMenu();
+                this.hideMenu(true);
             }
         };
     }
@@ -104,10 +104,10 @@ class DropdownElement extends sgdsElement["default"] {
         }
     }
     /** When invoked, hides the dropdown menu */
-    async hideMenu() {
+    async hideMenu(isOutside) {
         if (!this.menuIsOpen)
             return;
-        this.emit("sgds-hide");
+        this.emit("sgds-hide", { detail: { isOutside } });
         this.menuIsOpen = false;
         setTimeout(() => this.emit("sgds-after-hide"), 0);
         if (this._cleanupAutoUpdate) {

package/react/base/dropdown-element.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-element.cjs.js","sources":["../../../src/base/dropdown-element.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport { computePosition, flip, shift, offset, Placement, Middleware, autoUpdate, Strategy } from \"@floating-ui/dom\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\nimport { PropertyValueMap } from \"lit\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n */\n\nexport class DropdownElement extends SgdsElement {\n  // static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n\n  /** @internal Unique id generated for the dropdown menu */\n  protected dropdownMenuId: string = generateId(\"dropdown-menu\", \"div\");\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Floating UI. */\n  @property({ type: Object })\n  floatingOpts: { placement?: Placement; middleware?: Array<Middleware> } = {};\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  protected close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  private _cleanupAutoUpdate?: () => void;\n\n  /** @internal Reference to the floating menu element */\n  protected menuRef: Ref<HTMLElement> = createRef();\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", this._handleClickOutOfElement);\n    }\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._handleClickOutOfElement);\n    this.removeEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n    if (this._cleanupAutoUpdate) {\n      this._cleanupAutoUpdate();\n      this._cleanupAutoUpdate = undefined;\n    }\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    // Optionally open menu on first load\n    if (this.menuIsOpen) {\n      this.updateFloatingPosition();\n    }\n  }\n\n  /** When invoked, opens the dropdown menu */\n  public async showMenu() {\n    if (this.disabled || this.menuIsOpen) return;\n    this.menuIsOpen = true;\n    this.emit(\"sgds-show\");\n    await this.updateFloatingPosition();\n    this.emit(\"sgds-after-show\");\n\n    if (this.myDropdown.value && this.menuRef.value) {\n      this._cleanupAutoUpdate = autoUpdate(this.myDropdown.value, this.menuRef.value, () =>\n        this.updateFloatingPosition()\n      );\n    }\n  }\n\n  /** When invoked, hides the dropdown menu */\n  public async hideMenu() {\n    if (!this.menuIsOpen) return;\n    this.emit(\"sgds-hide\");\n    this.menuIsOpen = false;\n    setTimeout(() => this.emit(\"sgds-after-hide\"), 0);\n\n    if (this._cleanupAutoUpdate) {\n      this._cleanupAutoUpdate();\n      this._cleanupAutoUpdate = undefined;\n    }\n  }\n\n  toggleMenu() {\n    if (this.menuIsOpen) {\n      this.hideMenu();\n    } else {\n      this.showMenu();\n    }\n  }\n\n  protected _handleKeyboardMenuEvent = (e: KeyboardEvent) => {\n    if (this.readonly) return;\n    switch (e.key) {\n      case ARROW_DOWN:\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) this.showMenu();\n        break;\n      case ESC:\n        this.hideMenu();\n        break;\n      default:\n        break;\n    }\n  };\n\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    if (!this.menuIsOpen) return;\n    if (!e.composedPath().includes(this)) {\n      this.hideMenu();\n    }\n  };\n\n  protected mergeMiddleware(defaults: Middleware[], custom: Middleware[]): Middleware[] {\n    const getType = (mw: Middleware) => mw?.name || mw?.constructor?.name;\n    const customTypes = custom.map(getType);\n\n    const merged = defaults\n      .map(def => {\n        const type = getType(def);\n        const customIdx = customTypes.indexOf(type);\n        return customIdx !== -1 ? custom[customIdx] : def;\n      })\n\n      .concat(custom.filter(c => !defaults.some(def => getType(def) === getType(c))));\n    return merged;\n  }\n\n  protected async updateFloatingPosition() {\n    if (!this.myDropdown.value || !this.menuRef.value) return;\n\n    let placement: Placement = \"bottom-start\";\n    switch (this.drop) {\n      case \"up\":\n        placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n        break;\n      case \"right\":\n        placement = \"right-start\";\n        break;\n      case \"left\":\n        placement = \"left-start\";\n        break;\n      case \"down\":\n        placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n        break;\n      default:\n        placement = \"bottom-start\";\n        break;\n    }\n\n    const defaultMiddleware = [offset(8), !this.noFlip ? flip() : undefined, shift()].filter(Boolean);\n\n    let middleware = defaultMiddleware;\n    if (Array.isArray(this.floatingOpts.middleware) && this.floatingOpts.middleware.length > 0) {\n      middleware = this.mergeMiddleware(defaultMiddleware, this.floatingOpts.middleware.filter(Boolean));\n    }\n\n    const opts = {\n      strategy: \"fixed\" as Strategy,\n      placement,\n      ...this.floatingOpts,\n      middleware\n    };\n\n    const {\n      x,\n      y,\n      strategy,\n      placement: computedPlacement\n    } = await computePosition(this.myDropdown.value, this.menuRef.value, opts);\n\n    this.menuRef.value.setAttribute(\"data-placement\", computedPlacement);\n\n    Object.assign(this.menuRef.value.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`\n    });\n  }\n}\n"],"names":["SgdsElement","createRef","generateId","autoUpdate","offset","flip","shift","computePosition","__decorate","property"],"mappings":"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"}
+{"version":3,"file":"dropdown-element.cjs.js","sources":["../../../src/base/dropdown-element.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport { computePosition, flip, shift, offset, Placement, Middleware, autoUpdate, Strategy } from \"@floating-ui/dom\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\nimport { PropertyValueMap } from \"lit\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n */\n\nexport class DropdownElement extends SgdsElement {\n  // static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n\n  /** @internal Unique id generated for the dropdown menu */\n  protected dropdownMenuId: string = generateId(\"dropdown-menu\", \"div\");\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Floating UI. */\n  @property({ type: Object })\n  floatingOpts: { placement?: Placement; middleware?: Array<Middleware> } = {};\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  protected close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  private _cleanupAutoUpdate?: () => void;\n\n  /** @internal Reference to the floating menu element */\n  protected menuRef: Ref<HTMLElement> = createRef();\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", this._handleClickOutOfElement);\n    }\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._handleClickOutOfElement);\n    this.removeEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n    if (this._cleanupAutoUpdate) {\n      this._cleanupAutoUpdate();\n      this._cleanupAutoUpdate = undefined;\n    }\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    // Optionally open menu on first load\n    if (this.menuIsOpen) {\n      this.updateFloatingPosition();\n    }\n  }\n\n  /** When invoked, opens the dropdown menu */\n  public async showMenu() {\n    if (this.disabled || this.menuIsOpen) return;\n    this.menuIsOpen = true;\n    this.emit(\"sgds-show\");\n    await this.updateFloatingPosition();\n    this.emit(\"sgds-after-show\");\n\n    if (this.myDropdown.value && this.menuRef.value) {\n      this._cleanupAutoUpdate = autoUpdate(this.myDropdown.value, this.menuRef.value, () =>\n        this.updateFloatingPosition()\n      );\n    }\n  }\n\n  /** When invoked, hides the dropdown menu */\n  public async hideMenu(isOutside?: boolean) {\n    if (!this.menuIsOpen) return;\n    this.emit(\"sgds-hide\", { detail: { isOutside } });\n\n    this.menuIsOpen = false;\n    setTimeout(() => this.emit(\"sgds-after-hide\"), 0);\n\n    if (this._cleanupAutoUpdate) {\n      this._cleanupAutoUpdate();\n      this._cleanupAutoUpdate = undefined;\n    }\n  }\n\n  toggleMenu() {\n    if (this.menuIsOpen) {\n      this.hideMenu();\n    } else {\n      this.showMenu();\n    }\n  }\n\n  protected _handleKeyboardMenuEvent = (e: KeyboardEvent) => {\n    if (this.readonly) return;\n    switch (e.key) {\n      case ARROW_DOWN:\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) this.showMenu();\n        break;\n      case ESC:\n        this.hideMenu();\n        break;\n      default:\n        break;\n    }\n  };\n\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    if (!this.menuIsOpen) return;\n    if (!e.composedPath().includes(this)) {\n      this.hideMenu(true);\n    }\n  };\n\n  protected mergeMiddleware(defaults: Middleware[], custom: Middleware[]): Middleware[] {\n    const getType = (mw: Middleware) => mw?.name || mw?.constructor?.name;\n    const customTypes = custom.map(getType);\n\n    const merged = defaults\n      .map(def => {\n        const type = getType(def);\n        const customIdx = customTypes.indexOf(type);\n        return customIdx !== -1 ? custom[customIdx] : def;\n      })\n\n      .concat(custom.filter(c => !defaults.some(def => getType(def) === getType(c))));\n    return merged;\n  }\n\n  protected async updateFloatingPosition() {\n    if (!this.myDropdown.value || !this.menuRef.value) return;\n\n    let placement: Placement = \"bottom-start\";\n    switch (this.drop) {\n      case \"up\":\n        placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n        break;\n      case \"right\":\n        placement = \"right-start\";\n        break;\n      case \"left\":\n        placement = \"left-start\";\n        break;\n      case \"down\":\n        placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n        break;\n      default:\n        placement = \"bottom-start\";\n        break;\n    }\n\n    const defaultMiddleware = [offset(8), !this.noFlip ? flip() : undefined, shift()].filter(Boolean);\n\n    let middleware = defaultMiddleware;\n    if (Array.isArray(this.floatingOpts.middleware) && this.floatingOpts.middleware.length > 0) {\n      middleware = this.mergeMiddleware(defaultMiddleware, this.floatingOpts.middleware.filter(Boolean));\n    }\n\n    const opts = {\n      strategy: \"fixed\" as Strategy,\n      placement,\n      ...this.floatingOpts,\n      middleware\n    };\n\n    const {\n      x,\n      y,\n      strategy,\n      placement: computedPlacement\n    } = await computePosition(this.myDropdown.value, this.menuRef.value, opts);\n\n    this.menuRef.value.setAttribute(\"data-placement\", computedPlacement);\n\n    Object.assign(this.menuRef.value.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`\n    });\n  }\n}\n"],"names":["SgdsElement","createRef","generateId","autoUpdate","offset","flip","shift","computePosition","__decorate","property"],"mappings":"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"}

package/react/base/dropdown-element.js

@@ -60,7 +60,7 @@ class DropdownElement extends SgdsElement {
             if (!this.menuIsOpen)
                 return;
             if (!e.composedPath().includes(this)) {
-                this.hideMenu();
+                this.hideMenu(true);
             }
         };
     }
@@ -100,10 +100,10 @@ class DropdownElement extends SgdsElement {
         }
     }
     /** When invoked, hides the dropdown menu */
-    async hideMenu() {
+    async hideMenu(isOutside) {
         if (!this.menuIsOpen)
             return;
-        this.emit("sgds-hide");
+        this.emit("sgds-hide", { detail: { isOutside } });
         this.menuIsOpen = false;
         setTimeout(() => this.emit("sgds-after-hide"), 0);
         if (this._cleanupAutoUpdate) {

package/react/base/dropdown-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-element.js","sources":["../../../src/base/dropdown-element.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport { computePosition, flip, shift, offset, Placement, Middleware, autoUpdate, Strategy } from \"@floating-ui/dom\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\nimport { PropertyValueMap } from \"lit\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n */\n\nexport class DropdownElement extends SgdsElement {\n  // static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n\n  /** @internal Unique id generated for the dropdown menu */\n  protected dropdownMenuId: string = generateId(\"dropdown-menu\", \"div\");\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Floating UI. */\n  @property({ type: Object })\n  floatingOpts: { placement?: Placement; middleware?: Array<Middleware> } = {};\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  protected close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  private _cleanupAutoUpdate?: () => void;\n\n  /** @internal Reference to the floating menu element */\n  protected menuRef: Ref<HTMLElement> = createRef();\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", this._handleClickOutOfElement);\n    }\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._handleClickOutOfElement);\n    this.removeEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n    if (this._cleanupAutoUpdate) {\n      this._cleanupAutoUpdate();\n      this._cleanupAutoUpdate = undefined;\n    }\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    // Optionally open menu on first load\n    if (this.menuIsOpen) {\n      this.updateFloatingPosition();\n    }\n  }\n\n  /** When invoked, opens the dropdown menu */\n  public async showMenu() {\n    if (this.disabled || this.menuIsOpen) return;\n    this.menuIsOpen = true;\n    this.emit(\"sgds-show\");\n    await this.updateFloatingPosition();\n    this.emit(\"sgds-after-show\");\n\n    if (this.myDropdown.value && this.menuRef.value) {\n      this._cleanupAutoUpdate = autoUpdate(this.myDropdown.value, this.menuRef.value, () =>\n        this.updateFloatingPosition()\n      );\n    }\n  }\n\n  /** When invoked, hides the dropdown menu */\n  public async hideMenu() {\n    if (!this.menuIsOpen) return;\n    this.emit(\"sgds-hide\");\n    this.menuIsOpen = false;\n    setTimeout(() => this.emit(\"sgds-after-hide\"), 0);\n\n    if (this._cleanupAutoUpdate) {\n      this._cleanupAutoUpdate();\n      this._cleanupAutoUpdate = undefined;\n    }\n  }\n\n  toggleMenu() {\n    if (this.menuIsOpen) {\n      this.hideMenu();\n    } else {\n      this.showMenu();\n    }\n  }\n\n  protected _handleKeyboardMenuEvent = (e: KeyboardEvent) => {\n    if (this.readonly) return;\n    switch (e.key) {\n      case ARROW_DOWN:\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) this.showMenu();\n        break;\n      case ESC:\n        this.hideMenu();\n        break;\n      default:\n        break;\n    }\n  };\n\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    if (!this.menuIsOpen) return;\n    if (!e.composedPath().includes(this)) {\n      this.hideMenu();\n    }\n  };\n\n  protected mergeMiddleware(defaults: Middleware[], custom: Middleware[]): Middleware[] {\n    const getType = (mw: Middleware) => mw?.name || mw?.constructor?.name;\n    const customTypes = custom.map(getType);\n\n    const merged = defaults\n      .map(def => {\n        const type = getType(def);\n        const customIdx = customTypes.indexOf(type);\n        return customIdx !== -1 ? custom[customIdx] : def;\n      })\n\n      .concat(custom.filter(c => !defaults.some(def => getType(def) === getType(c))));\n    return merged;\n  }\n\n  protected async updateFloatingPosition() {\n    if (!this.myDropdown.value || !this.menuRef.value) return;\n\n    let placement: Placement = \"bottom-start\";\n    switch (this.drop) {\n      case \"up\":\n        placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n        break;\n      case \"right\":\n        placement = \"right-start\";\n        break;\n      case \"left\":\n        placement = \"left-start\";\n        break;\n      case \"down\":\n        placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n        break;\n      default:\n        placement = \"bottom-start\";\n        break;\n    }\n\n    const defaultMiddleware = [offset(8), !this.noFlip ? flip() : undefined, shift()].filter(Boolean);\n\n    let middleware = defaultMiddleware;\n    if (Array.isArray(this.floatingOpts.middleware) && this.floatingOpts.middleware.length > 0) {\n      middleware = this.mergeMiddleware(defaultMiddleware, this.floatingOpts.middleware.filter(Boolean));\n    }\n\n    const opts = {\n      strategy: \"fixed\" as Strategy,\n      placement,\n      ...this.floatingOpts,\n      middleware\n    };\n\n    const {\n      x,\n      y,\n      strategy,\n      placement: computedPlacement\n    } = await computePosition(this.myDropdown.value, this.menuRef.value, opts);\n\n    this.menuRef.value.setAttribute(\"data-placement\", computedPlacement);\n\n    Object.assign(this.menuRef.value.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`\n    });\n  }\n}\n"],"names":["generateId"],"mappings":"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"}
+{"version":3,"file":"dropdown-element.js","sources":["../../../src/base/dropdown-element.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport { computePosition, flip, shift, offset, Placement, Middleware, autoUpdate, Strategy } from \"@floating-ui/dom\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\nimport { PropertyValueMap } from \"lit\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n */\n\nexport class DropdownElement extends SgdsElement {\n  // static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n\n  /** @internal Unique id generated for the dropdown menu */\n  protected dropdownMenuId: string = generateId(\"dropdown-menu\", \"div\");\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Floating UI. */\n  @property({ type: Object })\n  floatingOpts: { placement?: Placement; middleware?: Array<Middleware> } = {};\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  protected close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  private _cleanupAutoUpdate?: () => void;\n\n  /** @internal Reference to the floating menu element */\n  protected menuRef: Ref<HTMLElement> = createRef();\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", this._handleClickOutOfElement);\n    }\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._handleClickOutOfElement);\n    this.removeEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n    if (this._cleanupAutoUpdate) {\n      this._cleanupAutoUpdate();\n      this._cleanupAutoUpdate = undefined;\n    }\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    // Optionally open menu on first load\n    if (this.menuIsOpen) {\n      this.updateFloatingPosition();\n    }\n  }\n\n  /** When invoked, opens the dropdown menu */\n  public async showMenu() {\n    if (this.disabled || this.menuIsOpen) return;\n    this.menuIsOpen = true;\n    this.emit(\"sgds-show\");\n    await this.updateFloatingPosition();\n    this.emit(\"sgds-after-show\");\n\n    if (this.myDropdown.value && this.menuRef.value) {\n      this._cleanupAutoUpdate = autoUpdate(this.myDropdown.value, this.menuRef.value, () =>\n        this.updateFloatingPosition()\n      );\n    }\n  }\n\n  /** When invoked, hides the dropdown menu */\n  public async hideMenu(isOutside?: boolean) {\n    if (!this.menuIsOpen) return;\n    this.emit(\"sgds-hide\", { detail: { isOutside } });\n\n    this.menuIsOpen = false;\n    setTimeout(() => this.emit(\"sgds-after-hide\"), 0);\n\n    if (this._cleanupAutoUpdate) {\n      this._cleanupAutoUpdate();\n      this._cleanupAutoUpdate = undefined;\n    }\n  }\n\n  toggleMenu() {\n    if (this.menuIsOpen) {\n      this.hideMenu();\n    } else {\n      this.showMenu();\n    }\n  }\n\n  protected _handleKeyboardMenuEvent = (e: KeyboardEvent) => {\n    if (this.readonly) return;\n    switch (e.key) {\n      case ARROW_DOWN:\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) this.showMenu();\n        break;\n      case ESC:\n        this.hideMenu();\n        break;\n      default:\n        break;\n    }\n  };\n\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    if (!this.menuIsOpen) return;\n    if (!e.composedPath().includes(this)) {\n      this.hideMenu(true);\n    }\n  };\n\n  protected mergeMiddleware(defaults: Middleware[], custom: Middleware[]): Middleware[] {\n    const getType = (mw: Middleware) => mw?.name || mw?.constructor?.name;\n    const customTypes = custom.map(getType);\n\n    const merged = defaults\n      .map(def => {\n        const type = getType(def);\n        const customIdx = customTypes.indexOf(type);\n        return customIdx !== -1 ? custom[customIdx] : def;\n      })\n\n      .concat(custom.filter(c => !defaults.some(def => getType(def) === getType(c))));\n    return merged;\n  }\n\n  protected async updateFloatingPosition() {\n    if (!this.myDropdown.value || !this.menuRef.value) return;\n\n    let placement: Placement = \"bottom-start\";\n    switch (this.drop) {\n      case \"up\":\n        placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n        break;\n      case \"right\":\n        placement = \"right-start\";\n        break;\n      case \"left\":\n        placement = \"left-start\";\n        break;\n      case \"down\":\n        placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n        break;\n      default:\n        placement = \"bottom-start\";\n        break;\n    }\n\n    const defaultMiddleware = [offset(8), !this.noFlip ? flip() : undefined, shift()].filter(Boolean);\n\n    let middleware = defaultMiddleware;\n    if (Array.isArray(this.floatingOpts.middleware) && this.floatingOpts.middleware.length > 0) {\n      middleware = this.mergeMiddleware(defaultMiddleware, this.floatingOpts.middleware.filter(Boolean));\n    }\n\n    const opts = {\n      strategy: \"fixed\" as Strategy,\n      placement,\n      ...this.floatingOpts,\n      middleware\n    };\n\n    const {\n      x,\n      y,\n      strategy,\n      placement: computedPlacement\n    } = await computePosition(this.myDropdown.value, this.menuRef.value, opts);\n\n    this.menuRef.value.setAttribute(\"data-placement\", computedPlacement);\n\n    Object.assign(this.menuRef.value.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`\n    });\n  }\n}\n"],"names":["generateId"],"mappings":";;;;;;;;AAOA,MAAM,UAAU,GAAG,WAAW,CAAC;AAC/B,MAAM,QAAQ,GAAG,SAAS,CAAC;AAC3B,MAAM,GAAG,GAAG,QAAQ,CAAC;AAIrB;;;;;AAKG;AAEG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;;;QAIY,IAAU,CAAA,UAAA,GAAqB,SAAS,EAAE,CAAC;;AAG3C,QAAA,IAAA,CAAA,cAAc,GAAWA,KAAU,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;;QAI5D,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;;QAIvB,IAAI,CAAA,IAAA,GAAkB,MAAM,CAAC;;QAIvC,IAAY,CAAA,YAAA,GAA8D,EAAE,CAAC;;QAI7E,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAGT,IAAK,CAAA,KAAA,GAAqC,SAAS,CAAC;;QAI9D,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAG2B,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAKnD,IAAO,CAAA,OAAA,GAAqB,SAAS,EAAE,CAAC;AAkExC,QAAA,IAAA,CAAA,wBAAwB,GAAG,CAAC,CAAgB,KAAI;YACxD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;AAC1B,YAAA,QAAQ,CAAC,CAAC,GAAG;AACX,gBAAA,KAAK,UAAU,CAAC;AAChB,gBAAA,KAAK,QAAQ;oBACX,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,IAAI,CAAC,UAAU;wBAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACtC,MAAM;AACR,gBAAA,KAAK,GAAG;oBACN,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAChB,MAAM;aAGT;AACH,SAAC,CAAC;AAEM,QAAA,IAAA,CAAA,wBAAwB,GAAG,CAAC,CAAa,KAAI;YACnD,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAC7B,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACpC,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;aACrB;AACH,SAAC,CAAC;KAoEH;IAzJC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAE1B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YAC3B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;SACnE;QACD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;KACjE;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;QACrE,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;AACnE,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;SACrC;KACF;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;AAEtC,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;;AAGM,IAAA,MAAM,QAAQ,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU;YAAE,OAAO;AAC7C,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;AACvB,QAAA,MAAM,IAAI,CAAC,sBAAsB,EAAE,CAAC;AACpC,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;AAE7B,QAAA,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YAC/C,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAC9E,IAAI,CAAC,sBAAsB,EAAE,CAC9B,CAAC;SACH;KACF;;IAGM,MAAM,QAAQ,CAAC,SAAmB,EAAA;QACvC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;AAElD,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;AACxB,QAAA,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC;AAElD,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;SACrC;KACF;IAED,UAAU,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;aAAM;YACL,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAyBS,eAAe,CAAC,QAAsB,EAAE,MAAoB,EAAA;AACpE,QAAA,MAAM,OAAO,GAAG,CAAC,EAAc,KAAK,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAA,EAAE,KAAF,IAAA,IAAA,EAAE,uBAAF,EAAE,CAAE,IAAI,MAAI,CAAA,EAAA,GAAA,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAE,CAAE,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,CAAA,CAAA,EAAA,CAAC;QACtE,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAExC,MAAM,MAAM,GAAG,QAAQ;aACpB,GAAG,CAAC,GAAG,IAAG;AACT,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;YAC1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAC5C,YAAA,OAAO,SAAS,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC;AACpD,SAAC,CAAC;AAED,aAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClF,QAAA,OAAO,MAAM,CAAC;KACf;AAES,IAAA,MAAM,sBAAsB,GAAA;AACpC,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;YAAE,OAAO;QAE1D,IAAI,SAAS,GAAc,cAAc,CAAC;AAC1C,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,IAAI;AACP,gBAAA,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,WAAW,CAAC;gBAC1D,MAAM;AACR,YAAA,KAAK,OAAO;gBACV,SAAS,GAAG,aAAa,CAAC;gBAC1B,MAAM;AACR,YAAA,KAAK,MAAM;gBACT,SAAS,GAAG,YAAY,CAAC;gBACzB,MAAM;AACR,YAAA,KAAK,MAAM;AACT,gBAAA,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,YAAY,GAAG,cAAc,CAAC;gBAChE,MAAM;AACR,YAAA;gBACE,SAAS,GAAG,cAAc,CAAC;gBAC3B,MAAM;SACT;AAED,QAAA,MAAM,iBAAiB,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAElG,IAAI,UAAU,GAAG,iBAAiB,CAAC;QACnC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1F,YAAA,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;SACpG;AAED,QAAA,MAAM,IAAI,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACR,QAAQ,EAAE,OAAmB,EAC7B,SAAS,EACN,EAAA,IAAI,CAAC,YAAY,CACpB,EAAA,EAAA,UAAU,GACX,CAAC;AAEF,QAAA,MAAM,EACJ,CAAC,EACD,CAAC,EACD,QAAQ,EACR,SAAS,EAAE,iBAAiB,EAC7B,GAAG,MAAM,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAE3E,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;QAErE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE;AACtC,YAAA,QAAQ,EAAE,QAAQ;YAClB,IAAI,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;YACd,GAAG,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;AACd,SAAA,CAAC,CAAC;KACJ;AACF,CAAA;AA1LW,UAAA,CAAA;IADT,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAChB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;AADT,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AACvB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIvB,UAAA,CAAA;AADT,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAChB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIvC,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACkD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI7E,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACxB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOnB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG2B,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Checkbox/checkbox.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}`;
+var css_248z = lit.css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}.form-check{margin:var(--sgds-form-padding-inline-sm) 0;padding:0}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=checkbox.cjs.js.map

package/react/components/Checkbox/checkbox.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}`;
+var css_248z = css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}.form-check{margin:var(--sgds-form-padding-inline-sm) 0;padding:0}`;
 
 export { css_248z as default };
 //# sourceMappingURL=checkbox.js.map

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

@@ -148,7 +148,7 @@ class SgdsCheckbox extends validatorMixin.SgdsFormValidatorMixin(formControlElem
           @change=${(e) => this._handleChange(e)}
           @keydown=${this._handleKeyDown}
           @invalid=${(e) => this._handleInvalid(e)}
-          .checked=${live_js.live(this.checked)}
+          ?checked=${live_js.live(this.checked)}
           .disabled=${this.disabled}
           .required=${this.required}
           @blur=${this._handleBlur}

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

@@ -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":"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"}
+{"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":"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"}

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

@@ -144,7 +144,7 @@ class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
           @change=${(e) => this._handleChange(e)}
           @keydown=${this._handleKeyDown}
           @invalid=${(e) => this._handleInvalid(e)}
-          .checked=${live(this.checked)}
+          ?checked=${live(this.checked)}
           .disabled=${this.disabled}
           .required=${this.required}
           @blur=${this._handleBlur}

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

@@ -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":"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"}
+{"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":"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"}

package/react/components/ComboBox/sgds-combo-box-option.cjs.js

@@ -26,12 +26,12 @@ class SgdsComboBoxOption extends optionElement.OptionElement {
         this._renderItemContent = () => {
             return this.checkbox
                 ? lit.html `
-          <sgds-checkbox ?checked=${this.active} .disabled=${this.disabled} @sgds-change=${this._handleCheckboxChange}>
+          <sgds-checkbox .checked=${this.active} .disabled=${this.disabled}>
             <slot></slot>
           </sgds-checkbox>
         `
                 : lit.html `
-          <div class="normal-item-content" @click=${this._handleNonCheckboxClick}>
+          <div class="normal-item-content">
             <slot></slot>
             ${this.active ? lit.html ` <sgds-icon name="check"></sgds-icon> ` : lit.nothing}
           </div>
@@ -40,11 +40,6 @@ class SgdsComboBoxOption extends optionElement.OptionElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("keydown", (e) => {
-            if (e.key === "Enter") {
-                this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();
-            }
-        });
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
@@ -53,19 +48,6 @@ class SgdsComboBoxOption extends optionElement.OptionElement {
             this.checkbox = true;
         }
     }
-    _handleNonCheckboxClick() {
-        if (!this.checkbox) {
-            this.emit("i-sgds-select");
-        }
-    }
-    _handleCheckboxClick() {
-        this.shadowRoot.querySelector("sgds-checkbox").click();
-    }
-    _handleCheckboxChange(e) {
-        const checkbox = e.target;
-        this.active = checkbox.checked;
-        this.active ? this.emit("i-sgds-select") : this.emit("i-sgds-unselect");
-    }
 }
 /** @internal */
 SgdsComboBoxOption.dependencies = {

package/react/components/ComboBox/sgds-combo-box-option.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-combo-box-option.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary ComboBoxOption is the option of the Combobox\n *\n * @slot default - The label of the option\n */\nexport class SgdsComboBoxOption extends OptionElement {\n  /** @internal */\n  static override dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-checkbox\": SgdsCheckbox\n  };\n\n  /**\n   * @internal If true, this item is rendered as a checkbox item.\n   * This property is controlled by its combo box parent\n   */\n  @property({ type: Boolean, reflect: true }) checkbox = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();\n      }\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    const parent = this.closest(\"sgds-combo-box\");\n    if (parent?.multiSelect) {\n      this.checkbox = true;\n    }\n  }\n  private _handleNonCheckboxClick() {\n    if (!this.checkbox) {\n      this.emit(\"i-sgds-select\");\n    }\n  }\n  private _handleCheckboxClick() {\n    this.shadowRoot.querySelector(\"sgds-checkbox\").click();\n  }\n\n  private _handleCheckboxChange(e: Event) {\n    const checkbox = e.target as HTMLInputElement;\n    this.active = checkbox.checked;\n    this.active ? this.emit(\"i-sgds-select\") : this.emit(\"i-sgds-unselect\");\n  }\n\n  protected _renderItemContent = () => {\n    return this.checkbox\n      ? html`\n          <sgds-checkbox ?checked=${this.active} .disabled=${this.disabled} @sgds-change=${this._handleCheckboxChange}>\n            <slot></slot>\n          </sgds-checkbox>\n        `\n      : html`\n          <div class=\"normal-item-content\" @click=${this._handleNonCheckboxClick}>\n            <slot></slot>\n            ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n          </div>\n        `;\n  };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":["OptionElement","html","nothing","SgdsIcon","SgdsCheckbox","__decorate","property"],"mappings":";;;;;;;;;;;;AAMA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQA,2BAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAkCnD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChBC,QAAI,CAAA,CAAA;oCACwB,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,cAAA,EAAiB,IAAI,CAAC,qBAAqB,CAAA;;;AAG5G,QAAA,CAAA;kBACDA,QAAI,CAAA,CAAA;AACwC,kDAAA,EAAA,IAAI,CAAC,uBAAuB,CAAA;;cAElE,IAAI,CAAC,MAAM,GAAGA,QAAI,CAAA,CAAwC,sCAAA,CAAA,GAAGC,WAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IA9CC,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;AACrB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;aAC9E;AACH,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;IACO,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC5B;KACF;IACO,oBAAoB,GAAA;QAC1B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;KACxD;AAEO,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AACpC,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;AAC9C,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACzE;;AA1CD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAEC,iBAAQ;AACrB,IAAA,eAAe,EAAEC,yBAAY;AAC9B,CAH2B,CAG1B;AAM0CC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-combo-box-option.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary ComboBoxOption is the option of the Combobox\n *\n * @slot default - The label of the option\n */\nexport class SgdsComboBoxOption extends OptionElement {\n  /** @internal */\n  static override dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-checkbox\": SgdsCheckbox\n  };\n\n  /**\n   * @internal If true, this item is rendered as a checkbox item.\n   * This property is controlled by its combo box parent\n   */\n  @property({ type: Boolean, reflect: true }) checkbox = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    const parent = this.closest(\"sgds-combo-box\");\n    if (parent?.multiSelect) {\n      this.checkbox = true;\n    }\n  }\n\n  protected _renderItemContent = () => {\n    return this.checkbox\n      ? html`\n          <sgds-checkbox .checked=${this.active} .disabled=${this.disabled}>\n            <slot></slot>\n          </sgds-checkbox>\n        `\n      : html`\n          <div class=\"normal-item-content\">\n            <slot></slot>\n            ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n          </div>\n        `;\n  };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":["OptionElement","html","nothing","SgdsIcon","SgdsCheckbox","__decorate","property"],"mappings":";;;;;;;;;;;;AAMA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQA,2BAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAenD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChBC,QAAI,CAAA,CAAA;AACwB,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;AAGjE,QAAA,CAAA;kBACDA,QAAI,CAAA,CAAA;;;cAGE,IAAI,CAAC,MAAM,GAAGA,QAAI,CAAA,CAAwC,sCAAA,CAAA,GAAGC,WAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IA3BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;KAC3B;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;;AAvBD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAEC,iBAAQ;AACrB,IAAA,eAAe,EAAEC,yBAAY;AAC9B,CAH2B,CAG1B;AAM0CC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/ComboBox/sgds-combo-box-option.js

@@ -22,12 +22,12 @@ class SgdsComboBoxOption extends OptionElement {
         this._renderItemContent = () => {
             return this.checkbox
                 ? html `
-          <sgds-checkbox ?checked=${this.active} .disabled=${this.disabled} @sgds-change=${this._handleCheckboxChange}>
+          <sgds-checkbox .checked=${this.active} .disabled=${this.disabled}>
             <slot></slot>
           </sgds-checkbox>
         `
                 : html `
-          <div class="normal-item-content" @click=${this._handleNonCheckboxClick}>
+          <div class="normal-item-content">
             <slot></slot>
             ${this.active ? html ` <sgds-icon name="check"></sgds-icon> ` : nothing}
           </div>
@@ -36,11 +36,6 @@ class SgdsComboBoxOption extends OptionElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("keydown", (e) => {
-            if (e.key === "Enter") {
-                this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();
-            }
-        });
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
@@ -49,19 +44,6 @@ class SgdsComboBoxOption extends OptionElement {
             this.checkbox = true;
         }
     }
-    _handleNonCheckboxClick() {
-        if (!this.checkbox) {
-            this.emit("i-sgds-select");
-        }
-    }
-    _handleCheckboxClick() {
-        this.shadowRoot.querySelector("sgds-checkbox").click();
-    }
-    _handleCheckboxChange(e) {
-        const checkbox = e.target;
-        this.active = checkbox.checked;
-        this.active ? this.emit("i-sgds-select") : this.emit("i-sgds-unselect");
-    }
 }
 /** @internal */
 SgdsComboBoxOption.dependencies = {

package/react/components/ComboBox/sgds-combo-box-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-combo-box-option.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary ComboBoxOption is the option of the Combobox\n *\n * @slot default - The label of the option\n */\nexport class SgdsComboBoxOption extends OptionElement {\n  /** @internal */\n  static override dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-checkbox\": SgdsCheckbox\n  };\n\n  /**\n   * @internal If true, this item is rendered as a checkbox item.\n   * This property is controlled by its combo box parent\n   */\n  @property({ type: Boolean, reflect: true }) checkbox = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();\n      }\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    const parent = this.closest(\"sgds-combo-box\");\n    if (parent?.multiSelect) {\n      this.checkbox = true;\n    }\n  }\n  private _handleNonCheckboxClick() {\n    if (!this.checkbox) {\n      this.emit(\"i-sgds-select\");\n    }\n  }\n  private _handleCheckboxClick() {\n    this.shadowRoot.querySelector(\"sgds-checkbox\").click();\n  }\n\n  private _handleCheckboxChange(e: Event) {\n    const checkbox = e.target as HTMLInputElement;\n    this.active = checkbox.checked;\n    this.active ? this.emit(\"i-sgds-select\") : this.emit(\"i-sgds-unselect\");\n  }\n\n  protected _renderItemContent = () => {\n    return this.checkbox\n      ? html`\n          <sgds-checkbox ?checked=${this.active} .disabled=${this.disabled} @sgds-change=${this._handleCheckboxChange}>\n            <slot></slot>\n          </sgds-checkbox>\n        `\n      : html`\n          <div class=\"normal-item-content\" @click=${this._handleNonCheckboxClick}>\n            <slot></slot>\n            ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n          </div>\n        `;\n  };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":[],"mappings":";;;;;;;;AAMA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQ,aAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAkCnD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAA,CAAA;oCACwB,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,cAAA,EAAiB,IAAI,CAAC,qBAAqB,CAAA;;;AAG5G,QAAA,CAAA;kBACD,IAAI,CAAA,CAAA;AACwC,kDAAA,EAAA,IAAI,CAAC,uBAAuB,CAAA;;cAElE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAwC,sCAAA,CAAA,GAAG,OAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IA9CC,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;AACrB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;aAC9E;AACH,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;IACO,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC5B;KACF;IACO,oBAAoB,GAAA;QAC1B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;KACxD;AAEO,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AACpC,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;AAC9C,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACzE;;AA1CD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAE,QAAQ;AACrB,IAAA,eAAe,EAAE,YAAY;AAC9B,CAH2B,CAG1B;AAM0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-combo-box-option.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary ComboBoxOption is the option of the Combobox\n *\n * @slot default - The label of the option\n */\nexport class SgdsComboBoxOption extends OptionElement {\n  /** @internal */\n  static override dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-checkbox\": SgdsCheckbox\n  };\n\n  /**\n   * @internal If true, this item is rendered as a checkbox item.\n   * This property is controlled by its combo box parent\n   */\n  @property({ type: Boolean, reflect: true }) checkbox = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    const parent = this.closest(\"sgds-combo-box\");\n    if (parent?.multiSelect) {\n      this.checkbox = true;\n    }\n  }\n\n  protected _renderItemContent = () => {\n    return this.checkbox\n      ? html`\n          <sgds-checkbox .checked=${this.active} .disabled=${this.disabled}>\n            <slot></slot>\n          </sgds-checkbox>\n        `\n      : html`\n          <div class=\"normal-item-content\">\n            <slot></slot>\n            ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n          </div>\n        `;\n  };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":[],"mappings":";;;;;;;;AAMA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQ,aAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAenD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAA,CAAA;AACwB,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;AAGjE,QAAA,CAAA;kBACD,IAAI,CAAA,CAAA;;;cAGE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAwC,sCAAA,CAAA,GAAG,OAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IA3BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;KAC3B;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;;AAvBD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAE,QAAQ;AACrB,IAAA,eAAe,EAAE,YAAY;AAC9B,CAH2B,CAG1B;AAM0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}