コンボボックスのAPIのアイデアについて@heartdiseaseと同期します。 彼はAngularの現在の実験バージョンを改善しています

microsoft-graph-toolkit TemplateHelperをテストして、スロットで提供される特定のコンテキストとテンプレートを使用してコンボボックスアイテムを生成しました。 これは、テンプレート内のネストされた要素でも、期待どおりに機能します。
このリポジトリにテストをアップロードしました

したがって、アイテムのリストと（オプションで）テンプレートをコンボボックスに渡し、スクロール位置と高さに応じて、実際にアイテムをレンダリングする前に仮想化を「追加」して、x個のアイテムのみをレンダリングすることをお勧めします。オーバーレイコンテナ。

現在、 TemplateHelper.renderTemplate()メソッドは、HTMLElementをルートノード、テンプレート、およびコンテキスト（およびオプションの追加コンテキスト）として受け入れます。 指定されたテンプレートに従ってすべてのノードを作成し、それらをルートノードに接続します。
この動作を変更し、メソッドがテンプレートとコンテキストのみを受け入れ、コンパイルされたテンプレートを返すようにして、返されたHTMLをコンポーネントのlit-templateに直接出力できるようにする方がよい場合があります。
どう思いますか？

要件

• 仮想スクロール：パフォーマンスの問題を回避するために、オプションの一部のみを実際にレンダリングする必要があります
• カスタムテンプレート：ユーザーは、オプションのレンダリングに使用されるテンプレートを提供できる必要があります
• フィルタリング：ユーザーは、アイテムのリストをフィルタリングするために入力を入力できる必要があります。 フィルタリングは、ユーザーが提供するフィルター機能を使用して行う必要があります
• スクロールインジケーター：オプションが多いかどうかは常に明確である必要があります->オプションが多い限り、最初に表示されていたオプションの半分（または最大xピクセル）が表示され、コンテナーがスクロール可能であることを明確に示す必要があります。

次のステップの要件

• 読み込み状態：使用可能なアイテムがない限り、読み込みスピナーをオーバーレイに表示する必要がありますToDo読み込みスピナーはどこに表示する必要がありますか？
• 複数選択：ユーザーは複数のオプションを選択できる必要があります
• オプショングループ：オプションをグループ化できるはずです

アクセシビリティ

フォーカスされている場合、 Enter 、 ArrowUpまたはArrowDownキーを押すか、ユーザーが入力フィールドにフィルターを入力し始めると、コンボボックスが開きます。

開いているとき、ユーザーはArrowUp / ArrowDownキーを使用して既存のオプションから選択できる必要があります。 フィルタを入力するためのフォーカスは入力フィールドにとどまる必要があり、オプションはタブ可能であってはなりません。 オプションの選択状態は、 aria-selected属性を使用して示す必要があります。

選択はEnterキーを使用して送信する必要があります。

TabまたはEscapeキーを押すと、オーバーレイが閉じ、選択したアイテムは変更されません。

フィルタを入力してから入力フィールドからタブアウトすると、フィルタがリセットされ、以前に選択した項目が表示されます。

カスタムテンプレート構文

ユーザーは、テンプレートパーツの開始文字列と終了文字列を提供する必要があります。 これは、グローバルレベルまたはコンポーネントごとのレベルで可能である必要があります（まだ決定されていません）。

デフォルトは{{および}}です。

API提案

_WIP_

ComboBoxは、メインのFluidComboBoxコンポーネント、 FluidComboBoxOptionsListコンポーネント、およびFluidComboBoxOptionコンポーネントに分割する必要があります。

FluidComboBox

FluidComboBoxOptionsListが含まれ、次にFluidComboBoxOptionが含まれます。
オーバーレイの開閉とオーバーレイの配置を処理します。
ベースHTMLElementを受け入れる子要素としてテンプレートを受け入れます。

テンプレートを提供するときは、テンプレートのバインドに使用される開始文字列と終了文字列を設定する必要があります。

入力

| 名前| 予定| タイプ| デフォルト| 説明|
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| オプション| MVP | アレイ| [] | FluidComboBoxOptionsListに表示するオプションの配列|
| filterFn | MVP | (option: T) => boolean | null | オプションのフィルタリングに使用される関数|
| renderOptionFn | MVP | (option: T) => string | null | オートコンプリートパネルのレンダリングオプションに使用される関数|
| プレースホルダー| MVP | 文字列| '' | オプションが選択されていない場合に入力フィールドに表示するプレースホルダー|
| 無効| MVP | ブール値| false | コンボボックスが無効になっているかどうかを判断するブール値|
| 読み込み中| MVP | ブール値| false | 負荷インジケータを表示するかどうかを決定するブール値|
| 選択済み| MVP | 任意| null | 事前選択するアイテム|
| multiSelect | v2 | ブール値| false | 複数のオプションを同時に選択できるかどうかを決定するブール値|

出力

