@idds/js 1.0.50 → 1.0.51

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 +127 -93
  2. package/dist/index.js +127 -93
  3. package/package.json +1 -1
package/dist/index.iife.js CHANGED
@@ -86,7 +86,7 @@ var InaUI = (() => {
86
86
  function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
87
87
  const accordionGroups = document.querySelectorAll(rootSelector);
88
88
  accordionGroups.forEach((group) => {
89
- const isMultiple = group.dataset.multipleOpen === "true" || group.dataset.behavior === "multiple";
89
+ const isMultiple = group.getAttribute("data-multiple-open") === "true" || group.getAttribute("data-behavior") === "multiple";
90
90
  const accordions = group.querySelectorAll(`:scope > .${PREFIX}-accordion`);
91
91
  accordions.forEach((accordion, _index) => {
92
92
  const toggle = accordion.querySelector(`.${PREFIX}-accordion__toggle`);
@@ -151,6 +151,9 @@ var InaUI = (() => {
151
151
  const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
152
152
  if (icon) icon.classList.add(`${PREFIX}-accordion__icon--open`);
153
153
  body.classList.add(`${PREFIX}-accordion__content--open`);
154
+ if (body) {
155
+ body.style.maxHeight = `${body.scrollHeight}px`;
156
+ }
154
157
  }
155
158
  function closeItem(accordion, toggle, body) {
156
159
  accordion.classList.remove(`${PREFIX}-accordion--open`);
@@ -158,30 +161,41 @@ var InaUI = (() => {
158
161
  const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
159
162
  if (icon) icon.classList.remove(`${PREFIX}-accordion__icon--open`);
160
163
  body.classList.remove(`${PREFIX}-accordion__content--open`);
164
+ if (body) {
165
+ body.style.maxHeight = null;
166
+ }
161
167
  }
162
168
 
163
169
  // src/js/components/stateful/datepicker.js
164
170
  function initDatepicker() {
165
- document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
171
+ document.querySelectorAll(`.${PREFIX}-date-picker`).forEach((datepicker) => {
166
172
  if (datepicker.dataset.initialized === "true") return;
167
173
  datepicker.dataset.initialized = "true";
168
174
  const mode = datepicker.dataset.mode || "single";
169
175
  const format = datepicker.dataset.format || "DD/MM/YYYY";
170
- const trigger = datepicker.querySelector(".ina-date-picker__trigger");
171
- const triggerText = trigger.querySelector(".ina-date-picker__trigger-text");
172
- const panel = datepicker.querySelector(".ina-date-picker__panel");
176
+ const trigger = datepicker.querySelector(`.${PREFIX}-date-picker__trigger`);
177
+ const triggerText = trigger.querySelector(
178
+ `.${PREFIX}-date-picker__trigger-text`
179
+ );
180
+ const panel = datepicker.querySelector(`.${PREFIX}-date-picker__panel`);
173
181
  panel.style.display = "none";
174
- let panelContent = panel.querySelector(".ina-date-picker__panel-content");
182
+ let panelContent = panel.querySelector(
183
+ `.${PREFIX}-date-picker__panel-content`
184
+ );
175
185
  if (!panelContent) {
176
186
  panelContent = document.createElement("div");
177
- panelContent.className = "ina-date-picker__panel-content";
187
+ panelContent.className = `${PREFIX}-date-picker__panel-content`;
178
188
  if (mode === "range" || mode === "multiple") {
179
- panelContent.classList.add("ina-date-picker__panel-content--dual");
189
+ panelContent.classList.add(
190
+ `${PREFIX}-date-picker__panel-content--dual`
191
+ );
180
192
  }
181
193
  panel.appendChild(panelContent);
182
194
  } else {
183
195
  if (mode === "range" || mode === "multiple") {
184
- panelContent.classList.add("ina-date-picker__panel-content--dual");
196
+ panelContent.classList.add(
197
+ `${PREFIX}-date-picker__panel-content--dual`
198
+ );
185
199
  }
186
200
  }
187
201
  let viewDate = /* @__PURE__ */ new Date();
@@ -229,15 +243,19 @@ var InaUI = (() => {
229
243
  if (mode === "single") {
230
244
  if (selectedDate) {
231
245
  triggerText.textContent = formatDate(selectedDate);
232
- triggerText.classList.add("ina-date-picker__trigger-text--value");
246
+ triggerText.classList.add(
247
+ `${PREFIX}-date-picker__trigger-text--value`
248
+ );
233
249
  triggerText.classList.remove(
234
- "ina-date-picker__trigger-text--placeholder"
250
+ `${PREFIX}-date-picker__trigger-text--placeholder`
235
251
  );
236
252
  } else {
237
253
  triggerText.textContent = "Pilih Tanggal";
238
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
254
+ triggerText.classList.remove(
255
+ `${PREFIX}-date-picker__trigger-text--value`
256
+ );
239
257
  triggerText.classList.add(
240
- "ina-date-picker__trigger-text--placeholder"
258
+ `${PREFIX}-date-picker__trigger-text--placeholder`
241
259
  );
242
260
  }
243
261
  } else if (mode === "range") {
@@ -245,32 +263,42 @@ var InaUI = (() => {
245
263
  const start = formatDate(rangeDate[0]);
246
264
  const end = formatDate(rangeDate[1]);
247
265
  triggerText.textContent = `${start} - ${end}`;
248
- triggerText.classList.add("ina-date-picker__trigger-text--value");
266
+ triggerText.classList.add(
267
+ `${PREFIX}-date-picker__trigger-text--value`
268
+ );
249
269
  triggerText.classList.remove(
250
- "ina-date-picker__trigger-text--placeholder"
270
+ `${PREFIX}-date-picker__trigger-text--placeholder`
251
271
  );
252
272
  } else if (rangeDate[0]) {
253
273
  triggerText.textContent = `${formatDate(rangeDate[0])} - ...`;
254
- triggerText.classList.add("ina-date-picker__trigger-text--value");
274
+ triggerText.classList.add(
275
+ `${PREFIX}-date-picker__trigger-text--value`
276
+ );
255
277
  } else {
256
278
  triggerText.textContent = "Pilih Rentang Tanggal";
257
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
279
+ triggerText.classList.remove(
280
+ `${PREFIX}-date-picker__trigger-text--value`
281
+ );
258
282
  triggerText.classList.add(
259
- "ina-date-picker__trigger-text--placeholder"
283
+ `${PREFIX}-date-picker__trigger-text--placeholder`
260
284
  );
261
285
  }
262
286
  } else if (mode === "multiple") {
263
287
  if (selectedDates.length > 0) {
264
288
  triggerText.textContent = `${selectedDates.length} Tanggal Terpilih`;
265
- triggerText.classList.add("ina-date-picker__trigger-text--value");
289
+ triggerText.classList.add(
290
+ `${PREFIX}-date-picker__trigger-text--value`
291
+ );
266
292
  triggerText.classList.remove(
267
- "ina-date-picker__trigger-text--placeholder"
293
+ `${PREFIX}-date-picker__trigger-text--placeholder`
268
294
  );
269
295
  } else {
270
296
  triggerText.textContent = "Pilih Beberapa Tanggal";
271
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
297
+ triggerText.classList.remove(
298
+ `${PREFIX}-date-picker__trigger-text--value`
299
+ );
272
300
  triggerText.classList.add(
273
- "ina-date-picker__trigger-text--placeholder"
301
+ `${PREFIX}-date-picker__trigger-text--placeholder`
274
302
  );
275
303
  }
276
304
  }
@@ -284,26 +312,26 @@ var InaUI = (() => {
284
312
  }
285
313
  function createMonthPicker(initialMonth, onChange) {
286
314
  const container = document.createElement("div");
287
- container.className = "ina-month-picker";
315
+ container.className = `${PREFIX}-month-picker`;
288
316
  let currentMonthIdx = initialMonth;
289
317
  let isPickerOpen = false;
290
318
  const pickerTrigger = document.createElement("button");
291
319
  pickerTrigger.type = "button";
292
- pickerTrigger.className = "ina-month-picker__trigger ina-month-picker__trigger--size-sm";
320
+ pickerTrigger.className = `${PREFIX}-month-picker__trigger ${PREFIX}-month-picker__trigger--size-sm`;
293
321
  const updateText = () => {
294
- pickerTrigger.innerHTML = `<span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
322
+ pickerTrigger.innerHTML = `<span class="${PREFIX}-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
295
323
  };
296
324
  updateText();
297
325
  const pickerPanel = document.createElement("div");
298
- pickerPanel.className = "ina-month-picker__panel";
326
+ pickerPanel.className = `${PREFIX}-month-picker__panel`;
299
327
  const grid = document.createElement("div");
300
- grid.className = "ina-month-picker__grid";
328
+ grid.className = `${PREFIX}-month-picker__grid`;
301
329
  MONTHS_SHORT_ID.forEach((m, idx) => {
302
330
  const btn = document.createElement("button");
303
331
  btn.type = "button";
304
- btn.className = "ina-month-picker__month-option";
332
+ btn.className = `${PREFIX}-month-picker__month-option`;
305
333
  if (idx === currentMonthIdx)
306
- btn.classList.add("ina-month-picker__month-option--selected");
334
+ btn.classList.add(`${PREFIX}-month-picker__month-option--selected`);
307
335
  btn.textContent = m;
308
336
  btn.addEventListener("click", (e) => {
309
337
  e.stopPropagation();
@@ -322,10 +350,10 @@ var InaUI = (() => {
322
350
  function togglePicker(show) {
323
351
  isPickerOpen = show;
324
352
  if (show) {
325
- pickerPanel.classList.add("ina-month-picker__panel--open");
353
+ pickerPanel.classList.add(`${PREFIX}-month-picker__panel--open`);
326
354
  pickerTrigger.setAttribute("aria-expanded", "true");
327
355
  } else {
328
- pickerPanel.classList.remove("ina-month-picker__panel--open");
356
+ pickerPanel.classList.remove(`${PREFIX}-month-picker__panel--open`);
329
357
  pickerTrigger.setAttribute("aria-expanded", "false");
330
358
  }
331
359
  }
@@ -342,24 +370,24 @@ var InaUI = (() => {
342
370
  }
343
371
  function createYearPicker(initialYear, onChange) {
344
372
  const container = document.createElement("div");
345
- container.className = "ina-year-picker";
373
+ container.className = `${PREFIX}-year-picker`;
346
374
  let currentYearVal = initialYear;
347
375
  let isPickerOpen = false;
348
376
  let decadeStart = Math.floor(initialYear / 20) * 20;
349
377
  const pickerTrigger = document.createElement("button");
350
378
  pickerTrigger.type = "button";
351
- pickerTrigger.className = "ina-year-picker__trigger ina-year-picker__trigger--size-sm";
379
+ pickerTrigger.className = `${PREFIX}-year-picker__trigger ${PREFIX}-year-picker__trigger--size-sm`;
352
380
  const updateText = () => {
353
- pickerTrigger.innerHTML = `<span class="ina-year-picker__trigger-text">${currentYearVal}</span>`;
381
+ pickerTrigger.innerHTML = `<span class="${PREFIX}-year-picker__trigger-text">${currentYearVal}</span>`;
354
382
  };
355
383
  updateText();
356
384
  const pickerPanel = document.createElement("div");
357
- pickerPanel.className = "ina-year-picker__panel";
385
+ pickerPanel.className = `${PREFIX}-year-picker__panel`;
358
386
  const header = document.createElement("div");
359
- header.className = "ina-year-picker__header";
387
+ header.className = `${PREFIX}-year-picker__header`;
360
388
  const prevBtn = document.createElement("button");
361
389
  prevBtn.type = "button";
362
- prevBtn.className = "ina-year-picker__nav-button";
390
+ prevBtn.className = `${PREFIX}-year-picker__nav-button`;
363
391
  prevBtn.innerHTML = createIcon("chevron-left");
364
392
  prevBtn.onclick = (e) => {
365
393
  decadeStart -= 20;
@@ -367,26 +395,26 @@ var InaUI = (() => {
367
395
  };
368
396
  const nextBtn = document.createElement("button");
369
397
  nextBtn.type = "button";
370
- nextBtn.className = "ina-year-picker__nav-button";
398
+ nextBtn.className = `${PREFIX}-year-picker__nav-button`;
371
399
  nextBtn.innerHTML = createIcon("chevron-right");
372
400
  nextBtn.onclick = (e) => {
373
401
  decadeStart += 20;
374
402
  renderGrid();
375
403
  };
376
404
  const rangeText = document.createElement("span");
377
- rangeText.className = "ina-year-picker__decade-range";
405
+ rangeText.className = `${PREFIX}-year-picker__decade-range`;
378
406
  header.append(prevBtn, rangeText, nextBtn);
379
407
  const grid = document.createElement("div");
380
- grid.className = "ina-year-picker__grid";
408
+ grid.className = `${PREFIX}-year-picker__grid`;
381
409
  function renderGrid() {
382
410
  grid.innerHTML = "";
383
411
  rangeText.textContent = `${decadeStart} - ${decadeStart + 19}`;
384
412
  for (let y = decadeStart; y < decadeStart + 20; y++) {
385
413
  const btn = document.createElement("button");
386
414
  btn.type = "button";
387
- btn.className = "ina-year-picker__year-option";
415
+ btn.className = `${PREFIX}-year-picker__year-option`;
388
416
  if (y === currentYearVal)
389
- btn.classList.add("ina-year-picker__year-option--selected");
417
+ btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
390
418
  btn.textContent = y;
391
419
  btn.addEventListener("click", (e) => {
392
420
  e.stopPropagation();
@@ -408,9 +436,9 @@ var InaUI = (() => {
408
436
  if (show) {
409
437
  decadeStart = Math.floor(currentYearVal / 20) * 20;
410
438
  renderGrid();
411
- pickerPanel.classList.add("ina-year-picker__panel--open");
439
+ pickerPanel.classList.add(`${PREFIX}-year-picker__panel--open`);
412
440
  } else {
413
- pickerPanel.classList.remove("ina-year-picker__panel--open");
441
+ pickerPanel.classList.remove(`${PREFIX}-year-picker__panel--open`);
414
442
  }
415
443
  }
416
444
  document.addEventListener("click", (e) => {
@@ -429,16 +457,16 @@ var InaUI = (() => {
429
457
  const month = baseDate.getMonth();
430
458
  const container = document.createElement("div");
431
459
  if (!isNextMonth) {
432
- container.className = "ina-date-picker__calendar-container";
460
+ container.className = `${PREFIX}-date-picker__calendar-container`;
433
461
  } else {
434
- container.className = "ina-date-picker__calendar";
462
+ container.className = `${PREFIX}-date-picker__calendar`;
435
463
  }
436
464
  const header = document.createElement("div");
437
- header.className = isNextMonth ? "ina-date-picker__next-month-header" : "ina-date-picker__calendar-header";
465
+ header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
438
466
  if (!isNextMonth) {
439
467
  const prevBtn = document.createElement("button");
440
468
  prevBtn.type = "button";
441
- prevBtn.className = "ina-date-picker__nav-button";
469
+ prevBtn.className = `${PREFIX}-date-picker__nav-button`;
442
470
  prevBtn.innerHTML = createIcon("chevron-left");
443
471
  prevBtn.onclick = (e) => {
444
472
  e.stopPropagation();
@@ -452,10 +480,10 @@ var InaUI = (() => {
452
480
  header.appendChild(spacer);
453
481
  }
454
482
  const controls = document.createElement("div");
455
- controls.className = isNextMonth ? "ina-date-picker__next-month-controls" : "ina-date-picker__header-controls";
456
- controls.className = "ina-date-picker__header-controls";
483
+ controls.className = isNextMonth ? `${PREFIX}-date-picker__next-month-controls` : `${PREFIX}-date-picker__header-controls`;
484
+ controls.className = `${PREFIX}-date-picker__header-controls`;
457
485
  const monthCont = document.createElement("div");
458
- monthCont.className = "ina-date-picker__dropdown-container";
486
+ monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
459
487
  const monthPicker = createMonthPicker(month, (m) => {
460
488
  if (isNextMonth) {
461
489
  viewDate = new Date(year, m - 1, 1);
@@ -466,7 +494,7 @@ var InaUI = (() => {
466
494
  });
467
495
  monthCont.appendChild(monthPicker.element);
468
496
  const yearCont = document.createElement("div");
469
- yearCont.className = "ina-date-picker__dropdown-container";
497
+ yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
470
498
  const yearPicker = createYearPicker(year, (y) => {
471
499
  if (isNextMonth) {
472
500
  viewDate = new Date(y, month - 1, 1);
@@ -482,7 +510,7 @@ var InaUI = (() => {
482
510
  if (showNextBtn) {
483
511
  const nextBtn = document.createElement("button");
484
512
  nextBtn.type = "button";
485
- nextBtn.className = "ina-date-picker__nav-button";
513
+ nextBtn.className = `${PREFIX}-date-picker__nav-button`;
486
514
  nextBtn.innerHTML = createIcon("chevron-right");
487
515
  nextBtn.onclick = (e) => {
488
516
  e.stopPropagation();
@@ -496,10 +524,10 @@ var InaUI = (() => {
496
524
  header.appendChild(spacer);
497
525
  }
498
526
  const grid = document.createElement("div");
499
- grid.className = "ina-date-picker__calendar-grid";
527
+ grid.className = `${PREFIX}-date-picker__calendar-grid`;
500
528
  DAYS_SHORT.forEach((d) => {
501
529
  const dh = document.createElement("div");
502
- dh.className = "ina-date-picker__day-header";
530
+ dh.className = `${PREFIX}-date-picker__day-header`;
503
531
  dh.textContent = d;
504
532
  grid.appendChild(dh);
505
533
  });
@@ -510,7 +538,7 @@ var InaUI = (() => {
510
538
  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
511
539
  const btn = document.createElement("button");
512
540
  btn.type = "button";
513
- btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
541
+ btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
514
542
  btn.textContent = daysInPrevMonth - i;
515
543
  grid.appendChild(btn);
516
544
  }
@@ -518,7 +546,7 @@ var InaUI = (() => {
518
546
  const date = new Date(year, month, i);
519
547
  const btn = document.createElement("button");
520
548
  btn.type = "button";
521
- btn.className = "ina-date-picker__day";
549
+ btn.className = `${PREFIX}-date-picker__day`;
522
550
  btn.textContent = i;
523
551
  let isSelected = false;
524
552
  let isInRange = false;
@@ -536,12 +564,14 @@ var InaUI = (() => {
536
564
  isSelected = true;
537
565
  if (start && end && date > start && date < end) isInRange = true;
538
566
  }
539
- if (isSelected) btn.classList.add("ina-date-picker__day--selected");
540
- if (isInRange) btn.classList.add("ina-date-picker__day--in-range");
567
+ if (isSelected)
568
+ btn.classList.add(`${PREFIX}-date-picker__day--selected`);
569
+ if (isInRange)
570
+ btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
541
571
  if (date.toDateString() === today.toDateString())
542
- btn.classList.add("ina-date-picker__day--today");
572
+ btn.classList.add(`${PREFIX}-date-picker__day--today`);
543
573
  if (!isSelected && !isInRange)
544
- btn.classList.add("ina-date-picker__day--hover");
574
+ btn.classList.add(`${PREFIX}-date-picker__day--hover`);
545
575
  btn.onclick = (e) => {
546
576
  e.stopPropagation();
547
577
  if (mode === "single") {
@@ -586,7 +616,7 @@ var InaUI = (() => {
586
616
  for (let i = 1; i <= remaining; i++) {
587
617
  const btn = document.createElement("button");
588
618
  btn.type = "button";
589
- btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
619
+ btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
590
620
  btn.textContent = i;
591
621
  grid.appendChild(btn);
592
622
  }
@@ -609,13 +639,13 @@ var InaUI = (() => {
609
639
  }
610
640
  function open() {
611
641
  isOpen = true;
612
- panel.classList.add("ina-date-picker__panel--open");
642
+ panel.classList.add(`${PREFIX}-date-picker__panel--open`);
613
643
  panel.style.display = "block";
614
644
  render();
615
645
  }
616
646
  function close() {
617
647
  isOpen = false;
618
- panel.classList.remove("ina-date-picker__panel--open");
648
+ panel.classList.remove(`${PREFIX}-date-picker__panel--open`);
619
649
  panel.style.display = "none";
620
650
  }
621
651
  function toggle() {
@@ -1055,41 +1085,43 @@ var InaUI = (() => {
1055
1085
 
1056
1086
  // src/js/components/stateful/timepicker.js
1057
1087
  function initTimepicker() {
1058
- document.querySelectorAll(".ina-time-picker").forEach((picker) => {
1088
+ document.querySelectorAll(`.${PREFIX}-time-picker`).forEach((picker) => {
1059
1089
  if (picker.dataset.initialized === "true") return;
1060
1090
  picker.dataset.initialized = "true";
1061
- const input = picker.querySelector(".ina-time-picker__input");
1062
- const wrapper = picker.querySelector(".ina-time-picker__wrapper");
1091
+ const input = picker.querySelector(`.${PREFIX}-time-picker__input`);
1092
+ const wrapper = picker.querySelector(`.${PREFIX}-time-picker__wrapper`);
1063
1093
  if (!input || !wrapper) return;
1064
1094
  const format = picker.dataset.format || "HH:mm";
1065
1095
  const use12Hours = picker.dataset.use12Hours === "true" || picker.getAttribute("data-use-12-hours") === "true" || /a/i.test(format);
1066
1096
  const showSecond = picker.dataset.showSecond === "true";
1067
- const disabled = picker.classList.contains("ina-time-picker--disabled");
1097
+ const disabled = picker.classList.contains(
1098
+ `${PREFIX}-time-picker--disabled`
1099
+ );
1068
1100
  const allowClear = picker.dataset.allowClear !== "false";
1069
1101
  let isOpen = false;
1070
1102
  let internalValue = input.value || "";
1071
- let panel = picker.querySelector(".ina-time-picker__panel");
1103
+ let panel = picker.querySelector(`.${PREFIX}-time-picker__panel`);
1072
1104
  if (!panel) {
1073
1105
  panel = document.createElement("div");
1074
- panel.className = "ina-time-picker__panel";
1106
+ panel.className = `${PREFIX}-time-picker__panel`;
1075
1107
  panel.style.display = "none";
1076
1108
  picker.appendChild(panel);
1077
1109
  }
1078
- let content = panel.querySelector(".ina-time-picker__content");
1110
+ let content = panel.querySelector(`.${PREFIX}-time-picker__content`);
1079
1111
  if (!content) {
1080
1112
  content = document.createElement("div");
1081
- content.className = "ina-time-picker__content";
1113
+ content.className = `${PREFIX}-time-picker__content`;
1082
1114
  panel.appendChild(content);
1083
1115
  } else {
1084
1116
  content.innerHTML = "";
1085
1117
  }
1086
- let actions = panel.querySelector(".ina-time-picker__actions");
1118
+ let actions = panel.querySelector(`.${PREFIX}-time-picker__actions`);
1087
1119
  if (!actions) {
1088
1120
  actions = document.createElement("div");
1089
- actions.className = "ina-time-picker__actions";
1121
+ actions.className = `${PREFIX}-time-picker__actions`;
1090
1122
  const confirmBtn = document.createElement("button");
1091
1123
  confirmBtn.type = "button";
1092
- confirmBtn.className = "ina-time-picker__confirm-button";
1124
+ confirmBtn.className = `${PREFIX}-time-picker__confirm-button`;
1093
1125
  confirmBtn.textContent = "Pilih";
1094
1126
  confirmBtn.onclick = (e) => {
1095
1127
  e.stopPropagation();
@@ -1137,15 +1169,15 @@ var InaUI = (() => {
1137
1169
  let currentTime = parseTime(internalValue);
1138
1170
  const renderColumn = (type, max) => {
1139
1171
  const column = document.createElement("div");
1140
- column.className = `ina-time-picker__column ina-time-picker__column--${type}`;
1172
+ column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--${type}`;
1141
1173
  const colContent = document.createElement("div");
1142
- colContent.className = "ina-time-picker__column-content";
1174
+ colContent.className = `${PREFIX}-time-picker__column-content`;
1143
1175
  column.appendChild(colContent);
1144
1176
  const start = type === "hour" && use12Hours ? 1 : 0;
1145
1177
  const end = type === "hour" && use12Hours ? 12 : max - 1;
1146
1178
  for (let i = start; i <= end; i++) {
1147
1179
  const option = document.createElement("div");
1148
- option.className = "ina-time-picker__option";
1180
+ option.className = `${PREFIX}-time-picker__option`;
1149
1181
  option.textContent = i.toString().padStart(2, "0");
1150
1182
  option.dataset.value = i;
1151
1183
  let isSelected = false;
@@ -1154,7 +1186,7 @@ var InaUI = (() => {
1154
1186
  } else if (type === "minute") isSelected = currentTime.minutes === i;
1155
1187
  else if (type === "second") isSelected = currentTime.seconds === i;
1156
1188
  if (isSelected)
1157
- option.classList.add("ina-time-picker__option--selected");
1189
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1158
1190
  option.addEventListener("click", (e) => {
1159
1191
  e.stopPropagation();
1160
1192
  const val = parseInt(option.dataset.value, 10);
@@ -1164,10 +1196,10 @@ var InaUI = (() => {
1164
1196
  if (type === "minute") currentTime.minutes = val;
1165
1197
  if (type === "second") currentTime.seconds = val;
1166
1198
  updateInput();
1167
- colContent.querySelectorAll(".ina-time-picker__option").forEach(
1168
- (el) => el.classList.remove("ina-time-picker__option--selected")
1199
+ colContent.querySelectorAll(`.${PREFIX}-time-picker__option`).forEach(
1200
+ (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
1169
1201
  );
1170
- option.classList.add("ina-time-picker__option--selected");
1202
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1171
1203
  });
1172
1204
  colContent.appendChild(option);
1173
1205
  }
@@ -1175,24 +1207,24 @@ var InaUI = (() => {
1175
1207
  };
1176
1208
  const renderPeriodColumn = () => {
1177
1209
  const column = document.createElement("div");
1178
- column.className = `ina-time-picker__column ina-time-picker__column--period`;
1210
+ column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--period`;
1179
1211
  const colContent = document.createElement("div");
1180
- colContent.className = "ina-time-picker__column-content";
1212
+ colContent.className = `${PREFIX}-time-picker__column-content`;
1181
1213
  column.appendChild(colContent);
1182
1214
  ["AM", "PM"].forEach((p) => {
1183
1215
  const option = document.createElement("div");
1184
- option.className = "ina-time-picker__option";
1216
+ option.className = `${PREFIX}-time-picker__option`;
1185
1217
  option.textContent = p;
1186
1218
  if (currentTime.period === p)
1187
- option.classList.add("ina-time-picker__option--selected");
1219
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1188
1220
  option.addEventListener("click", (e) => {
1189
1221
  e.stopPropagation();
1190
1222
  currentTime.period = p;
1191
1223
  updateInput();
1192
- colContent.querySelectorAll(".ina-time-picker__option").forEach(
1193
- (el) => el.classList.remove("ina-time-picker__option--selected")
1224
+ colContent.querySelectorAll(`.${PREFIX}-time-picker__option`).forEach(
1225
+ (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
1194
1226
  );
1195
- option.classList.add("ina-time-picker__option--selected");
1227
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1196
1228
  });
1197
1229
  colContent.appendChild(option);
1198
1230
  });
@@ -1219,7 +1251,7 @@ var InaUI = (() => {
1219
1251
  const open = () => {
1220
1252
  if (disabled) return;
1221
1253
  isOpen = true;
1222
- picker.classList.add("ina-time-picker--open");
1254
+ picker.classList.add(`${PREFIX}-time-picker--open`);
1223
1255
  panel.style.display = "block";
1224
1256
  currentTime = parseTime(input.value);
1225
1257
  buildPanel();
@@ -1229,7 +1261,7 @@ var InaUI = (() => {
1229
1261
  };
1230
1262
  const close = () => {
1231
1263
  isOpen = false;
1232
- picker.classList.remove("ina-time-picker--open");
1264
+ picker.classList.remove(`${PREFIX}-time-picker--open`);
1233
1265
  panel.style.display = "none";
1234
1266
  };
1235
1267
  const toggle = (e) => {
@@ -1246,7 +1278,9 @@ var InaUI = (() => {
1246
1278
  document.addEventListener("closeTimePicker", (e) => {
1247
1279
  if (e.detail && e.detail.exclude !== picker) close();
1248
1280
  });
1249
- const clearBtn = picker.querySelector(".ina-time-picker__clear-button");
1281
+ const clearBtn = picker.querySelector(
1282
+ `.${PREFIX}-time-picker__clear-button`
1283
+ );
1250
1284
  if (clearBtn && allowClear) {
1251
1285
  clearBtn.addEventListener("click", (e) => {
1252
1286
  e.stopPropagation();
@@ -1260,7 +1294,7 @@ var InaUI = (() => {
1260
1294
  }
1261
1295
 
1262
1296
  // src/js/index.js
1263
- var PREFIX = "ina-ss";
1297
+ var PREFIX = "ina";
1264
1298
 
1265
1299
  // src/js/components/stateful/button-group.js
1266
1300
  function initButtonGroup(rootSelector = `.${PREFIX}-btn-group`) {
package/dist/index.js CHANGED
@@ -74,7 +74,7 @@ function initToggle(rootSelector = `.${PREFIX}-toggle`) {
74
74
  function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
75
75
  const accordionGroups = document.querySelectorAll(rootSelector);
76
76
  accordionGroups.forEach((group) => {
77
- const isMultiple = group.dataset.multipleOpen === "true" || group.dataset.behavior === "multiple";
77
+ const isMultiple = group.getAttribute("data-multiple-open") === "true" || group.getAttribute("data-behavior") === "multiple";
78
78
  const accordions = group.querySelectorAll(`:scope > .${PREFIX}-accordion`);
79
79
  accordions.forEach((accordion, _index) => {
80
80
  const toggle = accordion.querySelector(`.${PREFIX}-accordion__toggle`);
@@ -139,6 +139,9 @@ function openItem(accordion, toggle, body) {
139
139
  const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
140
140
  if (icon) icon.classList.add(`${PREFIX}-accordion__icon--open`);
141
141
  body.classList.add(`${PREFIX}-accordion__content--open`);
142
+ if (body) {
143
+ body.style.maxHeight = `${body.scrollHeight}px`;
144
+ }
142
145
  }
143
146
  function closeItem(accordion, toggle, body) {
144
147
  accordion.classList.remove(`${PREFIX}-accordion--open`);
@@ -146,30 +149,41 @@ function closeItem(accordion, toggle, body) {
146
149
  const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
147
150
  if (icon) icon.classList.remove(`${PREFIX}-accordion__icon--open`);
148
151
  body.classList.remove(`${PREFIX}-accordion__content--open`);
152
+ if (body) {
153
+ body.style.maxHeight = null;
154
+ }
149
155
  }
150
156
 
151
157
  // src/js/components/stateful/datepicker.js
152
158
  function initDatepicker() {
153
- document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
159
+ document.querySelectorAll(`.${PREFIX}-date-picker`).forEach((datepicker) => {
154
160
  if (datepicker.dataset.initialized === "true") return;
155
161
  datepicker.dataset.initialized = "true";
156
162
  const mode = datepicker.dataset.mode || "single";
157
163
  const format = datepicker.dataset.format || "DD/MM/YYYY";
158
- const trigger = datepicker.querySelector(".ina-date-picker__trigger");
159
- const triggerText = trigger.querySelector(".ina-date-picker__trigger-text");
160
- const panel = datepicker.querySelector(".ina-date-picker__panel");
164
+ const trigger = datepicker.querySelector(`.${PREFIX}-date-picker__trigger`);
165
+ const triggerText = trigger.querySelector(
166
+ `.${PREFIX}-date-picker__trigger-text`
167
+ );
168
+ const panel = datepicker.querySelector(`.${PREFIX}-date-picker__panel`);
161
169
  panel.style.display = "none";
162
- let panelContent = panel.querySelector(".ina-date-picker__panel-content");
170
+ let panelContent = panel.querySelector(
171
+ `.${PREFIX}-date-picker__panel-content`
172
+ );
163
173
  if (!panelContent) {
164
174
  panelContent = document.createElement("div");
165
- panelContent.className = "ina-date-picker__panel-content";
175
+ panelContent.className = `${PREFIX}-date-picker__panel-content`;
166
176
  if (mode === "range" || mode === "multiple") {
167
- panelContent.classList.add("ina-date-picker__panel-content--dual");
177
+ panelContent.classList.add(
178
+ `${PREFIX}-date-picker__panel-content--dual`
179
+ );
168
180
  }
169
181
  panel.appendChild(panelContent);
170
182
  } else {
171
183
  if (mode === "range" || mode === "multiple") {
172
- panelContent.classList.add("ina-date-picker__panel-content--dual");
184
+ panelContent.classList.add(
185
+ `${PREFIX}-date-picker__panel-content--dual`
186
+ );
173
187
  }
174
188
  }
175
189
  let viewDate = /* @__PURE__ */ new Date();
@@ -217,15 +231,19 @@ function initDatepicker() {
217
231
  if (mode === "single") {
218
232
  if (selectedDate) {
219
233
  triggerText.textContent = formatDate(selectedDate);
220
- triggerText.classList.add("ina-date-picker__trigger-text--value");
234
+ triggerText.classList.add(
235
+ `${PREFIX}-date-picker__trigger-text--value`
236
+ );
221
237
  triggerText.classList.remove(
222
- "ina-date-picker__trigger-text--placeholder"
238
+ `${PREFIX}-date-picker__trigger-text--placeholder`
223
239
  );
224
240
  } else {
225
241
  triggerText.textContent = "Pilih Tanggal";
226
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
242
+ triggerText.classList.remove(
243
+ `${PREFIX}-date-picker__trigger-text--value`
244
+ );
227
245
  triggerText.classList.add(
228
- "ina-date-picker__trigger-text--placeholder"
246
+ `${PREFIX}-date-picker__trigger-text--placeholder`
229
247
  );
230
248
  }
231
249
  } else if (mode === "range") {
@@ -233,32 +251,42 @@ function initDatepicker() {
233
251
  const start = formatDate(rangeDate[0]);
234
252
  const end = formatDate(rangeDate[1]);
235
253
  triggerText.textContent = `${start} - ${end}`;
236
- triggerText.classList.add("ina-date-picker__trigger-text--value");
254
+ triggerText.classList.add(
255
+ `${PREFIX}-date-picker__trigger-text--value`
256
+ );
237
257
  triggerText.classList.remove(
238
- "ina-date-picker__trigger-text--placeholder"
258
+ `${PREFIX}-date-picker__trigger-text--placeholder`
239
259
  );
240
260
  } else if (rangeDate[0]) {
241
261
  triggerText.textContent = `${formatDate(rangeDate[0])} - ...`;
242
- triggerText.classList.add("ina-date-picker__trigger-text--value");
262
+ triggerText.classList.add(
263
+ `${PREFIX}-date-picker__trigger-text--value`
264
+ );
243
265
  } else {
244
266
  triggerText.textContent = "Pilih Rentang Tanggal";
245
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
267
+ triggerText.classList.remove(
268
+ `${PREFIX}-date-picker__trigger-text--value`
269
+ );
246
270
  triggerText.classList.add(
247
- "ina-date-picker__trigger-text--placeholder"
271
+ `${PREFIX}-date-picker__trigger-text--placeholder`
248
272
  );
249
273
  }
250
274
  } else if (mode === "multiple") {
251
275
  if (selectedDates.length > 0) {
252
276
  triggerText.textContent = `${selectedDates.length} Tanggal Terpilih`;
253
- triggerText.classList.add("ina-date-picker__trigger-text--value");
277
+ triggerText.classList.add(
278
+ `${PREFIX}-date-picker__trigger-text--value`
279
+ );
254
280
  triggerText.classList.remove(
255
- "ina-date-picker__trigger-text--placeholder"
281
+ `${PREFIX}-date-picker__trigger-text--placeholder`
256
282
  );
257
283
  } else {
258
284
  triggerText.textContent = "Pilih Beberapa Tanggal";
259
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
285
+ triggerText.classList.remove(
286
+ `${PREFIX}-date-picker__trigger-text--value`
287
+ );
260
288
  triggerText.classList.add(
261
- "ina-date-picker__trigger-text--placeholder"
289
+ `${PREFIX}-date-picker__trigger-text--placeholder`
262
290
  );
263
291
  }
264
292
  }
@@ -272,26 +300,26 @@ function initDatepicker() {
272
300
  }
273
301
  function createMonthPicker(initialMonth, onChange) {
274
302
  const container = document.createElement("div");
275
- container.className = "ina-month-picker";
303
+ container.className = `${PREFIX}-month-picker`;
276
304
  let currentMonthIdx = initialMonth;
277
305
  let isPickerOpen = false;
278
306
  const pickerTrigger = document.createElement("button");
279
307
  pickerTrigger.type = "button";
280
- pickerTrigger.className = "ina-month-picker__trigger ina-month-picker__trigger--size-sm";
308
+ pickerTrigger.className = `${PREFIX}-month-picker__trigger ${PREFIX}-month-picker__trigger--size-sm`;
281
309
  const updateText = () => {
282
- pickerTrigger.innerHTML = `<span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
310
+ pickerTrigger.innerHTML = `<span class="${PREFIX}-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
283
311
  };
284
312
  updateText();
285
313
  const pickerPanel = document.createElement("div");
286
- pickerPanel.className = "ina-month-picker__panel";
314
+ pickerPanel.className = `${PREFIX}-month-picker__panel`;
287
315
  const grid = document.createElement("div");
288
- grid.className = "ina-month-picker__grid";
316
+ grid.className = `${PREFIX}-month-picker__grid`;
289
317
  MONTHS_SHORT_ID.forEach((m, idx) => {
290
318
  const btn = document.createElement("button");
291
319
  btn.type = "button";
292
- btn.className = "ina-month-picker__month-option";
320
+ btn.className = `${PREFIX}-month-picker__month-option`;
293
321
  if (idx === currentMonthIdx)
294
- btn.classList.add("ina-month-picker__month-option--selected");
322
+ btn.classList.add(`${PREFIX}-month-picker__month-option--selected`);
295
323
  btn.textContent = m;
296
324
  btn.addEventListener("click", (e) => {
297
325
  e.stopPropagation();
@@ -310,10 +338,10 @@ function initDatepicker() {
310
338
  function togglePicker(show) {
311
339
  isPickerOpen = show;
312
340
  if (show) {
313
- pickerPanel.classList.add("ina-month-picker__panel--open");
341
+ pickerPanel.classList.add(`${PREFIX}-month-picker__panel--open`);
314
342
  pickerTrigger.setAttribute("aria-expanded", "true");
315
343
  } else {
316
- pickerPanel.classList.remove("ina-month-picker__panel--open");
344
+ pickerPanel.classList.remove(`${PREFIX}-month-picker__panel--open`);
317
345
  pickerTrigger.setAttribute("aria-expanded", "false");
318
346
  }
319
347
  }
@@ -330,24 +358,24 @@ function initDatepicker() {
330
358
  }
331
359
  function createYearPicker(initialYear, onChange) {
332
360
  const container = document.createElement("div");
333
- container.className = "ina-year-picker";
361
+ container.className = `${PREFIX}-year-picker`;
334
362
  let currentYearVal = initialYear;
335
363
  let isPickerOpen = false;
336
364
  let decadeStart = Math.floor(initialYear / 20) * 20;
337
365
  const pickerTrigger = document.createElement("button");
338
366
  pickerTrigger.type = "button";
339
- pickerTrigger.className = "ina-year-picker__trigger ina-year-picker__trigger--size-sm";
367
+ pickerTrigger.className = `${PREFIX}-year-picker__trigger ${PREFIX}-year-picker__trigger--size-sm`;
340
368
  const updateText = () => {
341
- pickerTrigger.innerHTML = `<span class="ina-year-picker__trigger-text">${currentYearVal}</span>`;
369
+ pickerTrigger.innerHTML = `<span class="${PREFIX}-year-picker__trigger-text">${currentYearVal}</span>`;
342
370
  };
343
371
  updateText();
344
372
  const pickerPanel = document.createElement("div");
345
- pickerPanel.className = "ina-year-picker__panel";
373
+ pickerPanel.className = `${PREFIX}-year-picker__panel`;
346
374
  const header = document.createElement("div");
347
- header.className = "ina-year-picker__header";
375
+ header.className = `${PREFIX}-year-picker__header`;
348
376
  const prevBtn = document.createElement("button");
349
377
  prevBtn.type = "button";
350
- prevBtn.className = "ina-year-picker__nav-button";
378
+ prevBtn.className = `${PREFIX}-year-picker__nav-button`;
351
379
  prevBtn.innerHTML = createIcon("chevron-left");
352
380
  prevBtn.onclick = (e) => {
353
381
  decadeStart -= 20;
@@ -355,26 +383,26 @@ function initDatepicker() {
355
383
  };
356
384
  const nextBtn = document.createElement("button");
357
385
  nextBtn.type = "button";
358
- nextBtn.className = "ina-year-picker__nav-button";
386
+ nextBtn.className = `${PREFIX}-year-picker__nav-button`;
359
387
  nextBtn.innerHTML = createIcon("chevron-right");
360
388
  nextBtn.onclick = (e) => {
361
389
  decadeStart += 20;
362
390
  renderGrid();
363
391
  };
364
392
  const rangeText = document.createElement("span");
365
- rangeText.className = "ina-year-picker__decade-range";
393
+ rangeText.className = `${PREFIX}-year-picker__decade-range`;
366
394
  header.append(prevBtn, rangeText, nextBtn);
367
395
  const grid = document.createElement("div");
368
- grid.className = "ina-year-picker__grid";
396
+ grid.className = `${PREFIX}-year-picker__grid`;
369
397
  function renderGrid() {
370
398
  grid.innerHTML = "";
371
399
  rangeText.textContent = `${decadeStart} - ${decadeStart + 19}`;
372
400
  for (let y = decadeStart; y < decadeStart + 20; y++) {
373
401
  const btn = document.createElement("button");
374
402
  btn.type = "button";
375
- btn.className = "ina-year-picker__year-option";
403
+ btn.className = `${PREFIX}-year-picker__year-option`;
376
404
  if (y === currentYearVal)
377
- btn.classList.add("ina-year-picker__year-option--selected");
405
+ btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
378
406
  btn.textContent = y;
379
407
  btn.addEventListener("click", (e) => {
380
408
  e.stopPropagation();
@@ -396,9 +424,9 @@ function initDatepicker() {
396
424
  if (show) {
397
425
  decadeStart = Math.floor(currentYearVal / 20) * 20;
398
426
  renderGrid();
399
- pickerPanel.classList.add("ina-year-picker__panel--open");
427
+ pickerPanel.classList.add(`${PREFIX}-year-picker__panel--open`);
400
428
  } else {
401
- pickerPanel.classList.remove("ina-year-picker__panel--open");
429
+ pickerPanel.classList.remove(`${PREFIX}-year-picker__panel--open`);
402
430
  }
403
431
  }
404
432
  document.addEventListener("click", (e) => {
@@ -417,16 +445,16 @@ function initDatepicker() {
417
445
  const month = baseDate.getMonth();
418
446
  const container = document.createElement("div");
419
447
  if (!isNextMonth) {
420
- container.className = "ina-date-picker__calendar-container";
448
+ container.className = `${PREFIX}-date-picker__calendar-container`;
421
449
  } else {
422
- container.className = "ina-date-picker__calendar";
450
+ container.className = `${PREFIX}-date-picker__calendar`;
423
451
  }
424
452
  const header = document.createElement("div");
425
- header.className = isNextMonth ? "ina-date-picker__next-month-header" : "ina-date-picker__calendar-header";
453
+ header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
426
454
  if (!isNextMonth) {
427
455
  const prevBtn = document.createElement("button");
428
456
  prevBtn.type = "button";
429
- prevBtn.className = "ina-date-picker__nav-button";
457
+ prevBtn.className = `${PREFIX}-date-picker__nav-button`;
430
458
  prevBtn.innerHTML = createIcon("chevron-left");
431
459
  prevBtn.onclick = (e) => {
432
460
  e.stopPropagation();
@@ -440,10 +468,10 @@ function initDatepicker() {
440
468
  header.appendChild(spacer);
441
469
  }
442
470
  const controls = document.createElement("div");
443
- controls.className = isNextMonth ? "ina-date-picker__next-month-controls" : "ina-date-picker__header-controls";
444
- controls.className = "ina-date-picker__header-controls";
471
+ controls.className = isNextMonth ? `${PREFIX}-date-picker__next-month-controls` : `${PREFIX}-date-picker__header-controls`;
472
+ controls.className = `${PREFIX}-date-picker__header-controls`;
445
473
  const monthCont = document.createElement("div");
446
- monthCont.className = "ina-date-picker__dropdown-container";
474
+ monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
447
475
  const monthPicker = createMonthPicker(month, (m) => {
448
476
  if (isNextMonth) {
449
477
  viewDate = new Date(year, m - 1, 1);
@@ -454,7 +482,7 @@ function initDatepicker() {
454
482
  });
455
483
  monthCont.appendChild(monthPicker.element);
456
484
  const yearCont = document.createElement("div");
457
- yearCont.className = "ina-date-picker__dropdown-container";
485
+ yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
458
486
  const yearPicker = createYearPicker(year, (y) => {
459
487
  if (isNextMonth) {
460
488
  viewDate = new Date(y, month - 1, 1);
@@ -470,7 +498,7 @@ function initDatepicker() {
470
498
  if (showNextBtn) {
471
499
  const nextBtn = document.createElement("button");
472
500
  nextBtn.type = "button";
473
- nextBtn.className = "ina-date-picker__nav-button";
501
+ nextBtn.className = `${PREFIX}-date-picker__nav-button`;
474
502
  nextBtn.innerHTML = createIcon("chevron-right");
475
503
  nextBtn.onclick = (e) => {
476
504
  e.stopPropagation();
@@ -484,10 +512,10 @@ function initDatepicker() {
484
512
  header.appendChild(spacer);
485
513
  }
486
514
  const grid = document.createElement("div");
487
- grid.className = "ina-date-picker__calendar-grid";
515
+ grid.className = `${PREFIX}-date-picker__calendar-grid`;
488
516
  DAYS_SHORT.forEach((d) => {
489
517
  const dh = document.createElement("div");
490
- dh.className = "ina-date-picker__day-header";
518
+ dh.className = `${PREFIX}-date-picker__day-header`;
491
519
  dh.textContent = d;
492
520
  grid.appendChild(dh);
493
521
  });
@@ -498,7 +526,7 @@ function initDatepicker() {
498
526
  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
499
527
  const btn = document.createElement("button");
500
528
  btn.type = "button";
501
- btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
529
+ btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
502
530
  btn.textContent = daysInPrevMonth - i;
503
531
  grid.appendChild(btn);
504
532
  }
@@ -506,7 +534,7 @@ function initDatepicker() {
506
534
  const date = new Date(year, month, i);
507
535
  const btn = document.createElement("button");
508
536
  btn.type = "button";
509
- btn.className = "ina-date-picker__day";
537
+ btn.className = `${PREFIX}-date-picker__day`;
510
538
  btn.textContent = i;
511
539
  let isSelected = false;
512
540
  let isInRange = false;
@@ -524,12 +552,14 @@ function initDatepicker() {
524
552
  isSelected = true;
525
553
  if (start && end && date > start && date < end) isInRange = true;
526
554
  }
527
- if (isSelected) btn.classList.add("ina-date-picker__day--selected");
528
- if (isInRange) btn.classList.add("ina-date-picker__day--in-range");
555
+ if (isSelected)
556
+ btn.classList.add(`${PREFIX}-date-picker__day--selected`);
557
+ if (isInRange)
558
+ btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
529
559
  if (date.toDateString() === today.toDateString())
530
- btn.classList.add("ina-date-picker__day--today");
560
+ btn.classList.add(`${PREFIX}-date-picker__day--today`);
531
561
  if (!isSelected && !isInRange)
532
- btn.classList.add("ina-date-picker__day--hover");
562
+ btn.classList.add(`${PREFIX}-date-picker__day--hover`);
533
563
  btn.onclick = (e) => {
534
564
  e.stopPropagation();
535
565
  if (mode === "single") {
@@ -574,7 +604,7 @@ function initDatepicker() {
574
604
  for (let i = 1; i <= remaining; i++) {
575
605
  const btn = document.createElement("button");
576
606
  btn.type = "button";
577
- btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
607
+ btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
578
608
  btn.textContent = i;
579
609
  grid.appendChild(btn);
580
610
  }
@@ -597,13 +627,13 @@ function initDatepicker() {
597
627
  }
598
628
  function open() {
599
629
  isOpen = true;
600
- panel.classList.add("ina-date-picker__panel--open");
630
+ panel.classList.add(`${PREFIX}-date-picker__panel--open`);
601
631
  panel.style.display = "block";
602
632
  render();
603
633
  }
604
634
  function close() {
605
635
  isOpen = false;
606
- panel.classList.remove("ina-date-picker__panel--open");
636
+ panel.classList.remove(`${PREFIX}-date-picker__panel--open`);
607
637
  panel.style.display = "none";
608
638
  }
609
639
  function toggle() {
@@ -1379,41 +1409,43 @@ function initRangeDatepicker() {
1379
1409
 
1380
1410
  // src/js/components/stateful/timepicker.js
1381
1411
  function initTimepicker() {
1382
- document.querySelectorAll(".ina-time-picker").forEach((picker) => {
1412
+ document.querySelectorAll(`.${PREFIX}-time-picker`).forEach((picker) => {
1383
1413
  if (picker.dataset.initialized === "true") return;
1384
1414
  picker.dataset.initialized = "true";
1385
- const input = picker.querySelector(".ina-time-picker__input");
1386
- const wrapper = picker.querySelector(".ina-time-picker__wrapper");
1415
+ const input = picker.querySelector(`.${PREFIX}-time-picker__input`);
1416
+ const wrapper = picker.querySelector(`.${PREFIX}-time-picker__wrapper`);
1387
1417
  if (!input || !wrapper) return;
1388
1418
  const format = picker.dataset.format || "HH:mm";
1389
1419
  const use12Hours = picker.dataset.use12Hours === "true" || picker.getAttribute("data-use-12-hours") === "true" || /a/i.test(format);
1390
1420
  const showSecond = picker.dataset.showSecond === "true";
1391
- const disabled = picker.classList.contains("ina-time-picker--disabled");
1421
+ const disabled = picker.classList.contains(
1422
+ `${PREFIX}-time-picker--disabled`
1423
+ );
1392
1424
  const allowClear = picker.dataset.allowClear !== "false";
1393
1425
  let isOpen = false;
1394
1426
  let internalValue = input.value || "";
1395
- let panel = picker.querySelector(".ina-time-picker__panel");
1427
+ let panel = picker.querySelector(`.${PREFIX}-time-picker__panel`);
1396
1428
  if (!panel) {
1397
1429
  panel = document.createElement("div");
1398
- panel.className = "ina-time-picker__panel";
1430
+ panel.className = `${PREFIX}-time-picker__panel`;
1399
1431
  panel.style.display = "none";
1400
1432
  picker.appendChild(panel);
1401
1433
  }
1402
- let content = panel.querySelector(".ina-time-picker__content");
1434
+ let content = panel.querySelector(`.${PREFIX}-time-picker__content`);
1403
1435
  if (!content) {
1404
1436
  content = document.createElement("div");
1405
- content.className = "ina-time-picker__content";
1437
+ content.className = `${PREFIX}-time-picker__content`;
1406
1438
  panel.appendChild(content);
1407
1439
  } else {
1408
1440
  content.innerHTML = "";
1409
1441
  }
1410
- let actions = panel.querySelector(".ina-time-picker__actions");
1442
+ let actions = panel.querySelector(`.${PREFIX}-time-picker__actions`);
1411
1443
  if (!actions) {
1412
1444
  actions = document.createElement("div");
1413
- actions.className = "ina-time-picker__actions";
1445
+ actions.className = `${PREFIX}-time-picker__actions`;
1414
1446
  const confirmBtn = document.createElement("button");
1415
1447
  confirmBtn.type = "button";
1416
- confirmBtn.className = "ina-time-picker__confirm-button";
1448
+ confirmBtn.className = `${PREFIX}-time-picker__confirm-button`;
1417
1449
  confirmBtn.textContent = "Pilih";
1418
1450
  confirmBtn.onclick = (e) => {
1419
1451
  e.stopPropagation();
@@ -1461,15 +1493,15 @@ function initTimepicker() {
1461
1493
  let currentTime = parseTime(internalValue);
1462
1494
  const renderColumn = (type, max) => {
1463
1495
  const column = document.createElement("div");
1464
- column.className = `ina-time-picker__column ina-time-picker__column--${type}`;
1496
+ column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--${type}`;
1465
1497
  const colContent = document.createElement("div");
1466
- colContent.className = "ina-time-picker__column-content";
1498
+ colContent.className = `${PREFIX}-time-picker__column-content`;
1467
1499
  column.appendChild(colContent);
1468
1500
  const start = type === "hour" && use12Hours ? 1 : 0;
1469
1501
  const end = type === "hour" && use12Hours ? 12 : max - 1;
1470
1502
  for (let i = start; i <= end; i++) {
1471
1503
  const option = document.createElement("div");
1472
- option.className = "ina-time-picker__option";
1504
+ option.className = `${PREFIX}-time-picker__option`;
1473
1505
  option.textContent = i.toString().padStart(2, "0");
1474
1506
  option.dataset.value = i;
1475
1507
  let isSelected = false;
@@ -1478,7 +1510,7 @@ function initTimepicker() {
1478
1510
  } else if (type === "minute") isSelected = currentTime.minutes === i;
1479
1511
  else if (type === "second") isSelected = currentTime.seconds === i;
1480
1512
  if (isSelected)
1481
- option.classList.add("ina-time-picker__option--selected");
1513
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1482
1514
  option.addEventListener("click", (e) => {
1483
1515
  e.stopPropagation();
1484
1516
  const val = parseInt(option.dataset.value, 10);
@@ -1488,10 +1520,10 @@ function initTimepicker() {
1488
1520
  if (type === "minute") currentTime.minutes = val;
1489
1521
  if (type === "second") currentTime.seconds = val;
1490
1522
  updateInput();
1491
- colContent.querySelectorAll(".ina-time-picker__option").forEach(
1492
- (el) => el.classList.remove("ina-time-picker__option--selected")
1523
+ colContent.querySelectorAll(`.${PREFIX}-time-picker__option`).forEach(
1524
+ (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
1493
1525
  );
1494
- option.classList.add("ina-time-picker__option--selected");
1526
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1495
1527
  });
1496
1528
  colContent.appendChild(option);
1497
1529
  }
@@ -1499,24 +1531,24 @@ function initTimepicker() {
1499
1531
  };
1500
1532
  const renderPeriodColumn = () => {
1501
1533
  const column = document.createElement("div");
1502
- column.className = `ina-time-picker__column ina-time-picker__column--period`;
1534
+ column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--period`;
1503
1535
  const colContent = document.createElement("div");
1504
- colContent.className = "ina-time-picker__column-content";
1536
+ colContent.className = `${PREFIX}-time-picker__column-content`;
1505
1537
  column.appendChild(colContent);
1506
1538
  ["AM", "PM"].forEach((p) => {
1507
1539
  const option = document.createElement("div");
1508
- option.className = "ina-time-picker__option";
1540
+ option.className = `${PREFIX}-time-picker__option`;
1509
1541
  option.textContent = p;
1510
1542
  if (currentTime.period === p)
1511
- option.classList.add("ina-time-picker__option--selected");
1543
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1512
1544
  option.addEventListener("click", (e) => {
1513
1545
  e.stopPropagation();
1514
1546
  currentTime.period = p;
1515
1547
  updateInput();
1516
- colContent.querySelectorAll(".ina-time-picker__option").forEach(
1517
- (el) => el.classList.remove("ina-time-picker__option--selected")
1548
+ colContent.querySelectorAll(`.${PREFIX}-time-picker__option`).forEach(
1549
+ (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
1518
1550
  );
1519
- option.classList.add("ina-time-picker__option--selected");
1551
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1520
1552
  });
1521
1553
  colContent.appendChild(option);
1522
1554
  });
@@ -1543,7 +1575,7 @@ function initTimepicker() {
1543
1575
  const open = () => {
1544
1576
  if (disabled) return;
1545
1577
  isOpen = true;
1546
- picker.classList.add("ina-time-picker--open");
1578
+ picker.classList.add(`${PREFIX}-time-picker--open`);
1547
1579
  panel.style.display = "block";
1548
1580
  currentTime = parseTime(input.value);
1549
1581
  buildPanel();
@@ -1553,7 +1585,7 @@ function initTimepicker() {
1553
1585
  };
1554
1586
  const close = () => {
1555
1587
  isOpen = false;
1556
- picker.classList.remove("ina-time-picker--open");
1588
+ picker.classList.remove(`${PREFIX}-time-picker--open`);
1557
1589
  panel.style.display = "none";
1558
1590
  };
1559
1591
  const toggle = (e) => {
@@ -1570,7 +1602,9 @@ function initTimepicker() {
1570
1602
  document.addEventListener("closeTimePicker", (e) => {
1571
1603
  if (e.detail && e.detail.exclude !== picker) close();
1572
1604
  });
1573
- const clearBtn = picker.querySelector(".ina-time-picker__clear-button");
1605
+ const clearBtn = picker.querySelector(
1606
+ `.${PREFIX}-time-picker__clear-button`
1607
+ );
1574
1608
  if (clearBtn && allowClear) {
1575
1609
  clearBtn.addEventListener("click", (e) => {
1576
1610
  e.stopPropagation();
@@ -1632,7 +1666,7 @@ if (typeof window !== void 0) {
1632
1666
  }
1633
1667
 
1634
1668
  // src/js/index.js
1635
- var PREFIX = "ina-ss";
1669
+ var PREFIX = "ina";
1636
1670
  function initAll() {
1637
1671
  initAccordion();
1638
1672
  initBanner();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/js",
3
- "version": "1.0.50",
3
+ "version": "1.0.51",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },