@idds/js 1.0.78 → 1.0.80

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 +166 -43
  2. package/dist/index.js +166 -43
  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
 
@@ -796,44 +851,112 @@ var InaUI = (() => {
796
851
  }
797
852
 
798
853
  // src/js/components/stateless/modal.js
799
- function initModal(rootSelector = `.${PREFIX}-modal`) {
800
- document.querySelectorAll(rootSelector).forEach((modal) => {
801
- const modalContent = modal.querySelector(`${rootSelector}__content`);
802
- const modalTrigger = modal.querySelector(`${rootSelector}__trigger`);
803
- const modalClose = modal.querySelector(`${rootSelector}__close`);
804
- const modalOverlay = modal.querySelector(`${rootSelector}__overlay`);
805
- modalTrigger.addEventListener("click", () => {
806
- const modalTarget = modalTrigger.getAttribute("data-modal");
807
- const modal2 = document.querySelector(
808
- `.${PREFIX}-modal__content[data-modal="${modalTarget}"]`
809
- );
810
- document.body.style.overflow = "hidden";
811
- modalContent.classList.add(`${PREFIX}-modal__content--show`);
812
- modalOverlay.classList.add(`${PREFIX}-modal__overlay--show`);
813
- });
814
- modalClose.addEventListener("click", () => {
815
- modalContent.classList.remove(`${PREFIX}-modal__content--show`);
816
- modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
817
- setTimeout(() => {
818
- document.body.style.overflow = "";
819
- }, 300);
820
- });
821
- modal.addEventListener("keydown", (event) => {
822
- if (event.key === "Escape") {
823
- modalContent.classList.remove(`${PREFIX}-modal__content--show`);
824
- modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
825
- setTimeout(() => {
826
- document.body.style.overflow = "";
827
- }, 300);
854
+ function trapFocus(element) {
855
+ const focusableEls = element.querySelectorAll(
856
+ 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
857
+ );
858
+ if (focusableEls.length === 0) return;
859
+ const firstFocusableEl = focusableEls[0];
860
+ const lastFocusableEl = focusableEls[focusableEls.length - 1];
861
+ element.addEventListener("keydown", function(e) {
862
+ if (e.key === "Tab") {
863
+ if (e.shiftKey) {
864
+ if (document.activeElement === firstFocusableEl) {
865
+ e.preventDefault();
866
+ lastFocusableEl.focus();
867
+ }
868
+ } else {
869
+ if (document.activeElement === lastFocusableEl) {
870
+ e.preventDefault();
871
+ firstFocusableEl.focus();
872
+ }
828
873
  }
874
+ }
875
+ });
876
+ const closeBtn = element.querySelector(`.${PREFIX}-modal__close-button`);
877
+ if (closeBtn) {
878
+ closeBtn.focus();
879
+ } else {
880
+ firstFocusableEl.focus();
881
+ }
882
+ }
883
+ function openModal(modalEl) {
884
+ if (!modalEl) return;
885
+ modalEl.style.display = "flex";
886
+ document.body.style.overflow = "hidden";
887
+ modalEl.setAttribute("aria-hidden", "false");
888
+ modalEl.classList.remove(
889
+ `${PREFIX}-modal--exit`,
890
+ `${PREFIX}-modal--exit-active`
891
+ );
892
+ modalEl.classList.add(`${PREFIX}-modal--enter`);
893
+ requestAnimationFrame(() => {
894
+ requestAnimationFrame(() => {
895
+ modalEl.classList.add(`${PREFIX}-modal--enter-active`);
896
+ modalEl.classList.remove(`${PREFIX}-modal--enter`);
897
+ trapFocus(modalEl);
829
898
  });
830
- modalOverlay.addEventListener("click", () => {
831
- modalContent.classList.remove(`${PREFIX}-modal__content--show`);
832
- modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
833
- setTimeout(() => {
834
- document.body.style.overflow = "";
835
- }, 300);
836
- });
899
+ });
900
+ }
901
+ function closeModal(modalEl) {
902
+ if (!modalEl) return;
903
+ modalEl.classList.remove(`${PREFIX}-modal--enter-active`);
904
+ modalEl.classList.add(`${PREFIX}-modal--exit-active`);
905
+ document.body.style.overflow = "";
906
+ modalEl.setAttribute("aria-hidden", "true");
907
+ setTimeout(() => {
908
+ modalEl.style.display = "none";
909
+ modalEl.classList.remove(`${PREFIX}-modal--exit-active`);
910
+ }, 300);
911
+ }
912
+ function initModal(rootSelector = `.${PREFIX}-modal`) {
913
+ document.addEventListener("click", (e) => {
914
+ const trigger = e.target.closest(`[data-toggle="modal"]`);
915
+ if (trigger) {
916
+ e.preventDefault();
917
+ const targetSelector = trigger.getAttribute("data-target") || trigger.getAttribute("href");
918
+ const modal = document.querySelector(targetSelector);
919
+ if (modal) {
920
+ modal._previousActiveElement = trigger;
921
+ openModal(modal);
922
+ }
923
+ }
924
+ const dismissBtn = e.target.closest(`[data-dismiss="modal"]`);
925
+ if (dismissBtn) {
926
+ const modal = dismissBtn.closest(rootSelector);
927
+ if (modal) {
928
+ closeModal(modal);
929
+ if (modal._previousActiveElement) {
930
+ modal._previousActiveElement.focus();
931
+ }
932
+ }
933
+ }
934
+ if (e.target.classList.contains(`${PREFIX}-modal`) || e.target.classList.contains(`${PREFIX}-modal__backdrop`)) {
935
+ const modal = e.target.closest(rootSelector);
936
+ if (modal && modal.getAttribute("data-persistent") !== "true") {
937
+ closeModal(modal);
938
+ }
939
+ }
940
+ });
941
+ document.addEventListener("keydown", (e) => {
942
+ if (e.key === "Escape") {
943
+ const openModalEl = document.querySelector(`${rootSelector}[aria-hidden="false"]`) || document.querySelector(`${rootSelector}[style*="display: flex"]`);
944
+ if (openModalEl && openModalEl.getAttribute("data-persistent") !== "true") {
945
+ closeModal(openModalEl);
946
+ if (openModalEl._previousActiveElement) {
947
+ openModalEl._previousActiveElement.focus();
948
+ }
949
+ }
950
+ }
951
+ });
952
+ document.addEventListener("click", (e) => {
953
+ const closeIconBtn = e.target.closest(`.${PREFIX}-modal__close-button`);
954
+ if (closeIconBtn && !closeIconBtn.hasAttribute("data-dismiss")) {
955
+ const modal = closeIconBtn.closest(rootSelector);
956
+ if (modal) {
957
+ closeModal(modal);
958
+ }
959
+ }
837
960
  });
838
961
  }
839
962
 
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
 
@@ -791,44 +846,112 @@ function initDatepicker() {
791
846
  }
792
847
 
793
848
  // src/js/components/stateless/modal.js
794
- function initModal(rootSelector = `.${PREFIX}-modal`) {
795
- document.querySelectorAll(rootSelector).forEach((modal) => {
796
- const modalContent = modal.querySelector(`${rootSelector}__content`);
797
- const modalTrigger = modal.querySelector(`${rootSelector}__trigger`);
798
- const modalClose = modal.querySelector(`${rootSelector}__close`);
799
- const modalOverlay = modal.querySelector(`${rootSelector}__overlay`);
800
- modalTrigger.addEventListener("click", () => {
801
- const modalTarget = modalTrigger.getAttribute("data-modal");
802
- const modal2 = document.querySelector(
803
- `.${PREFIX}-modal__content[data-modal="${modalTarget}"]`
804
- );
805
- document.body.style.overflow = "hidden";
806
- modalContent.classList.add(`${PREFIX}-modal__content--show`);
807
- modalOverlay.classList.add(`${PREFIX}-modal__overlay--show`);
808
- });
809
- modalClose.addEventListener("click", () => {
810
- modalContent.classList.remove(`${PREFIX}-modal__content--show`);
811
- modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
812
- setTimeout(() => {
813
- document.body.style.overflow = "";
814
- }, 300);
815
- });
816
- modal.addEventListener("keydown", (event) => {
817
- if (event.key === "Escape") {
818
- modalContent.classList.remove(`${PREFIX}-modal__content--show`);
819
- modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
820
- setTimeout(() => {
821
- document.body.style.overflow = "";
822
- }, 300);
849
+ function trapFocus(element) {
850
+ const focusableEls = element.querySelectorAll(
851
+ 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
852
+ );
853
+ if (focusableEls.length === 0) return;
854
+ const firstFocusableEl = focusableEls[0];
855
+ const lastFocusableEl = focusableEls[focusableEls.length - 1];
856
+ element.addEventListener("keydown", function(e) {
857
+ if (e.key === "Tab") {
858
+ if (e.shiftKey) {
859
+ if (document.activeElement === firstFocusableEl) {
860
+ e.preventDefault();
861
+ lastFocusableEl.focus();
862
+ }
863
+ } else {
864
+ if (document.activeElement === lastFocusableEl) {
865
+ e.preventDefault();
866
+ firstFocusableEl.focus();
867
+ }
823
868
  }
869
+ }
870
+ });
871
+ const closeBtn = element.querySelector(`.${PREFIX}-modal__close-button`);
872
+ if (closeBtn) {
873
+ closeBtn.focus();
874
+ } else {
875
+ firstFocusableEl.focus();
876
+ }
877
+ }
878
+ function openModal(modalEl) {
879
+ if (!modalEl) return;
880
+ modalEl.style.display = "flex";
881
+ document.body.style.overflow = "hidden";
882
+ modalEl.setAttribute("aria-hidden", "false");
883
+ modalEl.classList.remove(
884
+ `${PREFIX}-modal--exit`,
885
+ `${PREFIX}-modal--exit-active`
886
+ );
887
+ modalEl.classList.add(`${PREFIX}-modal--enter`);
888
+ requestAnimationFrame(() => {
889
+ requestAnimationFrame(() => {
890
+ modalEl.classList.add(`${PREFIX}-modal--enter-active`);
891
+ modalEl.classList.remove(`${PREFIX}-modal--enter`);
892
+ trapFocus(modalEl);
824
893
  });
825
- modalOverlay.addEventListener("click", () => {
826
- modalContent.classList.remove(`${PREFIX}-modal__content--show`);
827
- modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
828
- setTimeout(() => {
829
- document.body.style.overflow = "";
830
- }, 300);
831
- });
894
+ });
895
+ }
896
+ function closeModal(modalEl) {
897
+ if (!modalEl) return;
898
+ modalEl.classList.remove(`${PREFIX}-modal--enter-active`);
899
+ modalEl.classList.add(`${PREFIX}-modal--exit-active`);
900
+ document.body.style.overflow = "";
901
+ modalEl.setAttribute("aria-hidden", "true");
902
+ setTimeout(() => {
903
+ modalEl.style.display = "none";
904
+ modalEl.classList.remove(`${PREFIX}-modal--exit-active`);
905
+ }, 300);
906
+ }
907
+ function initModal(rootSelector = `.${PREFIX}-modal`) {
908
+ document.addEventListener("click", (e) => {
909
+ const trigger = e.target.closest(`[data-toggle="modal"]`);
910
+ if (trigger) {
911
+ e.preventDefault();
912
+ const targetSelector = trigger.getAttribute("data-target") || trigger.getAttribute("href");
913
+ const modal = document.querySelector(targetSelector);
914
+ if (modal) {
915
+ modal._previousActiveElement = trigger;
916
+ openModal(modal);
917
+ }
918
+ }
919
+ const dismissBtn = e.target.closest(`[data-dismiss="modal"]`);
920
+ if (dismissBtn) {
921
+ const modal = dismissBtn.closest(rootSelector);
922
+ if (modal) {
923
+ closeModal(modal);
924
+ if (modal._previousActiveElement) {
925
+ modal._previousActiveElement.focus();
926
+ }
927
+ }
928
+ }
929
+ if (e.target.classList.contains(`${PREFIX}-modal`) || e.target.classList.contains(`${PREFIX}-modal__backdrop`)) {
930
+ const modal = e.target.closest(rootSelector);
931
+ if (modal && modal.getAttribute("data-persistent") !== "true") {
932
+ closeModal(modal);
933
+ }
934
+ }
935
+ });
936
+ document.addEventListener("keydown", (e) => {
937
+ if (e.key === "Escape") {
938
+ const openModalEl = document.querySelector(`${rootSelector}[aria-hidden="false"]`) || document.querySelector(`${rootSelector}[style*="display: flex"]`);
939
+ if (openModalEl && openModalEl.getAttribute("data-persistent") !== "true") {
940
+ closeModal(openModalEl);
941
+ if (openModalEl._previousActiveElement) {
942
+ openModalEl._previousActiveElement.focus();
943
+ }
944
+ }
945
+ }
946
+ });
947
+ document.addEventListener("click", (e) => {
948
+ const closeIconBtn = e.target.closest(`.${PREFIX}-modal__close-button`);
949
+ if (closeIconBtn && !closeIconBtn.hasAttribute("data-dismiss")) {
950
+ const modal = closeIconBtn.closest(rootSelector);
951
+ if (modal) {
952
+ closeModal(modal);
953
+ }
954
+ }
832
955
  });
833
956
  }
834
957
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/js",
3
- "version": "1.0.78",
3
+ "version": "1.0.80",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },