@nysds/nys-toggle 1.12.0 → 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nys-toggle.js +8 -2
- package/dist/nys-toggle.js.map +1 -1
- package/package.json +2 -2
package/dist/nys-toggle.js
CHANGED
|
@@ -17,12 +17,18 @@ const i = class i extends h {
|
|
|
17
17
|
connectedCallback() {
|
|
18
18
|
super.connectedCallback(), this.id || (this.id = `nys-toggle-${Date.now()}-${p++}`);
|
|
19
19
|
}
|
|
20
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Form Integration
|
|
22
|
+
* --------------------------------------------------------------------------
|
|
23
|
+
*/
|
|
21
24
|
// Update the internals whenever `checked` or `value` changes.
|
|
22
25
|
updated(o) {
|
|
23
26
|
(o.has("checked") || o.has("value")) && this._internals.setFormValue(this.checked ? this.value : null);
|
|
24
27
|
}
|
|
25
|
-
|
|
28
|
+
/**
|
|
29
|
+
* Event Handlers
|
|
30
|
+
* --------------------------------------------------------------------------
|
|
31
|
+
*/
|
|
26
32
|
_emitChangeEvent() {
|
|
27
33
|
this.dispatchEvent(
|
|
28
34
|
new CustomEvent("nys-change", {
|
package/dist/nys-toggle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-toggle.js","sources":["../src/nys-toggle.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-toggle.scss?inline\";\n\nlet toggleIdCounter = 0
|
|
1
|
+
{"version":3,"file":"nys-toggle.js","sources":["../src/nys-toggle.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-toggle.scss?inline\";\n\nlet toggleIdCounter = 0;\n\n/**\n * `<nys-toggle>` is a form-associated toggle switch with label, description,\n * size variants, inverted styles, and optional icons. Supports keyboard\n * interaction and integrates with forms via ElementInternals.\n *\n * @slot description - Optional slot to provide additional description below the label.\n *\n * @fires nys-change - Fired when toggle changes state. Detail: `{ id, checked }`.\n * @fires nys-focus - Fired when toggle receives focus.\n * @fires nys-blur - Fired when toggle loses focus.\n */\n\nexport class NysToggle extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\";\n @property({ type: String }) value = \"\";\n @property({ type: String }) label = \"\";\n @property({ type: String }) description = \"\";\n @property({ type: String, reflect: true }) form: string | null = null;\n @property({ type: Boolean, reflect: true }) checked = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean }) noIcon = false;\n @property({ type: Boolean, reflect: true }) inverted = false;\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n private _internals: ElementInternals;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-toggle-${Date.now()}-${toggleIdCounter++}`;\n }\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n // Update the internals whenever `checked` or `value` changes.\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has(\"checked\") || changedProperties.has(\"value\")) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _emitChangeEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-change\", {\n detail: { id: this.id, checked: this.checked },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // Handle focus event\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n // Handle blur event\n private _handleBlur() {\n this.dispatchEvent(new Event(\"nys-blur\"));\n }\n\n private _handleChange(e: Event) {\n const { checked } = e.target as HTMLInputElement;\n this.checked = checked;\n this._emitChangeEvent();\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (!this.disabled && (event.key === \" \" || event.key === \"Enter\")) {\n event.preventDefault();\n\n // Manually toggle the checked state\n this.checked = !this.checked;\n\n this._emitChangeEvent();\n }\n }\n\n render() {\n return html`\n <label class=\"nys-toggle\">\n <div class=\"nys-toggle__content\">\n <div class=\"nys-toggle__toggle\">\n <input\n type=\"checkbox\"\n name=\"${ifDefined(this.name ? this.name : undefined)}\"\n .value=${this.value}\n form=${ifDefined(this.form || undefined)}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n role=\"switch\"\n aria-checked=\"${this.checked ? \"true\" : \"false\"}\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n @change=${this._handleChange}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n @keydown=${this._handleKeyDown}\n />\n <span class=\"slider\">\n <div class=\"knob\">\n ${this.noIcon\n ? \"\"\n : html`<nys-icon\n class=\"toggle-icon\"\n name=\"${this.checked ? \"check\" : \"close\"}\"\n size=\"2xl\"\n ></nys-icon>`}\n </div>\n </span>\n </div>\n <div class=\"nys-toggle__text ${this.inverted ? \"invert\" : \"\"}\">\n <div class=\"nys-toggle__label\">${this.label}</div>\n <slot name=\"description\">${this.description}</slot>\n </div>\n </div>\n </label>\n `;\n }\n}\n\nif (!customElements.get(\"nys-toggle\")) {\n customElements.define(\"nys-toggle\", NysToggle);\n}\n"],"names":["toggleIdCounter","_NysToggle","LitElement","changedProperties","e","checked","event","html","ifDefined","unsafeCSS","styles","NysToggle","__decorateClass","property"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-toggle",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0",
|
|
4
4
|
"description": "The Toggle component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-toggle.js",
|
|
6
6
|
"exports": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"lit-analyze": "lit-analyzer '**/*.ts'"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@nysds/nys-icon": "^1.
|
|
25
|
+
"@nysds/nys-icon": "^1.13.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"lit": "^3.3.1",
|