solid-ui 3.1.3-1 → 3.1.3-11

package/dist/chunks/listboxTemplate-CLsbhnb_.js

@@ -1,171 +0,0 @@
-import { i as e, s as t } from "./lit-CC2G_f_C.js";
-//#region src/v2/components/forms/shared/downArrow.ts
-var n = e`
-  <svg xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 12 7"
-    fill="none"
-  >
-    <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="#6A7282" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
-`, r = t`
-  :host { /* default theme */
-      --input-background: var(--color-background, #F8F9FB);
-      --item-text: var(--color-text-heading, #000000);
-      --item-selected-text: var(--color-primary, #7c4dff);
-      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);
-      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);
-      --listbox-z-index: 1;
-    }
-
-    :host([theme='dark']) {
-      --input-background: var(--color-background, #1A1A1A);
-      --item-text: var(--color-text-heading, #F8F9FB);
-      --item-selected-text: var(--color-primary, #7c4dff);
-      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);
-      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);
-      --listbox-z-index: 1;
-    }
-
-    .listbox {
-      position: relative;
-      top: 0;
-      left: 0;
-      right: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 0.0625rem;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      border: none;
-      border-radius: inherit;
-      background: var(--input-background);
-      background-color: var(--input-background);
-      opacity: 1;
-      overflow: hidden;
-      padding: 0.25rem;
-      z-index: var(--listbox-z-index);
-      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
-    }
-
-    .listbox-item {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2xs, 0.625rem);
-      width: 100%;
-      min-height: calc(var(--font-size-sm, 0.875rem) + 1rem);
-      padding: 0.5rem var(--spacing-xs, 0.75rem);
-      border: none;
-      border-radius: var(--border-radius-sm, 0.2rem);
-      background: transparent;
-      color: var(--item-text);
-      cursor: pointer;
-      font: inherit;
-      font-size: var(--font-size-sm, 0.875rem);
-      font-weight: var(--font-weight-normal, 400);
-      line-height: normal;
-      text-align: left;
-      text-decoration: none;
-      box-sizing: border-box;
-    }
-
-    .listbox-item:hover {
-      background: var(--item-hover-background);
-      border-radius: var(--border-radius-sm, 0.2rem);
-    }
-
-    .listbox-item:focus {
-      background: var(--item-hover-background);
-      border-radius: var(--border-radius-sm, 0.2rem);
-    }
-
-    .listbox-item-active {
-      background: var(--item-selected-background);
-      color: var(--item-selected-text);
-      border-radius: var(--border-radius-sm, 0.2rem);
-      outline: none;
-    }
-
-    .listbox-item-active:hover,
-    .listbox-item-active:focus {
-      color: var(--item-text);
-    }
-
-    .listbox-item-disabled {
-      opacity: 0.55;
-      cursor: not-allowed;
-    }
-
-    .listbox-item-disabled:hover {
-      background: transparent;
-      border-radius: 0;
-    }
-`;
-//#endregion
-//#region src/v2/components/forms/shared/keyboard.ts
-function i(e, t, n) {
-	if (!t.length || t.every((e) => e.disabled)) return -1;
-	let r = t.length, i = e;
-	do
-		i = (i + n + r) % r;
-	while (t[i].disabled);
-	return i;
-}
-function a(e) {
-	return e.length ? i(-1, e, 1) : -1;
-}
-function o(e) {
-	return e.length ? i(e.length, e, -1) : -1;
-}
-function s(e, t) {
-	return t === void 0 ? -1 : e.findIndex((e) => e.value === t);
-}
-function c(e) {
-	switch (e) {
-		case "ArrowDown": return "next";
-		case "ArrowUp": return "previous";
-		case "Home": return "first";
-		case "End": return "last";
-		case "Enter":
-		case " ": return "select";
-		case "Escape": return "close";
-		default: return "none";
-	}
-}
-//#endregion
-//#region src/v2/components/forms/shared/listboxTemplate.ts
-function l(t) {
-	let { options: n, selectedOption: r, activeOption: i, listboxId: a, getOptionId: o, onOptionSelect: s } = t;
-	return e`
-    <ul
-      class="listbox"
-      id="${a ?? ""}"
-      part="listbox"
-      role="listbox"
-      aria-orientation="vertical"
-    >
-      ${n.map((t, n) => {
-		let a = t.value === r?.value, c = t.value === i?.value;
-		return e`
-          <li
-            id="${o?.(t, n) ?? ""}"
-            class="listbox-item${a ? " listbox-item-selected" : ""}${c ? " listbox-item-active" : ""}${t.disabled ? " listbox-item-disabled" : ""}"
-            part="option${a ? " selected-option" : ""}${c ? " active-option" : ""}${t.disabled ? " disabled-option" : ""}"
-            role="option"
-            aria-selected="${a}"
-            aria-disabled="${t.disabled ? "true" : "false"}"
-            @click="${() => {
-			t.disabled || s(t);
-		}}"
-          >
-            ${t.label}
-          </li>
-        `;
-	})}
-    </ul>
-  `;
-}
-//#endregion
-export { c as a, n as c, o as i, s as n, i as o, a as r, r as s, l as t };
-
-//# sourceMappingURL=listboxTemplate-CLsbhnb_.js.map

package/dist/chunks/listboxTemplate-CLsbhnb_.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"listboxTemplate-CLsbhnb_.js","names":["html","downArrowIcon","css","listboxStyles","getNextEnabledIndex","currentIndex","options","direction","length","every","option","disabled","optionsCount","nextIndex","getFirstEnabledIndex","getLastEnabledIndex","findOptionIndexByValue","value","undefined","findIndex","getListboxActionFromKey","key","html","renderListbox","args","options","selectedOption","activeOption","listboxId","getOptionId","onOptionSelect","map","option","index","isSelected","value","isActive","optionId","disabled","label"],"sources":["../../src/v2/components/forms/shared/downArrow.ts","../../src/v2/components/forms/shared/listboxStyles.ts","../../src/v2/components/forms/shared/keyboard.ts","../../src/v2/components/forms/shared/listboxTemplate.ts"],"sourcesContent":["import { html } from 'lit-html'\n\nexport const downArrowIcon = html`\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 12 7\"\n    fill=\"none\"\n  >\n    <path d=\"M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955\" stroke=\"#6A7282\" stroke-width=\"1.35776\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n","import { css } from 'lit'\n\nexport const listboxStyles = css`\n  :host { /* default theme */\n      --input-background: var(--color-background, #F8F9FB);\n      --item-text: var(--color-text-heading, #000000);\n      --item-selected-text: var(--color-primary, #7c4dff);\n      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);\n      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);\n      --listbox-z-index: 1;\n    }\n\n    :host([theme='dark']) {\n      --input-background: var(--color-background, #1A1A1A);\n      --item-text: var(--color-text-heading, #F8F9FB);\n      --item-selected-text: var(--color-primary, #7c4dff);\n      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);\n      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);\n      --listbox-z-index: 1;\n    }\n\n    .listbox {\n      position: relative;\n      top: 0;\n      left: 0;\n      right: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 0.0625rem;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      border: none;\n      border-radius: inherit;\n      background: var(--input-background);\n      background-color: var(--input-background);\n      opacity: 1;\n      overflow: hidden;\n      padding: 0.25rem;\n      z-index: var(--listbox-z-index);\n      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);\n    }\n\n    .listbox-item {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-2xs, 0.625rem);\n      width: 100%;\n      min-height: calc(var(--font-size-sm, 0.875rem) + 1rem);\n      padding: 0.5rem var(--spacing-xs, 0.75rem);\n      border: none;\n      border-radius: var(--border-radius-sm, 0.2rem);\n      background: transparent;\n      color: var(--item-text);\n      cursor: pointer;\n      font: inherit;\n      font-size: var(--font-size-sm, 0.875rem);\n      font-weight: var(--font-weight-normal, 400);\n      line-height: normal;\n      text-align: left;\n      text-decoration: none;\n      box-sizing: border-box;\n    }\n\n    .listbox-item:hover {\n      background: var(--item-hover-background);\n      border-radius: var(--border-radius-sm, 0.2rem);\n    }\n\n    .listbox-item:focus {\n      background: var(--item-hover-background);\n      border-radius: var(--border-radius-sm, 0.2rem);\n    }\n\n    .listbox-item-active {\n      background: var(--item-selected-background);\n      color: var(--item-selected-text);\n      border-radius: var(--border-radius-sm, 0.2rem);\n      outline: none;\n    }\n\n    .listbox-item-active:hover,\n    .listbox-item-active:focus {\n      color: var(--item-text);\n    }\n\n    .listbox-item-disabled {\n      opacity: 0.55;\n      cursor: not-allowed;\n    }\n\n    .listbox-item-disabled:hover {\n      background: transparent;\n      border-radius: 0;\n    }\n`\n","import { SelectOption } from './optionTypes'\n\n/* Move up or down, skip disabled options */\nexport function getNextEnabledIndex (\n  currentIndex: number,\n  options: SelectOption[],\n  direction: 1 | -1\n): number {\n  if (!options.length) {\n    return -1\n  }\n\n  if (options.every(option => option.disabled)) {\n    return -1\n  }\n\n  const optionsCount = options.length\n  let nextIndex = currentIndex\n\n  do {\n    nextIndex = (nextIndex + direction + optionsCount) % optionsCount\n  } while (options[nextIndex].disabled)\n\n  return nextIndex\n}\n\n/* Handle 'Home' and 'End' keys and initial highlight */\nexport function getFirstEnabledIndex (options: SelectOption[]): number {\n  if (!options.length) {\n    return -1\n  }\n\n  return getNextEnabledIndex(-1, options, 1)\n}\n\nexport function getLastEnabledIndex (options: SelectOption[]): number {\n  if (!options.length) {\n    return -1\n  }\n\n  return getNextEnabledIndex(options.length, options, -1)\n}\n\n/* Sync current value to active index */\nexport function findOptionIndexByValue (\n  options: SelectOption[],\n  value?: string\n): number {\n  if (value === undefined) {\n    return -1\n  }\n  return options.findIndex(option => option.value === value)\n}\n\n/* Map keyboard events to actions */\nexport function getListboxActionFromKey (key: string):\n  | 'open'\n  | 'close'\n  | 'next'\n  | 'previous'\n  | 'first'\n  | 'last'\n  | 'select'\n  | 'none' {\n  switch (key) {\n    case 'ArrowDown':\n      return 'next'\n    case 'ArrowUp':\n      return 'previous'\n    case 'Home':\n      return 'first'\n    case 'End':\n      return 'last'\n    case 'Enter':\n    case ' ':\n      return 'select'\n    case 'Escape':\n      return 'close'\n    default:\n      return 'none'\n  }\n}\n","import { html } from 'lit'\nimport type { SelectOption } from './optionTypes'\n\nexport interface RenderListboxArgs {\n  options: SelectOption[]\n  selectedOption?: SelectOption\n  activeOption?: SelectOption\n  listboxId?: string\n  getOptionId?: (option: SelectOption, index: number) => string\n  onOptionSelect: (option: SelectOption) => void\n}\n\nexport function renderListbox (args: RenderListboxArgs) {\n  const {\n    options,\n    selectedOption,\n    activeOption,\n    listboxId,\n    getOptionId,\n    onOptionSelect\n  } = args\n\n  return html`\n    <ul\n      class=\"listbox\"\n      id=\"${listboxId ?? ''}\"\n      part=\"listbox\"\n      role=\"listbox\"\n      aria-orientation=\"vertical\"\n    >\n      ${options.map((option, index) => {\n        const isSelected = option.value === selectedOption?.value\n        const isActive = option.value === activeOption?.value\n        const optionId = getOptionId?.(option, index)\n\n        return html`\n          <li\n            id=\"${optionId ?? ''}\"\n            class=\"listbox-item${isSelected ? ' listbox-item-selected' : ''}${isActive ? ' listbox-item-active' : ''}${option.disabled ? ' listbox-item-disabled' : ''}\"\n            part=\"option${isSelected ? ' selected-option' : ''}${isActive ? ' active-option' : ''}${option.disabled ? ' disabled-option' : ''}\"\n            role=\"option\"\n            aria-selected=\"${isSelected}\"\n            aria-disabled=\"${option.disabled ? 'true' : 'false'}\"\n            @click=\"${() => {\n              if (!option.disabled) {\n                onOptionSelect(option)\n              }\n            }}\"\n          >\n            ${option.label}\n          </li>\n        `\n      })}\n    </ul>\n  `\n}\n"],"mappings":";;AAEA,IAAaC,IAAgBD,CAAI;;;;;;;GCApBG,IAAgBD,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACChC,SAAgBE,EACdC,GACAC,GACAC,GACQ;CAKR,IAJI,CAACD,EAAQE,UAITF,EAAQG,OAAMC,MAAUA,EAAOC,QAAQ,GACzC,OAAO;CAGT,IAAMC,IAAeN,EAAQE,QACzBK,IAAYR;CAEhB;EACEQ,KAAaA,IAAYN,IAAYK,KAAgBA;QAC9CN,EAAQO,GAAWF;CAE5B,OAAOE;AACT;AAGA,SAAgBC,EAAsBR,GAAiC;CAKrE,OAJKA,EAAQE,SAINJ,EAAoB,IAAIE,GAAS,CAAC,IAHhC;AAIX;AAEA,SAAgBS,EAAqBT,GAAiC;CAKpE,OAJKA,EAAQE,SAINJ,EAAoBE,EAAQE,QAAQF,GAAS,EAAE,IAH7C;AAIX;AAGA,SAAgBU,EACdV,GACAW,GACQ;CAIR,OAHIA,MAAUC,KAAAA,IACL,KAEFZ,EAAQa,WAAUT,MAAUA,EAAOO,UAAUA,CAAK;AAC3D;AAGA,SAAgBG,EAAyBC,GAQ9B;CACT,QAAQA,GAAR;EACE,KAAK,aACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK;EACL,KAAK,KACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE,OAAO;CACX;AACF;;;ACrEA,SAAgBE,EAAeC,GAAyB;CACtD,IAAM,EACJC,YACAC,mBACAC,iBACAC,cACAC,gBACAC,sBACEN;CAEJ,OAAOF,CAAI;;;YAGDM,KAAa,GAAE;;;;;QAKnBH,EAAQM,KAAKC,GAAQC,MAAU;EAC/B,IAAMC,IAAaF,EAAOG,UAAUT,GAAgBS,OAC9CC,IAAWJ,EAAOG,UAAUR,GAAcQ;EAGhD,OAAOb,CAAI;;kBAFMO,IAAcG,GAAQC,CAAK,KAItB,GAAE;iCACCC,IAAa,2BAA2B,KAAKE,IAAW,yBAAyB,KAAKJ,EAAOM,WAAW,2BAA2B,GAAE;0BAC5IJ,IAAa,qBAAqB,KAAKE,IAAW,mBAAmB,KAAKJ,EAAOM,WAAW,qBAAqB,GAAE;;6BAEhHJ,EAAU;6BACVF,EAAOM,WAAW,SAAS,QAAO;4BACnC;GACd,AAAKN,EAAOM,YACVR,EAAeE,CAAM;EAEzB,EAAC;;cAECA,EAAOO,MAAK;;;CAGpB,CAAC,EAAC;;;AAGR"}