@govtechsg/sgds-web-component 3.0.0-rc.0 → 3.0.0-rc.2

package/components/Switch/sgds-switch.js

@@ -2,7 +2,6 @@ import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { property, query, queryAssignedNodes } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { FormCheckElement } from '../../base/form-check-element.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
 import genId from '../../utils/generateId.js';
@@ -90,7 +89,7 @@ class SgdsSwitch extends SgdsElement {
     `;
     }
 }
-SgdsSwitch.styles = [...FormCheckElement.styles, css_248z, css_248z$1];
+SgdsSwitch.styles = [...SgdsElement.styles, css_248z, css_248z$1];
 __decorate([
     property({ reflect: true, type: String })
 ], SgdsSwitch.prototype, "size", void 0);

package/components/Switch/sgds-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-switch.js","sources":["../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport FormCheckElement from \"../../base/form-check-element\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\n\n/**\n * @summary Switch component is used to toggle on and off or yes or no action.\n *\n * @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsSwitch extends SgdsElement {\n  static styles = [...FormCheckElement.styles, formLabelStyles, switchStyle];\n\n  /** The size of the switch. By default, it is small size */\n  @property({ reflect: true, type: String }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** When enabled, icon appears in the switch */\n  @property({ reflect: true, type: Boolean }) icon = false;\n\n  /**@internal */\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  /** Draws the switch in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Disables the switch (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** @internal 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  /** Simulates a click on the switch. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the switch. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange() {\n    this.checked = !this.checked;\n    this.emit(\"sgds-change\", { detail: { checked: this.checked } });\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  /** @internal For Id/For pair of the HTML form control and label. */\n  private _inputId = genId(\"switch\");\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.input.disabled = this.disabled;\n  }\n  @queryAssignedNodes({ slot: \"leftLabel\", flatten: true })\n  private _leftIconNodes!: Array<Node>;\n\n  firstUpdated() {\n    if (this._leftIconNodes.length === 0) {\n      return this.shadowRoot.querySelector(\".form-check-label.left-label\")?.classList.add(\"d-none\");\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <label for=\"${this._inputId}\" class=\"form-check-label left-label\"><slot name=\"leftLabel\"></slot></label>\n        <input\n          class=${classMap({\n            \"form-check-input\": true\n          })}\n          type=\"checkbox\"\n          id=${this._inputId}\n          ?checked=${this.checked}\n          ?disabled=${this.disabled}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${this._handleChange}\n          @keydown=${this._handleKeyDown}\n        />\n        <label for=\"${this._inputId}\" class=\"form-check-label\"><slot></slot></label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSwitch;\n"],"names":["formLabelStyles","switchStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-switch.js","sources":["../../../src/components/Switch/sgds-switch.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport switchStyle from \"./switch.css\";\n\n/**\n * @summary Switch component is used to toggle on and off or yes or no action.\n *\n * @slot default - The default label of switch on the right side of the switch\n * @slot leftLabel - The label on the left side of the switch\n *\n * @event sgds-change - Emitted when the checked state changes.\n *\n */\nexport class SgdsSwitch extends SgdsElement {\n  static styles = [...SgdsElement.styles, formLabelStyles, switchStyle];\n\n  /** The size of the switch. By default, it is small size */\n  @property({ reflect: true, type: String }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** When enabled, icon appears in the switch */\n  @property({ reflect: true, type: Boolean }) icon = false;\n\n  /**@internal */\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  /** Draws the switch in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Disables the switch (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** @internal 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  /** Simulates a click on the switch. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the switch. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange() {\n    this.checked = !this.checked;\n    this.emit(\"sgds-change\", { detail: { checked: this.checked } });\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  /** @internal For Id/For pair of the HTML form control and label. */\n  private _inputId = genId(\"switch\");\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.input.disabled = this.disabled;\n  }\n  @queryAssignedNodes({ slot: \"leftLabel\", flatten: true })\n  private _leftIconNodes!: Array<Node>;\n\n  firstUpdated() {\n    if (this._leftIconNodes.length === 0) {\n      return this.shadowRoot.querySelector(\".form-check-label.left-label\")?.classList.add(\"d-none\");\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <label for=\"${this._inputId}\" class=\"form-check-label left-label\"><slot name=\"leftLabel\"></slot></label>\n        <input\n          class=${classMap({\n            \"form-check-input\": true\n          })}\n          type=\"checkbox\"\n          id=${this._inputId}\n          ?checked=${this.checked}\n          ?disabled=${this.disabled}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${this._handleChange}\n          @keydown=${this._handleKeyDown}\n        />\n        <label for=\"${this._inputId}\" class=\"form-check-label\"><slot></slot></label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSwitch;\n"],"names":["formLabelStyles","switchStyle"],"mappings":"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"}