| 名前| 予定| タイプ| 説明|
| ---------------- | ----------- | --------------------------------- | -------------------------------------------------- ---- |
| 変更| MVP | FluidComboBoxChangeEvent | 値が変更されたときに発生するイベント|
| フィルタ変更| MVP | FluidComboBoxFilterChangeEvent | ユーザーがフィルタリングの値を入力したときに発生するイベント|
| 選択-変更| MVP | FluidComboBoxSelectionChangeEvent | 選択したオプションが変更されたときに発生するイベント|

FluidLoadingSpinner

FluidComboBoxの前提条件として、最初に再利用可能なローディングスピナーコンポーネントを実装する必要があります。
ToDo新しいローディングスピナーのL＆Fについて（または古いデザインを再利用できるかどうか）UXに質問します。

FluidVirtualScroller

FluidComboBoxの前提条件として、仮想スクロールを実装する再利用可能なコンポーネントを実装する必要があります
コンボボックスを多数のアイテムで使用できるようにするため。

参照：
https://github.com/WICG/virtual-scroller/blob/master/README.md
https://www.sitepen.com/blog/next-generation-virtual-scrolling/
https://dev.to/adamklein/build-your-own-virtual-scroll-part-i-11ib
https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/

FluidPopover

FluidComboBoxの前提条件として、配置可能な再利用可能なポップオーバーコンポーネントを実装する必要があります
コンボボックスの入力要素の下に完全にあります。

このライブラリは、そのコンポーネントを実装するために使用する必要があります。
https://popper.js.org/docs/v2/

テンプレートに関しては、開発者がテキストの置換のみを行うことはあまり柔軟で広範ではないため、いくつかの懸念があります。 関数またはifのような単純な条件によるテキスト変換について考えてみてください。それは不可能ですが、必要だと思います。

私のアプローチは、追加できるDocumentFragmentに入れることができるHTML文字列を返す関数を書くことです。

関数を書くことで、変換や条件の完全な柔軟性を得ることができます。
そのための単純なアウトレットを提供するために、文字列にレンダリングできるJSX htmに似たものを利用できるため、コンパイルは必要ありません。 また、約700バイトについて話しているフットプリントはごくわずかです。

その後、次のように使用できます。

<script type="text/template">
html`
  <span>${text}</span>
   {count > 0
     <span>occurrences ${count}</span>
   }
   </div>
`;
</script>

import { render } from "preact-render-to-string";

const template = document.createElement('template');
template.innerHTML = render(option); // option is the script that can be passed via slot or input

const fragment = temp.content;

または、タグ付きテンプレートhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templatesを使用することもでき

これはおそらくより最小限の解決策でしょう。

私はいくつかのテストを行いましたが、残念ながらAngularはすべてのスクリプトタグをテンプレートから削除しました。 テンプレート内でのスクリプトの宣言に関する私の2セント。

たぶん、関数優先のアプローチを使って、コンボボックスに入力があり、テンプレートのレンダリング方法に関する関数を提供できるようにしましょう。

LitElementsにプロパティとして関数を提供することは可能ですか？ それから、私はレンダリングをコンシューマーに渡します。コンシューマーは、この関数でjavascriptのすべての柔軟性を備えています。 関数はパラメーター（テンプレートの入力）を宣言しており、文字列を返す必要があります。

デフォルトの実装は次のように実行できます。

_defaultTemplate<T>(display: string, value: T): string {
   return `<option>${display}</option>`
}

＃1513で説明したように、ポップオーバーを適切に処理する必要があります。

これがコンボボックスコンポーネントの一部である入力について議論するのに適切な場所かどうかはわかりませんが、入力はフォーカスに焦点を合わせて成長するため、入力コンポーネントのボックスを拡張して最大の状態のスペースを取るのは理にかなっていると思いますもっている。

現在、入力はフォーカスされると幅が16px大きくなります。 したがって、ラベル+入力を8のパディングで移動することをお勧めします。これは、複数のコントロール（input、select、...）が垂直形式のレイアウトである場合、すべてのコントロールのすべてのラベルが整列。 おそらく、ラベルと入力の間隔を統一するためのフォームコントロールが理にかなっています。

現在選択されているオプションの表示文字列をレンダリングするための新しい入力を追加して、提案を修正したいと思います。

入力

| 名前| 予定| タイプ| デフォルト| 説明|
| -------------- | ----------- | -------- | ------- | -------------------------------------------------- ------------------------------ |
| displayNameFn | MVP | (option: T) => string | （オプション）=> `$ {option}` | 指定されたオプションの表示文字列（HTMLは許可されていません）を返す関数。 |

これは、この問題の簡単な解決策にもなります：＃1527

重要だと思う小さなこと：現在のDtComboboxは、オプションのvalueをデフォルトの「選択されたオプション」の表示テキストとして使用します。 オプションのtextContentを使用する方がはるかに理にかなっていると思います。
1） textContentは常にUIに適した値です（ valueはUIに適した値である場合があります）
2） textContentを使用することは、標準のselect行うことです

Webコンポーネントは、将来的にコンポーネントを作成する方法ではないため、この問題を解決します。これは、チーム内の優先順位の変更に関連しています。