Data Attribútumok Konfigurálása:

A <select> elemen:
Ezek az attribútumok a teljes komponens viselkedését szabályozzák.
data-placeholder - Placeholder szöveg
data-multiple-type - Többszörös kiválasztás típusa ('list' vagy 'tag')
data-dropdown-width - 'auto' esetén tartalomhoz igazodó szélesség
data-dropdown-position - Dropdown pozíciója ('top' = felfelé nyílik)

A wrapper elemen:
data-cleanup-template - Template cache és DOM cleanup (alapból: true)
Ha "false" értékű, a template-ek a DOM-ban maradnak

Az <option> elemen - Alapértelmezett role-ok:
data-icon - Vezető ikon neve (pl. 'check-circle')
data-trailing-icon - Záró ikon neve
data-subtitle - Alcím szöveg az opció alatt

A Data-Role Rendszer Működése - Részletesen:

A data-role rendszer három elem szoros együttműködésén alapul, amely lehetővé teszi a dinamikus placeholder csere mechanizmust.

1. data-role="[role-név]" - Azonosítás
A template-ben lévő elemeket azonosítja, amelyeket fel kell tölteni az option adataival.
Például: <span data-role="text"></span>

2. data-placeholder-role-[role-név]="[__MASK__]" - Placeholder definíció
Definiálja azt a placeholder string-et, amelyet le kell cserélni az option data-[role-név] értékére.
Például: <div data-role="icon" data-placeholder-role-icon="__LEADING_ICON__">

3. Placeholder string ("[__MASK__]") előfordulásai - Csere
A placeholder string bárhol előfordulhat a template-ben, és minden előfordulás lecserélődik az option adatával.
Egyéni role-ok - Rugalmas bővíthetőség:
A rendszer tetszőleges data-[role-név] attribútumot támogat!
Példák: data-link, data-badge, data-color, data-tooltip
Fontos: A data attribútum neve mindig megegyezik a template-ben használt data-role értékkel.

Hogyan jelenik meg a role értéke?
A data-role="[role-név]" elem az option data-[role-név] attribútumának értékét jeleníti meg:

1. Ha NINCS placeholder definiálva a <select> elemen:
Az érték az elem innerText-jébe kerül.
Példa: <span data-role="subtitle"></span> → <span>Magyar</span>

2. Ha VAN data-placeholder-role-[role-név] definiálva a <select> elemen:
A <select data-placeholder-role-link="__LINK__"> attribútumban megadott placeholder string minden előfordulása lecserélődik az option értékére:
• A data-role elem attribútumaiban (href, class, style, stb.)
• A data-role elem szöveges tartalmában (innerText/textContent)
• A data-role elem gyermekeiben (az alatta lévő DOM fában)

Példa:
Select: <select data-placeholder-role-link="__LINK__">
Template: <a data-role="link" href="__LINK__">Tovább: __LINK__</a>
Option: <option data-link="example.com">
Eredmény: <a href="example.com">Tovább: example.com</a>

Eltávolító attribútumok - DOM tisztítás:
data-remove-[role-név] - Ha egy option-ön szerepel, az adott role-ú elem teljesen eltávolításra kerül a DOM-ból.

Cél: Megakadályozza, hogy felesleges/hibás DOM elemek maradjanak a renderelt opcióban.
Példa: Ha egy opció-nak nincs ikonja, a data-remove-icon használatával az ikon konténer elem teljesen eltűnik a DOM-ból, nem csak elrejtésre kerül.
Child element-ekben (rekurzívan):
Példa:

<div data-role="icon" data-placeholder-role-icon="__ICON__">
  <svg class="icon-__ICON__">
    <use href="#__ICON__"></use>
  </svg>
</div>

Option: <option data-icon="check-circle">
Eredmény: MINDEN "__ICON__" → "check-circle" (class-ban ÉS href-ben is!)

Teljes példa link role-lal:

<a href="__LINK__"
   target="_blank"
   data-role="link"
   data-placeholder-role-link="__LINK__">
  Megnyitás: __LINK__
</a>

Option: <option data-link="https://example.com">
Eredmény:

<a href="https://example.com"
   target="_blank">
  Megnyitás: https://example.com
</a>

Fontos megjegyzések:

• A placeholder csere rekurzív - minden gyermek elemben és azok attribútumaiban is végbemegy
• A data-placeholder-role-* attribútumok a csere után automatikusan törlődnek
• Ha nincs data-placeholder-role-* attribútum, csak a textContent-et tölti ki
• A data-remove-* használatával a teljes role-ú elem eltávolítható

JavaScript Inicializálás Blade Nélkül:

Ha Blade komponens helyett tisztán JavaScript-tel szeretnél létrehozni egy select input-ot, a következőkre kell figyelni:

1. HTML struktúra létrehozása:

<div data-ds-select-wrapper class="ds-select-input-wrapper">
  <select name="my-select" id="my-select">
    <option value="1" data-icon="check">Option 1</option>
    <option value="2" data-icon="x">Option 2</option>
  </select>
</div>

2. Template-ek definiálása:
Létre kell hozni az alábbi <template> elemeket:
• Trigger template - a kattintható select mező
• Dropdown template - a legördülő lista konténer
• Option template - egy opció megjelenítése a dropdown-ban
• Tag template (opcionális) - multiple + tag mód esetén
• Tags container template (opcionális) - tag-ek konténere



3. Placeholder szintaxis a template-ben:
Használj értelmes, egyedi placeholder string-eket (pl. __LEADING_ICON__, __LINK__).
A placeholder bármilyen formátumú lehet, javasolt konvenció az áttekinthetőség érdekében: __UPPERCASE_WITH_UNDERSCORES__

4. DsSelectInput példányosítás:

const selectEl = document.querySelector('#my-select');
const instance = new window.pds.DsSelectInput(selectEl, {
  triggerTemplateId: 'my-trigger-template',
  dropdownTemplateId: 'my-dropdown-template',
  optionTemplateId: 'my-option-template',
  tagTemplateId: 'my-tag-template',              // opcionális
  tagsContainerTemplateId: 'my-tags-container',   // opcionális
  mobileNative: true,                             // alapból: true
  multipleType: 'list',                           // 'list' vagy 'tag'
  cleanupTemplate: true                           // alapból: true, memória optimalizáció
});

5. Teljes működő példa:
Lásd a "JS oldalról létrehozva" szekciót lejjebb, ahol egy komplett példa található a createDynamicSelect() függvényben.

⚠️ Fontos tudnivalók:

• A wrapper-nek kötelező a [data-ds-select-wrapper] attribútum
• A select elem-nek kötelező a name és id attribútum
• Ha nincs megadva template ID, automatikusan generálódik a select ID/name alapján
• A template-ekben használt data-role és data-placeholder-role-* attribútumok elengedhetetlenek a működéshez
• Az option elemeken a data-* attribútumoknak meg kell egyezniük a template role neveivel
• Az auto-inicializálás letiltható, ha nem a DOMContentLoaded-kor történik a betöltés
• Template Cache: A cleanupTemplate: true (alapértelmezett) esetén a template-ek instance-level cache-be kerülnek és törlődnek a DOM-ból. A destroy() híváskor automatikusan tisztítódik a memória. Kikapcsolása csak debug/fejlesztés céljából ajánlott.