@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/web/dropdown/dropdown.svelte

@@ -0,0 +1,844 @@
+<script context="module"></script>
+
+<script>import { onDestroy, onMount } from "svelte";
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  size as floatingSize
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+export let value = void 0;
+export let defaultValue = void 0;
+export let multiple = void 0;
+export let placement = void 0;
+export let disableShift = void 0;
+export let panelContent = void 0;
+export let listStyle = void 0;
+export let disabled = void 0;
+export let readOnly = void 0;
+export let loading = void 0;
+export let searchable = void 0;
+export let onOpen = void 0;
+export let onClose = void 0;
+export let options = void 0;
+export let onSelect = void 0;
+export let onChange = void 0;
+export let closeOnSelect = void 0;
+export let onSearch = void 0;
+export let displayValue = void 0;
+export let className = void 0;
+export let error = void 0;
+export let errorMessage = void 0;
+export let size = void 0;
+export let block = void 0;
+export let ui = void 0;
+export let label = void 0;
+export let labelClass = void 0;
+export let id = void 0;
+export let labelStyle = void 0;
+export let required = void 0;
+export let optional = void 0;
+export let optionalText = void 0;
+export let helperText = void 0;
+export let helperTextPosition = void 0;
+export let helperTextClass = void 0;
+export let helperTextStyle = void 0;
+export let controlClass = void 0;
+export let rounded = void 0;
+export let controlStyle = void 0;
+export let icon = void 0;
+export let placeholder = void 0;
+export let clearable = void 0;
+export let arrow = void 0;
+export let searchPlaceholder = void 0;
+export let listClass = void 0;
+export let resetText = void 0;
+export let applyText = void 0;
+export let errorMessageClass = void 0;
+export let errorMessageStyle = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+function updatePosition() {
+  if (!controlRef || !dropdownRef)
+    return;
+  dropdownRef.style.maxHeight = "";
+  computePosition(controlRef, dropdownRef, {
+    placement: placement || "bottom-start",
+    strategy: "absolute",
+    middleware: [
+      offset(4),
+      flip({
+        fallbackPlacements: [
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end"
+        ],
+        padding: {
+          top: 16,
+          bottom: 16,
+          left: 16,
+          right: 16
+        }
+      }),
+      ...disableShift ? [] : [
+        shift({
+          padding: {
+            top: 16,
+            bottom: 16,
+            left: 16,
+            right: 16
+          }
+        })
+      ],
+      floatingSize({
+        apply({ rects, elements, availableHeight }) {
+          const isPanel = Boolean(panelContent || $$slots.panelContent);
+          const customWidth = listStyle?.width !== void 0 && listStyle?.width !== null && listStyle?.width !== "" ? typeof listStyle.width === "number" || /^\d+(\.\d+)?$/.test(String(listStyle.width).trim()) ? `${String(listStyle.width).trim()}px` : String(listStyle.width) : void 0;
+          const customMaxHeight = listStyle?.maxHeight !== void 0 && listStyle?.maxHeight !== null && listStyle?.maxHeight !== "" ? listStyle.maxHeight === "none" ? "none" : typeof listStyle.maxHeight === "number" || /^\d+(\.\d+)?$/.test(String(listStyle.maxHeight).trim()) ? `${String(listStyle.maxHeight).trim()}px` : String(listStyle.maxHeight) : void 0;
+          Object.assign(elements.floating.style, {
+            width: customWidth || (isPanel ? "auto" : `${rects.reference.width}px`),
+            minWidth: customWidth ? customWidth : isPanel ? "auto" : void 0,
+            maxHeight: customMaxHeight !== void 0 ? customMaxHeight : isPanel ? "none" : `${Math.max(180, Math.min(availableHeight, 360))}px`
+          });
+        },
+        padding: {
+          top: 16,
+          bottom: 16,
+          left: 16,
+          right: 16
+        }
+      })
+    ]
+  }).then(({ x, y, placement: placement2 }) => {
+    if (!dropdownRef)
+      return;
+    dropdownRef.style.position = "absolute";
+    dropdownRef.style.left = `${x}px`;
+    dropdownRef.style.top = `${y}px`;
+    dropdownRef.setAttribute("data-placement", placement2);
+  });
+}
+function startFloating() {
+  stopFloating();
+  if (controlRef && dropdownRef) {
+    cleanupAutoUpdate = autoUpdate(controlRef, dropdownRef, () => {
+      updatePosition();
+    });
+  }
+}
+function stopFloating() {
+  if (typeof cleanupAutoUpdate === "function") {
+    cleanupAutoUpdate();
+    cleanupAutoUpdate = null;
+  }
+}
+function handleClickOutside(event) {
+  if (!dropdownRef)
+    return;
+  const target = event.target;
+  if (rootRef && !rootRef.contains(target) && dropdownRef && !dropdownRef.contains(target)) {
+    closeDropdown();
+  }
+}
+function onPointerDown(event) {
+  handleClickOutside(event);
+}
+function toggleDropdown() {
+  if (disabled || readOnly || loading)
+    return;
+  if (isOpen) {
+    closeDropdown();
+  } else {
+    openDropdown();
+  }
+}
+function openDropdown() {
+  if (disabled || readOnly || loading)
+    return;
+  isOpen = true;
+  searchQuery = "";
+  if (multiple) {
+    tempMultiValue = Array.isArray(currentValue) ? [...currentValue] : [];
+  }
+  setTimeout(() => {
+    startFloating();
+    updatePosition();
+    if (searchable && dropdownRef) {
+      const searchInput = dropdownRef.querySelector?.(
+        ".ttdk-dropdown-search-input"
+      );
+      if (searchInput) {
+        searchInput.focus();
+      }
+    }
+  }, 0);
+  if (onOpen)
+    onOpen();
+}
+function closeDropdown() {
+  stopFloating();
+  isOpen = false;
+  searchQuery = "";
+  if (onClose)
+    onClose();
+}
+function normalizedOptions() {
+  const raw = options;
+  if (!raw || !Array.isArray(raw))
+    return [];
+  return raw.map((opt) => {
+    if (typeof opt === "object" && opt !== null) {
+      return {
+        label: String(opt.label ?? opt.value ?? ""),
+        value: opt.value ?? opt.label ?? "",
+        disabled: Boolean(opt.disabled),
+        icon: opt.icon,
+        description: opt.description,
+        danger: Boolean(opt.danger),
+        divider: Boolean(opt.divider),
+        onClick: opt.onClick
+      };
+    }
+    return {
+      label: String(opt),
+      value: opt,
+      disabled: false,
+      icon: void 0,
+      description: void 0,
+      danger: false,
+      divider: false,
+      onClick: void 0
+    };
+  });
+}
+function filteredOptions(query, _opts) {
+  const opts = normalizedOptions();
+  const currentQ = query !== void 0 ? query : searchQuery;
+  if (!currentQ || !currentQ.trim())
+    return opts;
+  const q = currentQ.toLowerCase().trim();
+  return opts.filter((opt) => {
+    const matchLabel = opt.label && opt.label.toLowerCase().includes(q);
+    const matchDesc = opt.description && opt.description.toLowerCase().includes(q);
+    return matchLabel || matchDesc;
+  });
+}
+function isOptionSelected(optValue, _multi, _curr) {
+  if (multiple) {
+    const list = isOpen ? tempMultiValue : Array.isArray(currentValue) ? currentValue : [];
+    return list.some((v) => String(v) === String(optValue));
+  }
+  return String(currentValue) === String(optValue);
+}
+function handleSingleSelect(opt) {
+  if (opt.disabled || disabled)
+    return;
+  if (opt.onClick) {
+    opt.onClick(opt);
+  }
+  currentValue = opt.value;
+  if (onSelect) {
+    onSelect(opt);
+  }
+  if (onChange) {
+    onChange(opt.value);
+  }
+  if (closeOnSelect !== false) {
+    closeDropdown();
+  }
+}
+function handleMultiToggle(opt) {
+  if (opt.disabled || disabled)
+    return;
+  if (opt.onClick) {
+    opt.onClick(opt);
+  }
+  const index = tempMultiValue.findIndex(
+    (v) => String(v) === String(opt.value)
+  );
+  if (index > -1) {
+    tempMultiValue = tempMultiValue.filter((_, i) => i !== index);
+  } else {
+    tempMultiValue = [...tempMultiValue, opt.value];
+  }
+}
+function handleRemoveTag(val, event) {
+  if (event && event.stopPropagation)
+    event.stopPropagation();
+  if (disabled)
+    return;
+  if (Array.isArray(currentValue)) {
+    const next = currentValue.filter((v) => String(v) !== String(val));
+    currentValue = next;
+    tempMultiValue = [...next];
+    if (onChange) {
+      onChange(next);
+    }
+  }
+}
+function handleApply() {
+  currentValue = [...tempMultiValue];
+  if (onChange) {
+    onChange(currentValue);
+  }
+  closeDropdown();
+}
+function handleReset() {
+  tempMultiValue = [];
+  currentValue = [];
+  if (onChange) {
+    onChange([]);
+  }
+}
+function handleSearchInput(e) {
+  searchQuery = e.target.value;
+  if (onSearch) {
+    onSearch(e.target.value);
+  }
+}
+function getSingleSelectedLabel() {
+  if (displayValue !== void 0 && displayValue !== null && displayValue !== "") {
+    return displayValue;
+  }
+  const opts = normalizedOptions();
+  const match = opts.find(
+    (opt) => String(opt.value) === String(currentValue)
+  );
+  if (match) {
+    return match.label;
+  }
+  if (currentValue !== void 0 && currentValue !== null && currentValue !== "") {
+    return String(currentValue);
+  }
+  return "";
+}
+function getMultiSelectedChips(_curr) {
+  const list = Array.isArray(currentValue) ? currentValue : [];
+  const opts = normalizedOptions();
+  return list.map((val) => {
+    const match = opts.find((o) => String(o.value) === String(val));
+    return {
+      value: val,
+      label: match ? match.label : String(val)
+    };
+  });
+}
+function hasValue() {
+  if (displayValue !== void 0 && displayValue !== null && displayValue !== "") {
+    return true;
+  }
+  if (multiple) {
+    return Array.isArray(currentValue) && currentValue.length > 0;
+  }
+  return currentValue !== void 0 && currentValue !== "" && currentValue !== null;
+}
+function handleClear(event) {
+  if (event && event.stopPropagation)
+    event.stopPropagation();
+  if (disabled || readOnly)
+    return;
+  const emptyVal = multiple ? [] : "";
+  currentValue = emptyVal;
+  tempMultiValue = [];
+  if (onChange) {
+    onChange(emptyVal);
+  }
+}
+let rootRef;
+let controlRef;
+let dropdownRef;
+let isOpen = false;
+let searchQuery = "";
+$:
+  if (value !== void 0) {
+    currentValue = value;
+  }
+$:
+  hasVal = Boolean(
+    displayValue !== void 0 && displayValue !== null && displayValue !== "" || (multiple ? Array.isArray(currentValue) && currentValue.length > 0 : currentValue !== void 0 && currentValue !== "" && currentValue !== null)
+  );
+$:
+  selectedLabel = displayValue !== void 0 && displayValue !== null && displayValue !== "" ? String(displayValue) : (Array.isArray(options) ? options : []).find((o) => String(o.value) === String(currentValue))?.label ?? (currentValue !== void 0 && currentValue !== null && currentValue !== "" ? String(currentValue) : "");
+let currentValue = value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : multiple ? [] : "";
+let tempMultiValue = [];
+let cleanupAutoUpdate = null;
+onMount(() => {
+  if (typeof document !== "undefined") {
+    document.addEventListener(
+      "pointerdown",
+      (e) => onPointerDown(e),
+      true
+    );
+  }
+});
+onDestroy(() => {
+  stopFloating();
+  if (typeof document !== "undefined") {
+    document.removeEventListener(
+      "pointerdown",
+      (e) => onPointerDown(e),
+      true
+    );
+  }
+});
+</script>
+
+<div
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    ...(ui || {}),
+    })}
+  bind:this={rootRef}
+  class={`ttdk-dropdown-wrapper ${className || ""}`.trim()}
+  data-disabled={disabled}
+  data-error={Boolean(error || errorMessage)}
+  data-size={size || "md"}
+  data-block={block ? "true" : undefined}
+>
+  {#if label}
+    <label
+      style={stringifyStyles({
+        ...buildUiVars(labelStyle),
+      })}
+      class={`ttdk-dropdown-label ${labelClass || ""}`.trim()}
+      for={id}
+      ><span>{label}</span>
+      {#if required}
+        <span class="ttdk-dropdown-required" aria-hidden="true"> * </span>
+      {/if}
+      {#if optional}
+        <span class="ttdk-dropdown-optional"
+          >{optionalText || "(Opsional)"}</span
+        >
+      {/if}</label
+    >
+  {/if}
+  {#if helperText && helperTextPosition === "top"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(helperTextStyle),
+      })}
+      class={`ttdk-dropdown-helper-text ${helperTextClass || ""}`.trim()}
+    >
+      {helperText}
+    </div>
+  {/if}
+  <div
+    style={stringifyStyles({
+      ...buildUiVars(controlStyle),
+    })}
+    role="button"
+    aria-haspopup="menu"
+    bind:this={controlRef}
+    class={`ttdk-dropdown-control ${controlClass || ""}`.trim()}
+    {id}
+    tabIndex={disabled ? -1 : 0}
+    aria-expanded={isOpen}
+    aria-disabled={disabled}
+    aria-invalid={Boolean(error || errorMessage)}
+    data-open={isOpen ? "true" : "false"}
+    data-filled={hasVal ? "true" : "false"}
+    data-error={Boolean(error || errorMessage)}
+    data-disabled={Boolean(disabled)}
+    data-size={size || "md"}
+    data-rounded={rounded || "md"}
+    data-custom-trigger={$$slots.default ? "true" : undefined}
+    on:click={(event) => {
+      toggleDropdown();
+    }}
+    on:keydown={(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggleDropdown();
+      } else if (e.key === "Escape") {
+        closeDropdown();
+      }
+    }}
+  >
+    {#if $$slots.default}
+      <slot />
+    {/if}
+    {#if !$$slots.default}
+      <div class="ttdk-dropdown-display">
+        {#if icon}
+          <span class="ttdk-dropdown-leading-icon" aria-hidden="true"
+            >{icon}</span
+          >
+        {/if}
+        {#if multiple && hasVal}
+          <div class="ttdk-dropdown-chips">
+            {#each getMultiSelectedChips(currentValue) as chip (chip.value)}
+              <span class="ttdk-dropdown-chip"
+                ><span class="ttdk-dropdown-chip-text">{chip.label}</span
+                ><button
+                  type="button"
+                  class="ttdk-dropdown-chip-remove"
+                  aria-label={`Hapus ${chip.label}`}
+                  on:click={(e) => {
+                    handleRemoveTag(chip.value, e);
+                  }}
+                  ><svg
+                    class="ttdk-dropdown-chip-remove-icon"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    ><line x1="18" y1="6" x2="6" y2="18" /><line
+                      x1="6"
+                      y1="6"
+                      x2="18"
+                      y2="18"
+                    /></svg
+                  ></button
+                ></span
+              >
+            {/each}
+          </div>
+        {/if}
+        {#if !multiple && hasVal}
+          <span class="ttdk-dropdown-value">{selectedLabel}</span>
+        {/if}
+        {#if !hasVal}
+          <span class="ttdk-dropdown-placeholder"
+            >{placeholder || "Pilih dropdown menu"}</span
+          >
+        {/if}
+      </div>
+
+      {#if clearable && hasVal && !disabled && !readOnly && !loading}
+        <button
+          type="button"
+          class="ttdk-dropdown-clear"
+          aria-label="Hapus pilihan"
+          on:click={(e) => {
+            handleClear(e);
+          }}
+          ><svg class="ttdk-dropdown-clear-icon" viewBox="0 0 24 24" fill="none"
+            ><line x1="18" y1="6" x2="6" y2="18" /><line
+              x1="6"
+              y1="6"
+              x2="18"
+              y2="18"
+            /></svg
+          ></button
+        >
+      {/if}
+
+      {#if loading}
+        <span class="ttdk-dropdown-spinner" aria-hidden="true"
+          ><svg
+            class="ttdk-dropdown-spinner-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            ><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.175"
+              transform="rotate(0 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.25"
+              transform="rotate(30 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.325"
+              transform="rotate(60 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.4"
+              transform="rotate(90 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.475"
+              transform="rotate(120 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.55"
+              transform="rotate(150 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.625"
+              transform="rotate(180 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.7"
+              transform="rotate(210 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.775"
+              transform="rotate(240 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.85"
+              transform="rotate(270 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.925"
+              transform="rotate(300 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="1"
+              transform="rotate(330 12 12)"
+            /></svg
+          ></span
+        >
+      {/if}
+
+      {#if !loading && arrow !== false}
+        <span class="ttdk-dropdown-arrow" data-open={isOpen ? "true" : "false"}
+          ><svg class="ttdk-dropdown-arrow-icon" viewBox="0 0 24 24" fill="none"
+            ><polyline points="6 9 12 15 18 9" /></svg
+          ></span
+        >
+      {/if}
+    {/if}
+  </div>
+  {#if isOpen && !disabled}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(listStyle),
+        ...(listStyle?.width !== undefined &&
+        listStyle?.width !== null &&
+        listStyle?.width !== ""
+          ? {
+              width:
+                typeof listStyle.width === "number" ||
+                /^\d+(\.\d+)?$/.test(String(listStyle.width).trim())
+                  ? `${String(listStyle.width).trim()}px`
+                  : String(listStyle.width),
+              minWidth:
+                typeof listStyle.width === "number" ||
+                /^\d+(\.\d+)?$/.test(String(listStyle.width).trim())
+                  ? `${String(listStyle.width).trim()}px`
+                  : String(listStyle.width),
+            }
+          : {}),
+      })}
+      class="ttdk-dropdown-menu"
+      role="menu"
+      bind:this={dropdownRef}
+    >
+      {#if searchable}
+        <div
+          class="ttdk-dropdown-search"
+          on:click={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <input
+            type="text"
+            class="ttdk-dropdown-search-input"
+            placeholder={searchPlaceholder || "Cari"}
+            value={searchQuery}
+            on:input={(e) => {
+              handleSearchInput(e);
+            }}
+            autoFocus={true}
+          /><span class="ttdk-dropdown-search-icon" aria-hidden="true"
+            ><svg
+              class="ttdk-dropdown-search-svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              ><circle cx="11" cy="11" r="8" /><line
+                x1="21"
+                y1="21"
+                x2="16.65"
+                y2="16.65"
+              /></svg
+            ></span
+          >
+        </div>
+      {/if}
+      {#if panelContent || $$slots.panelContent}
+        <div
+          class="ttdk-dropdown-panel-content"
+          on:click={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          {#if $$slots.panelContent}
+            <slot name="panelContent" close={() => closeDropdown()} />
+          {:else if typeof panelContent === "function"}
+            {panelContent({
+              close: () => closeDropdown(),
+            })}
+          {:else}
+            {panelContent}
+          {/if}
+        </div>
+      {/if}
+      {#if !panelContent && !$$slots.panelContent}
+        <div class="ttdk-dropdown-options-list" role="presentation">
+          {#each filteredOptions(searchQuery, options) as opt (opt.value)}
+            <div>
+              {#if opt.divider}
+                <div class="ttdk-dropdown-divider" role="separator" />
+              {/if}
+              <div
+                class={`ttdk-dropdown-option ${listClass || ""}`.trim()}
+                role={multiple ? "menuitemcheckbox" : "menuitem"}
+                aria-selected={isOptionSelected(opt.value, tempMultiValue, currentValue)}
+                aria-disabled={opt.disabled}
+                data-selected={isOptionSelected(opt.value, tempMultiValue, currentValue) ? "true" : "false"}
+                data-disabled={opt.disabled ? "true" : "false"}
+                data-danger={opt.danger ? "true" : undefined}
+                on:click={(e) => {
+                  e.stopPropagation();
+                  if (multiple) {
+                    handleMultiToggle(opt);
+                  } else {
+                    handleSingleSelect(opt);
+                  }
+                }}
+              >
+                {#if multiple}
+                  <span
+                    class="ttdk-dropdown-checkbox"
+                    data-checked={isOptionSelected(opt.value, tempMultiValue, currentValue)
+                      ? "true"
+                      : "false"}
+                  >
+                    {#if isOptionSelected(opt.value, tempMultiValue, currentValue)}
+                      <svg
+                        class="ttdk-dropdown-checkbox-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"><polyline points="20 6 9 17 4 12" /></svg
+                      >
+                    {/if}</span
+                  >
+                {/if}
+                {#if opt.icon}
+                  <span class="ttdk-dropdown-option-icon" aria-hidden="true"
+                    >{opt.icon}</span
+                  >
+                {/if}
+                <div class="ttdk-dropdown-option-content">
+                  <span class="ttdk-dropdown-option-label">{opt.label}</span>
+                  {#if opt.description}
+                    <span class="ttdk-dropdown-option-desc"
+                      >{opt.description}</span
+                    >
+                  {/if}
+                </div>
+                {#if !multiple && isOptionSelected(opt.value, tempMultiValue, currentValue)}
+                  <span class="ttdk-dropdown-check-icon" aria-hidden="true"
+                    ><svg
+                      class="ttdk-dropdown-check-svg"
+                      viewBox="0 0 24 24"
+                      fill="none"><polyline points="20 6 9 17 4 12" /></svg
+                    ></span
+                  >
+                {/if}
+              </div>
+            </div>
+          {/each}
+
+          {#if filteredOptions(searchQuery, options).length === 0}
+            <div class="ttdk-dropdown-empty">Tidak ada pilihan ditemukan</div>
+          {/if}
+        </div>
+      {/if}
+      {#if multiple}
+        <div
+          class="ttdk-dropdown-actions"
+          on:click={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <button
+            type="button"
+            class="ttdk-dropdown-btn-reset"
+            on:click={(event) => {
+              handleReset();
+            }}
+            ><svg
+              class="ttdk-dropdown-btn-reset-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              ><path
+                d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+              /><path d="M3 3v5h5" /></svg
+            ><span>{resetText || "Reset"}</span></button
+          ><button
+            type="button"
+            class="ttdk-dropdown-btn-apply"
+            on:click={(event) => {
+              handleApply();
+            }}
+            ><span>{applyText || "Terapkan"}</span><svg
+              class="ttdk-dropdown-btn-apply-icon"
+              viewBox="0 0 24 24"
+              fill="none"><polyline points="20 6 9 17 4 12" /></svg
+            ></button
+          >
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if helperText && helperTextPosition !== "top"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(helperTextStyle),
+      })}
+      class={`ttdk-dropdown-helper-text ${helperTextClass || ""}`.trim()}
+    >
+      {helperText}
+    </div>
+  {/if}
+  {#if errorMessage || (typeof error === "string" && error)}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(errorMessageStyle),
+      })}
+      role="alert"
+      class={`ttdk-dropdown-error-text ${errorMessageClass || ""}`.trim()}
+    >
+      {errorMessage || (typeof error === "string" ? error : "")}
+    </div>
+  {/if}
+</div>