@idds/js 1.0.68 → 1.0.70

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 +1329 -741
  2. package/dist/index.js +405 -195
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1163,6 +1163,153 @@ function initSelectDropdown() {
1163
1163
  window.__inaSelectDropdownInitialized = true;
1164
1164
  }
1165
1165
 
1166
+ // src/js/components/stateful/radio-button.js
1167
+ function initRadioButton() {
1168
+ const radioGroups = document.querySelectorAll(`.${PREFIX}-radio-input`);
1169
+ radioGroups.forEach((group) => {
1170
+ if (group.dataset.initialized === "true") return;
1171
+ group.dataset.initialized = "true";
1172
+ const inputs = group.querySelectorAll('input[type="radio"]');
1173
+ const displayTargetId = group.dataset.displayTarget;
1174
+ const displayTarget = displayTargetId ? document.getElementById(displayTargetId) : null;
1175
+ const updateDisplay = () => {
1176
+ if (!displayTarget) return;
1177
+ const selected = Array.from(inputs).find((input) => input.checked);
1178
+ const value = selected ? selected.value : "";
1179
+ displayTarget.textContent = `Selected: ${value || "None"}`;
1180
+ };
1181
+ if (inputs.length > 0) {
1182
+ inputs.forEach((input) => {
1183
+ input.addEventListener("change", updateDisplay);
1184
+ });
1185
+ updateDisplay();
1186
+ }
1187
+ });
1188
+ }
1189
+
1190
+ // src/js/components/stateful/stepper.js
1191
+ function initStepper() {
1192
+ const steppers = document.querySelectorAll(`.${PREFIX}-stepper`);
1193
+ steppers.forEach((stepper) => {
1194
+ if (stepper.dataset.initialized === "true") return;
1195
+ stepper.dataset.initialized = "true";
1196
+ const stepperId = stepper.id;
1197
+ const items = stepper.querySelectorAll(`.${PREFIX}-stepper__item`);
1198
+ const separators = stepper.querySelectorAll(
1199
+ `.${PREFIX}-stepper__separator`
1200
+ );
1201
+ const totalSteps = items.length;
1202
+ let currentStep = parseInt(stepper.dataset.currentStep || "0", 10);
1203
+ const nextBtns = document.querySelectorAll(
1204
+ `[data-stepper-next="${stepperId}"]`
1205
+ );
1206
+ const prevBtns = document.querySelectorAll(
1207
+ `[data-stepper-prev="${stepperId}"]`
1208
+ );
1209
+ const displayTargetId = stepper.dataset.displayTarget;
1210
+ const displayTarget = displayTargetId ? document.getElementById(displayTargetId) : null;
1211
+ const checkIcon = `
1212
+ <svg
1213
+ xmlns="http://www.w3.org/2000/svg"
1214
+ class="${PREFIX}-stepper__check-icon"
1215
+ width="16"
1216
+ height="16"
1217
+ viewBox="0 0 24 24"
1218
+ stroke-width="2.5"
1219
+ stroke="currentColor"
1220
+ fill="none"
1221
+ stroke-linecap="round"
1222
+ stroke-linejoin="round"
1223
+ >
1224
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
1225
+ <path d="M5 12l5 5l10 -10" />
1226
+ </svg>
1227
+ `;
1228
+ const updateUI = () => {
1229
+ stepper.dataset.currentStep = currentStep;
1230
+ items.forEach((item, index) => {
1231
+ const iconWrapper = item.querySelector(
1232
+ `.${PREFIX}-stepper__icon-wrapper`
1233
+ );
1234
+ const itemNumber = index + 1;
1235
+ item.classList.remove(
1236
+ `${PREFIX}-stepper__item--completed`,
1237
+ `${PREFIX}-stepper__item--active`
1238
+ );
1239
+ if (iconWrapper) iconWrapper.innerHTML = "";
1240
+ if (index < currentStep) {
1241
+ item.classList.add(`${PREFIX}-stepper__item--completed`);
1242
+ if (iconWrapper) iconWrapper.innerHTML = checkIcon;
1243
+ } else if (index === currentStep) {
1244
+ item.classList.add(`${PREFIX}-stepper__item--active`);
1245
+ if (iconWrapper)
1246
+ iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
1247
+ } else {
1248
+ if (iconWrapper)
1249
+ iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
1250
+ }
1251
+ });
1252
+ separators.forEach((separator, index) => {
1253
+ if (index < currentStep) {
1254
+ separator.classList.add(`${PREFIX}-stepper__separator--completed`);
1255
+ } else {
1256
+ separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
1257
+ }
1258
+ });
1259
+ prevBtns.forEach((btn) => {
1260
+ if (currentStep === 0) {
1261
+ btn.setAttribute("disabled", "true");
1262
+ } else {
1263
+ btn.removeAttribute("disabled");
1264
+ }
1265
+ });
1266
+ nextBtns.forEach((btn) => {
1267
+ if (currentStep === totalSteps - 1) {
1268
+ btn.setAttribute("disabled", "true");
1269
+ } else {
1270
+ btn.removeAttribute("disabled");
1271
+ }
1272
+ });
1273
+ if (displayTarget) {
1274
+ displayTarget.textContent = `Current Step: ${currentStep + 1}`;
1275
+ }
1276
+ stepper.dispatchEvent(
1277
+ new CustomEvent("stepper:change", {
1278
+ bubbles: true,
1279
+ detail: { currentStep, totalSteps }
1280
+ })
1281
+ );
1282
+ };
1283
+ nextBtns.forEach((btn) => {
1284
+ btn.addEventListener("click", () => {
1285
+ if (currentStep < totalSteps - 1) {
1286
+ currentStep++;
1287
+ updateUI();
1288
+ }
1289
+ });
1290
+ });
1291
+ prevBtns.forEach((btn) => {
1292
+ btn.addEventListener("click", () => {
1293
+ if (currentStep > 0) {
1294
+ currentStep--;
1295
+ updateUI();
1296
+ }
1297
+ });
1298
+ });
1299
+ items.forEach((item, index) => {
1300
+ if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
1301
+ item.addEventListener("click", () => {
1302
+ if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
1303
+ currentStep = index;
1304
+ updateUI();
1305
+ }
1306
+ });
1307
+ }
1308
+ });
1309
+ updateUI();
1310
+ });
1311
+ }
1312
+
1166
1313
  // src/js/components/stateful/file-upload.js
