@idds/js 1.0.78 → 1.0.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.iife.js +62 -7
  2. package/dist/index.js +62 -7
  3. package/package.json +1 -1
package/dist/index.iife.js CHANGED
@@ -120,19 +120,74 @@ var InaUI = (() => {
120
120
 
121
121
  // src/js/components/stateful/toggle.js
122
122
  function initToggle(rootSelector = `.${PREFIX}-toggle`) {
123
- document.querySelectorAll(rootSelector).forEach((toggle) => {
124
- function updateState() {
125
- const isActive = toggle.classList.toggle("active");
126
- toggle.setAttribute("aria-pressed", isActive);
123
+ const toggles = document.querySelectorAll(rootSelector);
124
+ toggles.forEach((toggle) => {
125
+ const input = toggle.querySelector(`.${PREFIX}-toggle__input`);
126
+ const track = toggle.querySelector(`.${PREFIX}-toggle__track`);
127
+ const thumb = toggle.querySelector(`.${PREFIX}-toggle__thumb`);
128
+ if (!input || !track || !thumb) return;
129
+ const updateState = () => {
130
+ const isChecked = input.checked;
131
+ const isDisabled = input.disabled;
132
+ toggle.setAttribute("aria-checked", String(isChecked));
133
+ if (isChecked) {
134
+ toggle.classList.add(`${PREFIX}-toggle--checked`);
135
+ } else {
136
+ toggle.classList.remove(`${PREFIX}-toggle--checked`);
137
+ }
138
+ if (isDisabled) {
139
+ toggle.classList.add(`${PREFIX}-toggle--disabled`);
140
+ } else {
141
+ toggle.classList.remove(`${PREFIX}-toggle--disabled`);
142
+ }
143
+ if (isChecked) {
144
+ track.classList.add(`${PREFIX}-toggle__track--checked`);
145
+ } else {
146
+ track.classList.remove(`${PREFIX}-toggle__track--checked`);
147
+ }
148
+ if (isDisabled) {
149
+ track.classList.add(`${PREFIX}-toggle__track--disabled`);
150
+ } else {
151
+ track.classList.remove(`${PREFIX}-toggle__track--disabled`);
152
+ }
153
+ if (isChecked) {
154
+ thumb.classList.add(`${PREFIX}-toggle__thumb--checked`);
155
+ } else {
156
+ thumb.classList.remove(`${PREFIX}-toggle__thumb--checked`);
157
+ }
158
+ if (isDisabled) {
159
+ thumb.classList.add(`${PREFIX}-toggle__thumb--disabled`);
160
+ } else {
161
+ thumb.classList.remove(`${PREFIX}-toggle__thumb--disabled`);
162
+ }
163
+ };
164
+ updateState();
165
+ if (!input.disabled) {
166
+ toggle.addEventListener("click", (e) => {
167
+ if (e.target !== input) {
168
+ e.preventDefault();
169
+ input.checked = !input.checked;
170
+ input.dispatchEvent(new Event("change", { bubbles: true }));
171
+ }
172
+ });
173
+ toggle.addEventListener("keydown", (e) => {
174
+ if (e.key === " " || e.key === "Enter") {
175
+ e.preventDefault();
176
+ input.checked = !input.checked;
177
+ input.dispatchEvent(new Event("change", { bubbles: true }));
178
+ }
179
+ });
180
+ }
181
+ input.addEventListener("change", () => {
182
+ updateState();
127
183
  toggle.dispatchEvent(
128
184
  new CustomEvent("toggle:change", {
129
- detail: { active: isActive },
185
+ detail: { checked: input.checked },
130
186
  bubbles: true,
131
187
  composed: true
132
188
  })
133
189
  );
134
- }
135
- toggle.addEventListener("click", updateState);
190
+ });
136
191
  });
137
192
  }
138
193
 
package/dist/index.js CHANGED
@@ -115,19 +115,74 @@ function initTab(rootSelector = `.${PREFIX}-tab`) {
115
115
 
116
116
  // src/js/components/stateful/toggle.js
117
117
  function initToggle(rootSelector = `.${PREFIX}-toggle`) {
118
- document.querySelectorAll(rootSelector).forEach((toggle) => {
119
- function updateState() {
120
- const isActive = toggle.classList.toggle("active");
121
- toggle.setAttribute("aria-pressed", isActive);
118
+ const toggles = document.querySelectorAll(rootSelector);
119
+ toggles.forEach((toggle) => {
120
+ const input = toggle.querySelector(`.${PREFIX}-toggle__input`);
121
+ const track = toggle.querySelector(`.${PREFIX}-toggle__track`);
122
+ const thumb = toggle.querySelector(`.${PREFIX}-toggle__thumb`);
123
+ if (!input || !track || !thumb) return;
124
+ const updateState = () => {
125
+ const isChecked = input.checked;
126
+ const isDisabled = input.disabled;
127
+ toggle.setAttribute("aria-checked", String(isChecked));
128
+ if (isChecked) {
129
+ toggle.classList.add(`${PREFIX}-toggle--checked`);
130
+ } else {
131
+ toggle.classList.remove(`${PREFIX}-toggle--checked`);
132
+ }
133
+ if (isDisabled) {
134
+ toggle.classList.add(`${PREFIX}-toggle--disabled`);
135
+ } else {
136
+ toggle.classList.remove(`${PREFIX}-toggle--disabled`);
137
+ }
138
+ if (isChecked) {
139
+ track.classList.add(`${PREFIX}-toggle__track--checked`);
140
+ } else {
141
+ track.classList.remove(`${PREFIX}-toggle__track--checked`);
142
+ }
143
+ if (isDisabled) {
144
+ track.classList.add(`${PREFIX}-toggle__track--disabled`);
145
+ } else {
146
+ track.classList.remove(`${PREFIX}-toggle__track--disabled`);
147
+ }
148
+ if (isChecked) {
149
+ thumb.classList.add(`${PREFIX}-toggle__thumb--checked`);
150
+ } else {
151
+ thumb.classList.remove(`${PREFIX}-toggle__thumb--checked`);
152
+ }
153
+ if (isDisabled) {
154
+ thumb.classList.add(`${PREFIX}-toggle__thumb--disabled`);
155
+ } else {
156
+ thumb.classList.remove(`${PREFIX}-toggle__thumb--disabled`);
157
+ }
158
+ };
159
+ updateState();
160
+ if (!input.disabled) {
161
+ toggle.addEventListener("click", (e) => {
162
+ if (e.target !== input) {
163
+ e.preventDefault();
164
+ input.checked = !input.checked;
165
+ input.dispatchEvent(new Event("change", { bubbles: true }));
166
+ }
167
+ });
168
+ toggle.addEventListener("keydown", (e) => {
169
+ if (e.key === " " || e.key === "Enter") {
170
+ e.preventDefault();
171
+ input.checked = !input.checked;
172
+ input.dispatchEvent(new Event("change", { bubbles: true }));
173
+ }
174
+ });
175
+ }
176
+ input.addEventListener("change", () => {
177
+ updateState();
122
178
  toggle.dispatchEvent(
123
179
  new CustomEvent("toggle:change", {
124
- detail: { active: isActive },
180
+ detail: { checked: input.checked },
125
181
  bubbles: true,
126
182
  composed: true
127
183
  })
128
184
  );
129
- }
130
- toggle.addEventListener("click", updateState);
185
+ });
131
186
  });
132
187
  }
133
188
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/js",
3
- "version": "1.0.78",
3
+ "version": "1.0.79",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },