@nysds/nys-toggle 1.11.4 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,37 +1,28 @@
1
- import { LitElement as y, unsafeCSS as v, html as d } from "lit";
1
+ import { LitElement as h, unsafeCSS as y, html as c } from "lit";
2
2
  import { property as t } from "lit/decorators.js";
3
- import { ifDefined as h } from "lit/directives/if-defined.js";
4
- const u = ':host{--_nys-toggle-width: var(--nys-font-size-8xl, 44px);--_nys-toggle-height: var(--nys-size-300, 24px);--_nys-toggle-border-radius: var(--nys-radius-round, 1776px);--_nys-toggle-border-width: var(--nys-border-width-md, 2px);--_nys-toggle-size--knob: var(--nys-font-size-lg, 18px);--_nys-toggle-margin--knob: calc( (var(--_nys-toggle-height) - var(--_nys-toggle-size--knob)) / 2 );--_nys-toggle-transform--translateX: calc( var(--_nys-toggle-width) - var(--_nys-toggle-size--knob) - var( --_nys-toggle-margin--knob ) - 2px );--_nys-toggle-gap: var(--nys-space-150, 12px);--_nys-toggle-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-toggle-font-size: var(--nys-font-size-ui-md, 16px);--_nys-toggle-font-weight: var(--nys-font-weight-regular, 400);--_nys-toggle-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-toggle-transition-duration: .3s;--_nys-toggle-outline-color: var(--nys-color-focus, #004dd1);--_nys-toggle-outline-width: var(--nys-border-width-md, 2px);--_nys-toggle-background-color: var(--nys-color-neutral-500, #797c7f);--_nys-toggle-background-color--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-toggle-background-color--checked: var(--nys-color-theme, #154973);--_nys-toggle-background-color--hover: var( --nys-color-neutral-600, #62666a );--_nys-toggle-background-color--active: var( --nys-color-neutral-700, #4a4d4f );--_nys-toggle-background-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-toggle-background-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-toggle-color-ink-reverse: var(--nys-color-ink-reverse, #fff);--_nys-toggle-color: var( --nys-color-text, var(--nys-color-neutral-900, #1b1b1b) );--_nys-toggle-color--disabled: var(--nys-color-neutral-500, #797c7f)}::slotted([slot^=description]){font-style:italic;margin:0}slot[name=description]{font-style:italic;text-align:left;display:flex}.nys-toggle__content{display:flex;gap:var(--_nys-toggle-gap)}.nys-toggle__text{color:var(--_nys-toggle-color);display:flex;flex-direction:column;align-items:flex-start;font-size:var(--_nys-toggle-font-size);font-family:var(--_nys-toggle-font-family);font-weight:var(--_nys-toggle-font-weight);line-height:var(--_nys-toggle-line-height)}.nys-toggle__content:has(input:disabled) .nys-toggle__text *{color:var(--_nys-toggle-color--disabled);cursor:not-allowed}.nys-toggle__toggle{position:relative;display:inline-block;width:var(--_nys-toggle-width);min-width:var(--_nys-toggle-width);max-width:var(--_nys-toggle-width);height:var(--_nys-toggle-height);min-height:var(--_nys-toggle-height);max-height:var(--_nys-toggle-height)}.nys-toggle__toggle input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;border-radius:var(--_nys-toggle-border-radius);outline-offset:var(--_nys-toggle-border-width);width:var(--_nys-toggle-width);inset:0;background-color:var(--_nys-toggle-background-color);display:flex;align-items:center}.knob{content:"";height:var(--_nys-toggle-size--knob);width:var(--_nys-toggle-size--knob);margin:var(--_nys-toggle-margin--knob);border-radius:var(--nys-radius-round, 1776px);background-color:var(--_nys-toggle-color-ink-reverse);transition:all var(--_nys-toggle-transition-duration) cubic-bezier(.27,.2,.25,1.51);overflow:hidden;display:flex;align-items:center;justify-content:center}input:checked+.slider{background-color:var(--_nys-toggle-background-color--checked)}.slider:hover{background-color:var(--_nys-toggle-background-color--hover)}input:checked+.slider:hover{background-color:var(--_nys-toggle-background-color--checked--hover)}.slider:hover .knob .toggle-icon{color:var(--_nys-toggle-background-color--hover)}input:checked:not(:disabled)+.slider:hover .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked--hover)}input:active:not(:disabled)+.slider{background-color:var(--_nys-toggle-background-color--active);outline:solid var(--_nys-toggle-outline-width) var(--_nys-toggle-outline-color)}input:active:checked+.slider{background-color:var(--_nys-toggle-background-color--checked--active)}input:focus+.slider{outline:solid var(--_nys-toggle-outline-width) var(--_nys-toggle-outline-color)}input:checked+.slider .knob{transform:translate(var(--_nys-toggle-transform--translateX))}.toggle-icon{position:absolute;color:var(--_nys-toggle-background-color)}input:checked+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked)}input:active+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--active)}input:active:checked+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked--active)}:host([size=sm]) .toggle-icon{font-size:var(--nys-font-size-body-xs, 12px)}:host([size=md]) .toggle-icon{font-size:var(--nys-font-size-body-sm, 14px)}@supports not (font-size: 1cap){:host([size=sm]) .toggle-icon{font-size:var(--nys-font-size-body-xs, 12px)}:host([size=md]) .toggle-icon{font-size:calc(var(--nys-font-size-body-sm, 14px) - 1px)}}input:disabled+.slider,input:disabled+.slider:hover{background-color:var(--_nys-toggle-background-color--disabled);cursor:not-allowed}input:disabled+.slider .knob .toggle-icon,input:disabled:active+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--disabled)}:host([size=sm]){--_nys-toggle-width: var(--nys-size-450, 36px);--_nys-toggle-height: var(--nys-size-250, 20px);--_nys-toggle-size--knob: var(--nys-size-200, 16px);--_nys-toggle-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-toggle-width: var(--nys-size-550, 44px);--_nys-toggle-height: var(--nys-size-300, 24px);--_nys-toggle-size--knob: var(--nys-size-250, 20px)}.nys-toggle__text.invert{--_nys-toggle-color: var(--nys-color-text-reverse, #fff)}@media(prefers-reduced-motion:reduce){:host{--toggle-transition-duration: 0s}}';
5
- var p = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (c, e, i, l) => {
6
- for (var r = l > 1 ? void 0 : l ? _(e, i) : e, a = c.length - 1, g; a >= 0; a--)
7
- (g = c[a]) && (r = (l ? g(e, i, r) : g(r)) || r);
8
- return l && r && p(e, i, r), r;
3
+ import { ifDefined as d } from "lit/directives/if-defined.js";
4
+ const v = ':host{--_nys-toggle-width: var(--nys-font-size-8xl, 44px);--_nys-toggle-height: var(--nys-size-300, 24px);--_nys-toggle-border-radius: var(--nys-radius-round, 1776px);--_nys-toggle-border-width: var(--nys-border-width-md, 2px);--_nys-toggle-size--knob: var(--nys-font-size-lg, 18px);--_nys-toggle-margin--knob: calc( (var(--_nys-toggle-height) - var(--_nys-toggle-size--knob)) / 2 );--_nys-toggle-transform--translateX: calc( var(--_nys-toggle-width) - var(--_nys-toggle-size--knob) - var( --_nys-toggle-margin--knob ) - 2px );--_nys-toggle-gap: var(--nys-space-150, 12px);--_nys-toggle-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-toggle-font-size: var(--nys-font-size-ui-md, 16px);--_nys-toggle-font-weight: var(--nys-font-weight-regular, 400);--_nys-toggle-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-toggle-transition-duration: .3s;--_nys-toggle-outline-color: var(--nys-color-focus, #004dd1);--_nys-toggle-outline-width: var(--nys-border-width-md, 2px);--_nys-toggle-background-color: var(--nys-color-neutral-500, #797c7f);--_nys-toggle-background-color--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-toggle-background-color--checked: var(--nys-color-theme, #154973);--_nys-toggle-background-color--hover: var( --nys-color-neutral-600, #62666a );--_nys-toggle-background-color--active: var( --nys-color-neutral-700, #4a4d4f );--_nys-toggle-background-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-toggle-background-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-toggle-color-ink-reverse: var(--nys-color-ink-reverse, #fff);--_nys-toggle-color: var( --nys-color-text, var(--nys-color-neutral-900, #1b1b1b) );--_nys-toggle-color--disabled: var(--nys-color-neutral-500, #797c7f)}::slotted([slot^=description]){font-style:italic;margin:0}slot[name=description]{font-style:italic;text-align:left;display:flex}.nys-toggle__content{display:flex;gap:var(--_nys-toggle-gap)}.nys-toggle__text{color:var(--_nys-toggle-color);display:flex;flex-direction:column;align-items:flex-start;font-size:var(--_nys-toggle-font-size);font-family:var(--_nys-toggle-font-family);font-weight:var(--_nys-toggle-font-weight);line-height:var(--_nys-toggle-line-height)}.nys-toggle__content:has(input:disabled) .nys-toggle__text *{color:var(--_nys-toggle-color--disabled);cursor:not-allowed}.nys-toggle__toggle{position:relative;display:inline-block;width:var(--_nys-toggle-width);min-width:var(--_nys-toggle-width);max-width:var(--_nys-toggle-width);height:var(--_nys-toggle-height);min-height:var(--_nys-toggle-height);max-height:var(--_nys-toggle-height)}.nys-toggle__toggle input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;border-radius:var(--_nys-toggle-border-radius);outline-offset:var(--_nys-toggle-border-width);width:var(--_nys-toggle-width);inset:0;background-color:var(--_nys-toggle-background-color);display:flex;align-items:center}.knob{content:"";height:var(--_nys-toggle-size--knob);width:var(--_nys-toggle-size--knob);margin:var(--_nys-toggle-margin--knob);border-radius:var(--nys-radius-round, 1776px);background-color:var(--_nys-toggle-color-ink-reverse);transition:all var(--_nys-toggle-transition-duration) cubic-bezier(.27,.2,.25,1.51);overflow:hidden;display:flex;align-items:center;justify-content:center}input:checked+.slider{background-color:var(--_nys-toggle-background-color--checked)}.slider:hover{background-color:var(--_nys-toggle-background-color--hover)}input:checked+.slider:hover{background-color:var(--_nys-toggle-background-color--checked--hover)}.slider:hover .knob .toggle-icon{color:var(--_nys-toggle-background-color--hover)}input:checked:not(:disabled)+.slider:hover .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked--hover)}input:active:not(:disabled)+.slider{background-color:var(--_nys-toggle-background-color--active);outline:solid var(--_nys-toggle-outline-width) var(--_nys-toggle-outline-color)}input:active:checked+.slider{background-color:var(--_nys-toggle-background-color--checked--active)}input:focus+.slider{outline:solid var(--_nys-toggle-outline-width) var(--_nys-toggle-outline-color)}input:checked+.slider .knob{transform:translate(var(--_nys-toggle-transform--translateX))}.toggle-icon{position:absolute;color:var(--_nys-toggle-background-color)}input:checked+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked)}input:active+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--active)}input:active:checked+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked--active)}:host([size=sm]) .toggle-icon{font-size:var(--nys-font-size-body-xs, 12px)}:host([size=md]) .toggle-icon{font-size:var(--nys-font-size-body-sm, 14px)}@supports not (font-size: 1cap){:host([size=sm]) .toggle-icon{font-size:var(--nys-font-size-body-xs, 12px)}:host([size=md]) .toggle-icon{font-size:calc(var(--nys-font-size-body-sm, 14px) - 1px)}}input:disabled+.slider,input:disabled+.slider:hover{background-color:var(--_nys-toggle-background-color--disabled);cursor:not-allowed}input:disabled+.slider .knob .toggle-icon,input:disabled:active+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--disabled)}:host([size=sm]){--_nys-toggle-width: var(--nys-size-450, 36px);--_nys-toggle-height: var(--nys-size-250, 20px);--_nys-toggle-size--knob: var(--nys-size-200, 16px);--_nys-toggle-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-toggle-width: var(--nys-size-550, 44px);--_nys-toggle-height: var(--nys-size-300, 24px);--_nys-toggle-size--knob: var(--nys-size-250, 20px)}.nys-toggle__text.invert{--_nys-toggle-color: var(--nys-color-text-reverse, #fff)}@media(prefers-reduced-motion:reduce){:host{--toggle-transition-duration: 0s}}';
5
+ var u = Object.defineProperty, n = (a, o, r, _) => {
6
+ for (var s = void 0, l = a.length - 1, g; l >= 0; l--)
7
+ (g = a[l]) && (s = g(o, r, s) || s);
8
+ return s && u(o, r, s), s;
9
9
  };
10
- let b = 0;
11
- var s;
12
- const o = (s = class extends y {
10
+ let p = 0;
11
+ const i = class i extends h {
13
12
  // allows use of elementInternals' API
14
13
  constructor() {
15
- super(), this.id = "", this.name = "", this.value = "", this.label = "", this.description = "", this.form = null, this.checked = !1, this.disabled = !1, this.noIcon = !1, this.inverted = !1, this._size = "md", this._internals = this.attachInternals();
16
- }
17
- get size() {
18
- return this._size;
19
- }
20
- set size(e) {
21
- this._size = s.VALID_SIZES.includes(
22
- e
23
- ) ? e : "md";
14
+ super(), this.id = "", this.name = "", this.value = "", this.label = "", this.description = "", this.form = null, this.checked = !1, this.disabled = !1, this.noIcon = !1, this.inverted = !1, this.size = "md", this._internals = this.attachInternals();
24
15
  }
25
16
  // Generate a unique ID if one is not provided
26
17
  connectedCallback() {
27
- super.connectedCallback(), this.id || (this.id = `nys-toggle-${Date.now()}-${b++}`);
18
+ super.connectedCallback(), this.id || (this.id = `nys-toggle-${Date.now()}-${p++}`);
28
19
  }
29
- /********************** Form Integration **********************/
20
+ // Form Integration
30
21
  // Update the internals whenever `checked` or `value` changes.
31
- updated(e) {
32
- (e.has("checked") || e.has("value")) && this._internals.setFormValue(this.checked ? this.value : null);
22
+ updated(o) {
23
+ (o.has("checked") || o.has("value")) && this._internals.setFormValue(this.checked ? this.value : null);
33
24
  }
34
- /********************** Event Handlers **********************/
25
+ //Event Handlers
35
26
  _emitChangeEvent() {
36
27
  this.dispatchEvent(
37
28
  new CustomEvent("nys-change", {
@@ -49,23 +40,23 @@ const o = (s = class extends y {
49
40
  _handleBlur() {
50
41
  this.dispatchEvent(new Event("nys-blur"));
51
42
  }
52
- _handleChange(e) {
53
- const { checked: i } = e.target;
54
- this.checked = i, this._emitChangeEvent();
43
+ _handleChange(o) {
44
+ const { checked: r } = o.target;
45
+ this.checked = r, this._emitChangeEvent();
55
46
  }
56
- _handleKeyDown(e) {
57
- !this.disabled && (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.checked = !this.checked, this._emitChangeEvent());
47
+ _handleKeyDown(o) {
48
+ !this.disabled && (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.checked = !this.checked, this._emitChangeEvent());
58
49
  }
59
50
  render() {
60
- return d`
51
+ return c`
61
52
  <label class="nys-toggle">
62
53
  <div class="nys-toggle__content">
63
54
  <div class="nys-toggle__toggle">
64
55
  <input
65
56
  type="checkbox"
66
- name="${h(this.name ? this.name : void 0)}"
57
+ name="${d(this.name ? this.name : void 0)}"
67
58
  .value=${this.value}
68
- form=${h(this.form || void 0)}
59
+ form=${d(this.form || void 0)}
69
60
  .checked=${this.checked}
70
61
  ?disabled=${this.disabled}
71
62
  role="switch"
@@ -78,7 +69,7 @@ const o = (s = class extends y {
78
69
  />
79
70
  <span class="slider">
80
71
  <div class="knob">
81
- ${this.noIcon ? "" : d`<nys-icon
72
+ ${this.noIcon ? "" : c`<nys-icon
82
73
  class="toggle-icon"
83
74
  name="${this.checked ? "check" : "close"}"
84
75
  size="2xl"
@@ -94,43 +85,44 @@ const o = (s = class extends y {
94
85
  </label>
95
86
  `;
96
87
  }
97
- }, s.styles = v(u), s.VALID_SIZES = ["sm", "md"], s.formAssociated = !0, s);
88
+ };
89
+ i.styles = y(v), i.formAssociated = !0;
90
+ let e = i;
98
91
  n([
99
92
  t({ type: String, reflect: !0 })
100
- ], o.prototype, "id", 2);
93
+ ], e.prototype, "id");
101
94
  n([
102
95
  t({ type: String, reflect: !0 })
103
- ], o.prototype, "name", 2);
96
+ ], e.prototype, "name");
104
97
  n([
105
98
  t({ type: String })
106
- ], o.prototype, "value", 2);
99
+ ], e.prototype, "value");
107
100
  n([
108
101
  t({ type: String })
109
- ], o.prototype, "label", 2);
102
+ ], e.prototype, "label");
110
103
  n([
111
104
  t({ type: String })
112
- ], o.prototype, "description", 2);
105
+ ], e.prototype, "description");
113
106
  n([
114
107
  t({ type: String, reflect: !0 })
115
- ], o.prototype, "form", 2);
108
+ ], e.prototype, "form");
116
109
  n([
117
110
  t({ type: Boolean, reflect: !0 })
118
- ], o.prototype, "checked", 2);
111
+ ], e.prototype, "checked");
119
112
  n([
120
113
  t({ type: Boolean, reflect: !0 })
121
- ], o.prototype, "disabled", 2);
114
+ ], e.prototype, "disabled");
122
115
  n([
123
116
  t({ type: Boolean })
124
- ], o.prototype, "noIcon", 2);
117
+ ], e.prototype, "noIcon");
125
118
  n([
126
119
  t({ type: Boolean, reflect: !0 })
127
- ], o.prototype, "inverted", 2);
120
+ ], e.prototype, "inverted");
128
121
  n([
129
- t({ reflect: !0 })
130
- ], o.prototype, "size", 1);
131
- let f = o;
132
- customElements.get("nys-toggle") || customElements.define("nys-toggle", f);
122
+ t({ type: String, reflect: !0 })
123
+ ], e.prototype, "size");
124
+ customElements.get("nys-toggle") || customElements.define("nys-toggle", e);
133
125
  export {
134
- f as NysToggle
126
+ e as NysToggle
135
127
  };
136
128
  //# sourceMappingURL=nys-toggle.js.map
@@ -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; // Counter for generating unique IDs\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 private static readonly VALID_SIZES = [\"sm\", \"md\"] as const;\n\n // Private property to store the internal `size` value, restricted to the valid types. Default is \"md\".\n private _size: (typeof NysToggle.VALID_SIZES)[number] = \"md\";\n\n // Getter and setter for the `size` property.\n @property({ reflect: true })\n get size(): (typeof NysToggle.VALID_SIZES)[number] {\n return this._size;\n }\n\n set size(value: string) {\n // Check if the provided value is in VALID_SIZES. If not, default to \"md\".\n this._size = NysToggle.VALID_SIZES.includes(\n value as (typeof NysToggle.VALID_SIZES)[number],\n )\n ? (value as (typeof NysToggle.VALID_SIZES)[number])\n : \"md\";\n }\n\n private _internals: ElementInternals;\n\n /********************** Lifecycle updates **********************/\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 /********************** Form Integration **********************/\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 /********************** Event Handlers **********************/\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 /* Dispatch a custom event for the toggle action:\n * allows bubbling up so if developers wish to use the toggle state info.\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","_a","LitElement","value","changedProperties","checked","event","html","ifDefined","unsafeCSS","styles","__decorateClass","property","NysToggle"],"mappings":"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"}
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; // Counter for generating unique IDs\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 // Lifecycle Updates\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 // Form Integration\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 //Event Handlers\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 /* Dispatch a custom event for the toggle action:\n * allows bubbling up so if developers wish to use the toggle state info.\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.11.4",
3
+ "version": "1.12.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.11.4"
25
+ "@nysds/nys-icon": "^1.12.0"
26
26
  },
27
27
  "devDependencies": {
28
28
  "lit": "^3.3.1",