1167
1314
  var ICONS = {
1168
1315
  upload: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="16"></line></svg>`,
@@ -1686,150 +1833,6 @@ function initFileUploadItem(rootSelector = `.${PREFIX}-file-item`) {
1686
1833
  });
1687
1834
  }
1688
1835
 
1689
- // src/js/components/stateful/dropdown.js
1690
- function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
1691
- document.querySelectorAll(rootSelector).forEach((dropdown) => {
1692
- const trigger = dropdown.querySelector(`.${PREFIX}-dropdown__trigger`);
1693
- const input = dropdown.querySelector(`.${PREFIX}-dropdown__input`);
1694
- const menu = dropdown.querySelector(`.${PREFIX}-dropdown__menu`);
1695
- const menuItems = menu.querySelectorAll("li[role='option']");
1696
- const menuId = menu.id;
1697
- let activeIndex = -1;
1698
- menuItems.forEach((item, index) => {
1699
- item.id = `${menuId}-item-${index}`;
1700
- });
1701
- const toggleMenu = (show) => {
1702
- const isCurrentlyShown = dropdown.classList.contains("show");
1703
- const isShown = show !== void 0 ? show : !isCurrentlyShown;
1704
- if (isShown === isCurrentlyShown) {
1705
- return;
1706
- }
1707
- dropdown.classList.toggle("show", isShown);
1708
- trigger.setAttribute("aria-expanded", isShown);
1709
- if (isShown) {
1710
- input.focus();
1711
- } else {
1712
- input.blur();
1713
- removeHighlight();
1714
- activeIndex = -1;
1715
- input.removeAttribute("aria-activedescendant");
1716
- }
1717
- };
1718
- const filterItems = () => {
1719
- const filterValue = input.value.toLowerCase();
1720
- let hasVisibleItems = false;
1721
- activeIndex = -1;
1722
- removeHighlight();
1723
- input.removeAttribute("aria-activedescendant");
1724
- const activeItem = menu.querySelector("li[role='option'].selected");
1725
- if (activeItem && input.value !== activeItem.textContent.trim()) {
1726
- activeItem.classList.remove("selected");
1727
- }
1728
- menuItems.forEach((item) => {
1729
- const itemText = item.textContent.toLowerCase();
1730
- const isMatch = itemText.includes(filterValue);
1731
- item.classList.toggle("hidden", !isMatch);
1732
- if (isMatch) hasVisibleItems = true;
1733
- });
1734
- if (!dropdown.classList.contains("show") && hasVisibleItems) {
1735
- toggleMenu(true);
1736
- }
1737
- };
1738
- const selectItem = (item) => {
1739
- const itemText = item.textContent.trim();
1740
- input.value = itemText;
1741
- menuItems.forEach((li) => {
1742
- li.classList.remove("selected");
1743
- });
1744
- if (item) {
1745
- item.classList.add("selected");
1746
- dropdown.dispatchEvent(
1747
- new CustomEvent("dropdown:changed", {
1748
- detail: { value: itemText }
1749
- })
1750
- );
1751
- }
1752
- toggleMenu(false);
1753
- };
1754
- const setHighlight = (index) => {
1755
- removeHighlight();
1756
- const visibleItems = menu.querySelectorAll(
1757
- "li[role='option']:not(.hidden)"
1758
- );
1759
- if (visibleItems.length === 0) return;
1760
- if (index < 0) index = 0;
1761
- else if (index >= visibleItems.length) index = visibleItems.length - 1;
1762
- const itemToHighlight = visibleItems[index];
1763
- if (itemToHighlight) {
1764
- itemToHighlight.classList.add("highlighted");
1765
- input.setAttribute("aria-activedescendant", itemToHighlight.id);
1766
- itemToHighlight.scrollIntoView({
1767
- behavior: "smooth",
1768
- block: "nearest"
1769
- });
1770
- activeIndex = index;
1771
- }
1772
- };
1773
- const removeHighlight = () => {
1774
- menuItems.forEach((item) => item.classList.remove("highlighted"));
1775
- };
1776
- trigger.addEventListener("click", () => {
1777
- toggleMenu();
1778
- });
1779
- input.addEventListener("input", filterItems);
1780
- menu.addEventListener("click", (e) => {
1781
- const option = e.target.closest("li[role='option']");
1782
- if (option) {
1783
- e.preventDefault();
1784
- selectItem(option);
1785
- }
1786
- });
1787
- document.addEventListener("click", (e) => {
1788
- if (!dropdown.contains(e.target)) {
1789
- toggleMenu(false);
1790
- }
1791
- });
1792
- input.addEventListener("keydown", (e) => {
1793
- const { key } = e;
1794
- const isMenuOpen = dropdown.classList.contains("show");
1795
- switch (key) {
1796
- case "ArrowDown":
1797
- e.preventDefault();
1798
- if (!isMenuOpen) {
1799
- toggleMenu(true);
1800
- }
1801
- setHighlight(activeIndex + 1);
1802
- break;
1803
- case "ArrowUp":
1804
- e.preventDefault();
1805
- if (isMenuOpen) {
1806
- setHighlight(activeIndex - 1);
1807
- }
1808
- break;
1809
- case "Enter":
1810
- e.preventDefault();
1811
- const firstVisible = menu.querySelector(
1812
- "li[role='option']:not(.hidden)"
1813
- );
1814
- const activeItem = menu.querySelector(".highlighted");
1815
- if (isMenuOpen && activeItem) {
1816
- selectItem(activeItem);
1817
- } else if (isMenuOpen && firstVisible) {
1818
- toggleMenu(false);
1819
- }
1820
- break;
1821
- case "Escape":
1822
- e.preventDefault();
1823
- toggleMenu(false);
1824
- break;
1825
- case "Tab":
1826
- toggleMenu(false);
1827
- break;
1828
- }
1829
- });
1830
- });
1831
- }
1832
-
1833
1836
  // src/js/components/stateful/range-datepicker.js
1834
1837
  function initRangeDatepicker() {
1835
1838
  document.querySelectorAll(".ina-ss-range-datepicker").forEach((rangeDatepicker) => {
@@ -2195,6 +2198,35 @@ function initRangeDatepicker() {
2195
2198
  });
2196
2199
  }
2197
2200
 
2201
+ // src/js/components/stateless/img-compare.js
2202
+ function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
2203
+ document.querySelectorAll(rootSelector).forEach((imgCompare) => {
2204
+ const sliderEl = document.createElement("input");
2205
+ sliderEl.type = "range";
2206
+ sliderEl.min = "0";
2207
+ sliderEl.max = "100";
2208
+ sliderEl.value = "50";
2209
+ sliderEl.setAttribute("aria-label", "Percentage of the image to show");
2210
+ sliderEl.setAttribute("aria-valuenow", "50");
2211
+ sliderEl.setAttribute("aria-valuemin", "0");
2212
+ sliderEl.setAttribute("aria-valuemax", "100");
2213
+ sliderEl.classList.add("ina-ss-img__slider");
2214
+ sliderEl.addEventListener("input", () => {
2215
+ imgCompare.style.setProperty(
2216
+ `--${PREFIX}-position`,
2217
+ `${sliderEl.value}%`
2218
+ );
2219
+ });
2220
+ const sliderLineEl = document.createElement("div");
2221
+ sliderLineEl.classList.add("ina-ss-img__slider-line");
2222
+ const sliderButtonEl = document.createElement("button");
2223
+ sliderButtonEl.classList.add("ina-ss-img__slider-button");
2224
+ imgCompare.appendChild(sliderEl);
2225
+ imgCompare.appendChild(sliderLineEl);
2226
+ imgCompare.appendChild(sliderButtonEl);
2227
+ });
2228
+ }
2229
+
2198
2230
  // src/js/components/stateful/timepicker.js
2199
2231
  function initTimepicker() {
2200
2232
  document.querySelectorAll(`.${PREFIX}-time-picker`).forEach((picker) => {
@@ -2405,56 +2437,6 @@ function initTimepicker() {
2405
2437
  });
2406
2438
  }
2407
2439
 
2408
- // src/js/components/stateless/img-compare.js
2409
- function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
2410
- document.querySelectorAll(rootSelector).forEach((imgCompare) => {
2411
- const sliderEl = document.createElement("input");
2412
- sliderEl.type = "range";
2413
- sliderEl.min = "0";
2414
- sliderEl.max = "100";
2415
- sliderEl.value = "50";
2416
- sliderEl.setAttribute("aria-label", "Percentage of the image to show");
2417
- sliderEl.setAttribute("aria-valuenow", "50");
2418
- sliderEl.setAttribute("aria-valuemin", "0");
2419
- sliderEl.setAttribute("aria-valuemax", "100");
2420
- sliderEl.classList.add("ina-ss-img__slider");
2421
- sliderEl.addEventListener("input", () => {
2422
- imgCompare.style.setProperty(
2423
- `--${PREFIX}-position`,
2424
- `${sliderEl.value}%`
2425
- );
2426
- });
2427
- const sliderLineEl = document.createElement("div");
2428
- sliderLineEl.classList.add("ina-ss-img__slider-line");
2429
- const sliderButtonEl = document.createElement("button");
2430
- sliderButtonEl.classList.add("ina-ss-img__slider-button");
2431
- imgCompare.appendChild(sliderEl);
2432
- imgCompare.appendChild(sliderLineEl);
2433
- imgCompare.appendChild(sliderButtonEl);
2434
- });
2435
- }
2436
-
2437
- // src/js/bundle.js
2438
- if (typeof window !== void 0) {
2439
- document.addEventListener("DOMContentLoaded", () => {
2440
- initAccordion();
2441
- initButtonGroup();
2442
- initCheckbox();
2443
- initDatepicker();
2444
- initDropdown();
2445
- initFileUpload();
2446
- initSingleFileUpload();
2447
- initFileUploadBase();
2448
- initFileUploadItem();
2449
- initImgCompare();
2450
- initModal();
2451
- initRangeDatepicker();
2452
- initTab();
2453
- initTimepicker();
2454
- initToggle();
2455
- });
2456
- }
2457
-
2458
2440
  // src/js/components/stateful/chip.js
2459
2441
  var PREFIX5 = "ina";
2460
2442
  function initChip(rootSelector = `.${PREFIX5}-chip`) {
@@ -2564,6 +2546,230 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
2564
2546
  });
2565
2547
  }
2566
2548
 
2549
+ // src/js/components/stateful/pagination.js
2550
+ function initPagination() {
2551
+ document.querySelectorAll(`.${PREFIX}-pagination`).forEach((container) => {
2552
+ if (container.dataset.initialized === "true") return;
2553
+ container.dataset.initialized = "true";
2554
+ const navButtonsContainer = container.querySelector(
2555
+ `.${PREFIX}-pagination__nav-buttons`
2556
+ );
2557
+ const pageInfo = container.querySelector(
2558
+ `.${PREFIX}-pagination__page-info`
2559
+ );
2560
+ const firstBtn = container.querySelector('[data-action="first"]');
2561
+ const prevBtn = container.querySelector('[data-action="prev"]');
2562
+ const nextBtn = container.querySelector('[data-action="next"]');
2563
+ const lastBtn = container.querySelector('[data-action="last"]');
2564
+ const pageSizeSelect = container.querySelector('[data-role="page-size"]');
2565
+ if (!navButtonsContainer || !pageInfo) return;
2566
+ let currentPage = parseInt(container.dataset.current || "1", 10);
2567
+ let totalPages = parseInt(container.dataset.total || "10", 10);
2568
+ let pageSize = parseInt(container.dataset.pageSize || "10", 10);
2569
+ let pageButtons = [];
2570
+ const updateUI = () => {
2571
+ pageInfo.textContent = `Halaman ${currentPage} dari ${totalPages}`;
2572
+ const isFirst = currentPage === 1;
2573
+ if (firstBtn) {
2574
+ firstBtn.disabled = isFirst;
2575
+ firstBtn.classList.toggle(
2576
+ `${PREFIX}-pagination__nav-button--disabled`,
2577
+ isFirst
2578
+ );
2579
+ firstBtn.classList.toggle(
2580
+ `${PREFIX}-pagination__nav-button--enabled`,
2581
+ !isFirst
2582
+ );
2583
+ }
2584
+ if (prevBtn) {
2585
+ prevBtn.disabled = isFirst;
2586
+ prevBtn.classList.toggle(
2587
+ `${PREFIX}-pagination__nav-button--disabled`,
2588
+ isFirst
2589
+ );
2590
+ prevBtn.classList.toggle(
2591
+ `${PREFIX}-pagination__nav-button--enabled`,
2592
+ !isFirst
2593
+ );
2594
+ }
2595
+ const isLast = currentPage === totalPages;
2596
+ if (nextBtn) {
2597
+ nextBtn.disabled = isLast;
2598
+ nextBtn.classList.toggle(
2599
+ `${PREFIX}-pagination__nav-button--disabled`,
2600
+ isLast
2601
+ );
2602
+ nextBtn.classList.toggle(
2603
+ `${PREFIX}-pagination__nav-button--enabled`,
2604
+ !isLast
2605
+ );
2606
+ }
2607
+ if (lastBtn) {
2608
+ lastBtn.disabled = isLast;
2609
+ lastBtn.classList.toggle(
2610
+ `${PREFIX}-pagination__nav-button--disabled`,
2611
+ isLast
2612
+ );
2613
+ lastBtn.classList.toggle(
2614
+ `${PREFIX}-pagination__nav-button--enabled`,
2615
+ !isLast
2616
+ );
2617
+ }
2618
+ renderPageNumbers();
2619
+ };
2620
+ const renderPageNumbers = () => {
2621
+ let start, end;
2622
+ if (currentPage === 1) {
2623
+ start = 1;
2624
+ end = Math.min(3, totalPages);
2625
+ } else if (currentPage === totalPages) {
2626
+ start = Math.max(1, totalPages - 2);
2627
+ end = totalPages;
2628
+ } else {
2629
+ start = currentPage - 1;
2630
+ end = currentPage + 1;
2631
+ }
2632
+ if (start < 1) start = 1;
2633
+ if (end > totalPages) end = totalPages;
2634
+ pageButtons.forEach((btn) => btn.remove());
2635
+ pageButtons = [];
2636
+ const refNode = nextBtn || null;
2637
+ for (let i = start; i <= end; i++) {
2638
+ const isActive = i === currentPage;
2639
+ const button = document.createElement("button");
2640
+ button.type = "button";
2641
+ button.textContent = i;
2642
+ button.className = `${PREFIX}-pagination__page-button ${PREFIX}-pagination__page-button--${isActive ? "active" : "enabled"}`;
2643
+ button.addEventListener("click", (e) => {
2644
+ e.stopPropagation();
2645
+ if (i !== currentPage) {
2646
+ goToPage(i);
2647
+ }
2648
+ });
2649
+ navButtonsContainer.insertBefore(button, refNode);
2650
+ pageButtons.push(button);
2651
+ }
2652
+ };
2653
+ const goToPage = (page) => {
2654
+ if (page < 1) page = 1;
2655
+ if (page > totalPages) page = totalPages;
2656
+ if (page === currentPage) return;
2657
+ currentPage = page;
2658
+ container.dataset.current = currentPage;
2659
+ updateUI();
2660
+ dispatchChange();
2661
+ };
2662
+ const dispatchChange = () => {
2663
+ container.dispatchEvent(
2664
+ new CustomEvent("pagination:change", {
2665
+ bubbles: true,
2666
+ detail: {
2667
+ page: currentPage,
2668
+ pageSize,
2669
+ totalPages
2670
+ }
2671
+ })
2672
+ );
2673
+ };
2674
+ if (firstBtn)
2675
+ firstBtn.addEventListener("click", () => {
2676
+ if (currentPage > 1) goToPage(1);
2677
+ });
2678
+ if (prevBtn)
2679
+ prevBtn.addEventListener("click", () => {
2680
+ if (currentPage > 1) goToPage(currentPage - 1);
2681
+ });
2682
+ if (nextBtn)
2683
+ nextBtn.addEventListener("click", () => {
2684
+ if (currentPage < totalPages) goToPage(currentPage + 1);
2685
+ });
2686
+ if (lastBtn)
2687
+ lastBtn.addEventListener("click", () => {
2688
+ if (currentPage < totalPages) goToPage(totalPages);
2689
+ });
2690
+ if (pageSizeSelect) {
2691
+ pageSizeSelect.addEventListener("change", (e) => {
2692
+ pageSize = parseInt(e.target.value, 10);
2693
+ currentPage = 1;
2694
+ container.dataset.pageSize = pageSize;
2695
+ container.dataset.current = currentPage;
2696
+ updateUI();
2697
+ dispatchChange();
2698
+ });
2699
+ }
2700
+ updateUI();
2701
+ });
2702
+ }
2703
+
2704
+ // src/js/components/stateless/toast.js
2705
+ function showToast(optionsOrMessage, variant = "default", duration = 3e3) {
2706
+ let message, title, state, style, position, actionHtml;
2707
+ if (typeof optionsOrMessage === "object") {
2708
+ message = optionsOrMessage.message || "";
2709
+ title = optionsOrMessage.title;
2710
+ state = optionsOrMessage.state || "default";
2711
+ style = optionsOrMessage.style || "solid";
2712
+ duration = optionsOrMessage.duration || 3e3;
2713
+ position = optionsOrMessage.position || "top-right";
2714
+ actionHtml = optionsOrMessage.actionHtml || "";
2715
+ } else {
2716
+ message = optionsOrMessage;
2717
+ state = variant;
2718
+ style = "solid";
2719
+ position = "top-right";
2720
+ actionHtml = "";
2721
+ }
2722
+ let containerId = `ina-toast-container-${position}`;
2723
+ let container = document.getElementById(containerId);
2724
+ if (!container) {
2725
+ container = document.createElement("div");
2726
+ container.id = containerId;
2727
+ container.className = `ina-toast-container ina-toast-container--${position}`;
2728
+ document.body.appendChild(container);
2729
+ }
2730
+ const toastItem = document.createElement("div");
2731
+ toastItem.className = "ina-toast-item";
2732
+ const toast = document.createElement("div");
2733
+ toast.className = `ina-toast ina-toast--state-${state} ina-toast--style-${style} ina-toast--visible`;
2734
+ const iconMap = {
2735
+ default: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
2736
+ destructive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
2737
+ positive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>'
2738
+ };
2739
+ const iconHtml = iconMap[state] || iconMap.default;
2740
+ let contentHtml = `
2741
+ <div class="ina-toast__icon">${iconHtml}</div>
2742
+ <div class="ina-toast__content">
2743
+ <div class="ina-toast__text-area">
2744
+ ${title ? `<p class="ina-toast__title">${title}</p>` : ""}
2745
+ ${message ? `<p class="ina-toast__description">${message}</p>` : ""}
2746
+ </div>
2747
+ ${actionHtml ? `<div class="ina-toast__action-area">${actionHtml}</div>` : ""}
2748
+ </div>
2749
+ <button class="ina-toast__close-button">
2750
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-toast__close-icon"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
2751
+ </button>
2752
+ `;
2753
+ toast.innerHTML = contentHtml;
2754
+ toastItem.appendChild(toast);
2755
+ const closeBtn = toast.querySelector(".ina-toast__close-button");
2756
+ const close = () => {
2757
+ toast.classList.remove("ina-toast--visible");
2758
+ toast.classList.add("ina-toast--hidden");
2759
+ setTimeout(() => {
2760
+ if (toastItem.parentNode) toastItem.parentNode.removeChild(toastItem);
2761
+ if (container.children.length === 0) {
2762
+ if (container.parentNode) container.parentNode.removeChild(container);
2763
+ }
2764
+ }, 300);
2765
+ };
2766
+ closeBtn.addEventListener("click", close);
2767
+ container.appendChild(toastItem);
2768
+ if (duration > 0) {
2769
+ setTimeout(close, duration);
2770
+ }
2771
+ }
2772
+
2567
2773
  // src/js/index.js
2568
2774
  var PREFIX = "ina";
2569
2775
  function initAll() {
@@ -2576,6 +2782,8 @@ function initAll() {
2576
2782
  initBasicDropdown();
2577
2783
  initActionDropdown();
2578
2784
  initSelectDropdown();
2785
+ initRadioButton();
2786
+ initStepper();
2579
2787
  initFileUpload();
2580
2788
  initSingleFileUpload();
2581
2789
  initFileUploadBase();
@@ -2586,9 +2794,11 @@ function initAll() {
2586
2794
  initTab();
2587
2795
  initToggle();
2588
2796
  initTimepicker();
2797
+ initPagination();
2589
2798
  initChip();
2590
2799
  }
2591
2800
  export {
2592
2801
  PREFIX,
2593
- initAll
2802
+ initAll,
2803
+ showToast
2594
2804
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/js",
3
- "version": "1.0.68",
3
+ "version": "1.0.70",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },