@idds/js 1.0.55 → 1.0.56

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 +83 -20
  2. package/dist/index.js +84 -20
  3. package/package.json +1 -1
package/dist/index.iife.js CHANGED
@@ -22,6 +22,7 @@ var InaUI = (() => {
22
22
  __export(bundle_exports, {
23
23
  initAccordion: () => initAccordion,
24
24
  initButtonGroup: () => initButtonGroup,
25
+ initCheckbox: () => initCheckbox,
25
26
  initDatepicker: () => initDatepicker,
26
27
  initDropdown: () => initDropdown,
27
28
  initFileUploadBase: () => initFileUploadBase,
@@ -35,6 +36,50 @@ var InaUI = (() => {
35
36
  showToast: () => showToast
36
37
  });
37
38
 
39
+ // src/js/components/stateful/checkbox.js
40
+ function initCheckbox(rootSelector = `.${PREFIX}-checkbox`) {
41
+ const checkboxes = document.querySelectorAll(rootSelector);
42
+ checkboxes.forEach((checkboxLabel) => {
43
+ if (checkboxLabel.__inaCheckboxInitialized) return;
44
+ const input = checkboxLabel.querySelector(`.${PREFIX}-checkbox__input`);
45
+ const box = checkboxLabel.querySelector(`.${PREFIX}-checkbox__box`);
46
+ if (!input || !box) return;
47
+ const ICON_CHECK = `
48
+ <svg class="${PREFIX}-checkbox__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
49
+ <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
50
+ </svg>
51
+ `;
52
+ const ICON_MINUS = `
53
+ <svg class="${PREFIX}-checkbox__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
54
+ <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
55
+ </svg>
56
+ `;
57
+ const updateState = () => {
58
+ box.classList.remove(`${PREFIX}-checkbox__box--checked`);
59
+ box.classList.remove(`${PREFIX}-checkbox__box--unchecked`);
60
+ box.classList.remove(`${PREFIX}-checkbox__box--indeterminate`);
61
+ checkboxLabel.classList.remove(`${PREFIX}-checkbox--disabled`);
62
+ if (input.disabled) {
63
+ checkboxLabel.classList.add(`${PREFIX}-checkbox--disabled`);
64
+ }
65
+ if (input.indeterminate) {
66
+ box.classList.add(`${PREFIX}-checkbox__box--indeterminate`);
67
+ box.innerHTML = ICON_MINUS;
68
+ } else if (input.checked) {
69
+ box.classList.add(`${PREFIX}-checkbox__box--checked`);
70
+ box.innerHTML = ICON_CHECK;
71
+ } else {
72
+ box.classList.add(`${PREFIX}-checkbox__box--unchecked`);
73
+ box.innerHTML = "";
74
+ }
75
+ };
76
+ updateState();
77
+ input.addEventListener("change", updateState);
78
+ checkboxLabel.__inaCheckboxInitialized = true;
79
+ checkboxLabel.updateState = updateState;
80
+ });
81
+ }
82
+
38
83
  // src/js/components/stateful/tab.js
39
84
  function initTab(rootSelector = `.${PREFIX}-tab`) {
40
85
  document.querySelectorAll(rootSelector).forEach((tab) => {
@@ -1312,28 +1357,45 @@ var InaUI = (() => {
1312
1357
  var PREFIX = "ina";
1313
1358
 
1314
1359
  // src/js/components/stateful/button-group.js
1315
- function initButtonGroup(rootSelector = `.${PREFIX}-btn-group`) {
1316
- document.querySelectorAll(rootSelector).forEach((buttonGroup) => {
1317
- const buttons = buttonGroup.querySelectorAll(`.${PREFIX}-btn`);
1360
+ function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
1361
+ const buttonGroups = document.querySelectorAll(rootSelector);
1362
+ buttonGroups.forEach((buttonGroup) => {
1363
+ if (buttonGroup.__inaButtonGroupInitialized) return;
1364
+ const buttons = buttonGroup.querySelectorAll(
1365
+ `.${PREFIX}-button-group__button`
1366
+ );
1367
+ const updateState = (clickedButton) => {
1368
+ const isDisabled = clickedButton.hasAttribute("disabled") || clickedButton.classList.contains(
1369
+ `${PREFIX}-button-group__button--disabled`
1370
+ );
1371
+ if (isDisabled) return;
1372
+ const value = clickedButton.getAttribute("data-value");
1373
+ buttons.forEach((btn) => {
1374
+ if (btn === clickedButton) {
1375
+ btn.classList.add(`${PREFIX}-button-group__button--selected`);
1376
+ btn.setAttribute("aria-pressed", "true");
1377
+ } else {
1378
+ btn.classList.remove(`${PREFIX}-button-group__button--selected`);
1379
+ btn.setAttribute("aria-pressed", "false");
1380
+ }
1381
+ });
1382
+ buttonGroup.dispatchEvent(
1383
+ new CustomEvent("button-group:change", {
1384
+ detail: { value },
1385
+ bubbles: true,
1386
+ composed: true
1387
+ })
1388
+ );
1389
+ };
1318
1390
  buttons.forEach((button) => {
1319
- function updateState() {
1320
- const index = Array.from(buttons).indexOf(button);
1321
- buttons.forEach((button2, i) => {
1322
- button2.classList.remove(`${PREFIX}-btn--active`);
1323
- if (i === index) {
1324
- button2.classList.add(`${PREFIX}-btn--active`);
1325
- }
1326
- });
1327
- button.dispatchEvent(
1328
- new CustomEvent("button:change", {
1329
- detail: { activeIndex: index },
1330
- bubbles: true,
1331
- composed: true
1332
- })
1333
- );
1334
- }
1335
- button.addEventListener("click", updateState);
1391
+ button.addEventListener("click", (e) => {
1392
+ if (button.type !== "submit") {
1393
+ e.preventDefault();
1394
+ }
1395
+ updateState(button);
1396
+ });
1336
1397
  });
1398
+ buttonGroup.__inaButtonGroupInitialized = true;
1337
1399
  });
1338
1400
  }
1339
1401
 
@@ -1776,6 +1838,7 @@ var InaUI = (() => {
1776
1838
  document.addEventListener("DOMContentLoaded", () => {
1777
1839
  initAccordion();
1778
1840
  initButtonGroup();
1841
+ initCheckbox();
1779
1842
  initDatepicker();
1780
1843
  initDropdown();
1781
1844
  initFileUploadBase();
package/dist/index.js CHANGED
@@ -1,26 +1,87 @@
1
1
  // src/js/components/stateful/button-group.js
2
- function initButtonGroup(rootSelector = `.${PREFIX}-btn-group`) {
3
- document.querySelectorAll(rootSelector).forEach((buttonGroup) => {
4
- const buttons = buttonGroup.querySelectorAll(`.${PREFIX}-btn`);
2
+ function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
3
+ const buttonGroups = document.querySelectorAll(rootSelector);
4
+ buttonGroups.forEach((buttonGroup) => {
5
+ if (buttonGroup.__inaButtonGroupInitialized) return;
6
+ const buttons = buttonGroup.querySelectorAll(
7
+ `.${PREFIX}-button-group__button`
8
+ );
9
+ const updateState = (clickedButton) => {
10
+ const isDisabled = clickedButton.hasAttribute("disabled") || clickedButton.classList.contains(
11
+ `${PREFIX}-button-group__button--disabled`
12
+ );
13
+ if (isDisabled) return;
14
+ const value = clickedButton.getAttribute("data-value");
15
+ buttons.forEach((btn) => {
16
+ if (btn === clickedButton) {
17
+ btn.classList.add(`${PREFIX}-button-group__button--selected`);
18
+ btn.setAttribute("aria-pressed", "true");
19
+ } else {
20
+ btn.classList.remove(`${PREFIX}-button-group__button--selected`);
21
+ btn.setAttribute("aria-pressed", "false");
22
+ }
23
+ });
24
+ buttonGroup.dispatchEvent(
25
+ new CustomEvent("button-group:change", {
26
+ detail: { value },
27
+ bubbles: true,
28
+ composed: true
29
+ })
30
+ );
31
+ };
5
32
  buttons.forEach((button) => {
6
- function updateState() {
7
- const index = Array.from(buttons).indexOf(button);
8
- buttons.forEach((button2, i) => {
9
- button2.classList.remove(`${PREFIX}-btn--active`);
10
- if (i === index) {
11
- button2.classList.add(`${PREFIX}-btn--active`);
12
- }
13
- });
14
- button.dispatchEvent(
15
- new CustomEvent("button:change", {
16
- detail: { activeIndex: index },
17
- bubbles: true,
18
- composed: true
19
- })
20
- );
21
- }
22
- button.addEventListener("click", updateState);
33
+ button.addEventListener("click", (e) => {
34
+ if (button.type !== "submit") {
35
+ e.preventDefault();
36
+ }
37
+ updateState(button);
38
+ });
23
39
  });
40
+ buttonGroup.__inaButtonGroupInitialized = true;
41
+ });
42
+ }
43
+
44
+ // src/js/components/stateful/checkbox.js
45
+ function initCheckbox(rootSelector = `.${PREFIX}-checkbox`) {
46
+ const checkboxes = document.querySelectorAll(rootSelector);
47
+ checkboxes.forEach((checkboxLabel) => {
48
+ if (checkboxLabel.__inaCheckboxInitialized) return;
49
+ const input = checkboxLabel.querySelector(`.${PREFIX}-checkbox__input`);
50
+ const box = checkboxLabel.querySelector(`.${PREFIX}-checkbox__box`);
51
+ if (!input || !box) return;
52
+ const ICON_CHECK = `
53
+ <svg class="${PREFIX}-checkbox__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
54
+ <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
55
+ </svg>
56
+ `;
57
+ const ICON_MINUS = `
58
+ <svg class="${PREFIX}-checkbox__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
59
+ <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
60
+ </svg>
61
+ `;
62
+ const updateState = () => {
63
+ box.classList.remove(`${PREFIX}-checkbox__box--checked`);
64
+ box.classList.remove(`${PREFIX}-checkbox__box--unchecked`);
65
+ box.classList.remove(`${PREFIX}-checkbox__box--indeterminate`);
66
+ checkboxLabel.classList.remove(`${PREFIX}-checkbox--disabled`);
67
+ if (input.disabled) {
68
+ checkboxLabel.classList.add(`${PREFIX}-checkbox--disabled`);
69
+ }
70
+ if (input.indeterminate) {
71
+ box.classList.add(`${PREFIX}-checkbox__box--indeterminate`);
72
+ box.innerHTML = ICON_MINUS;
73
+ } else if (input.checked) {
74
+ box.classList.add(`${PREFIX}-checkbox__box--checked`);
75
+ box.innerHTML = ICON_CHECK;
76
+ } else {
77
+ box.classList.add(`${PREFIX}-checkbox__box--unchecked`);
78
+ box.innerHTML = "";
79
+ }
80
+ };
81
+ updateState();
82
+ input.addEventListener("change", updateState);
83
+ checkboxLabel.__inaCheckboxInitialized = true;
84
+ checkboxLabel.updateState = updateState;
24
85
  });
25
86
  }
26
87
 
@@ -1667,6 +1728,7 @@ if (typeof window !== void 0) {
1667
1728
  document.addEventListener("DOMContentLoaded", () => {
1668
1729
  initAccordion();
1669
1730
  initButtonGroup();
1731
+ initCheckbox();
1670
1732
  initDatepicker();
1671
1733
  initDropdown();
1672
1734
  initFileUploadBase();
@@ -1684,7 +1746,9 @@ if (typeof window !== void 0) {
1684
1746
  var PREFIX = "ina";
1685
1747
  function initAll() {
1686
1748
  initAccordion();
1749
+ initBanner();
1687
1750
  initButtonGroup();
1751
+ initCheckbox();
1688
1752
  initDatepicker();
1689
1753
  initDropdown();
1690
1754
  initFileUploadBase();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/js",
3
- "version": "1.0.55",
3
+ "version": "1.0.56",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },