@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.
- package/dist/index.iife.js +1329 -741
- package/dist/index.js +405 -195
- 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
|
};
|