IgniteUI · ChronosSF · Apr 2, 2025 · Apr 2, 2025 · Apr 2, 2025
diff --git a/jp/components/charts/features/chart-data-selection.md b/jp/components/charts/features/chart-data-selection.md
@@ -89,6 +89,13 @@ Angular {ComponentTitle} の Ignite UI for Angular 選択機能を使用する
 
 たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズを選択する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを SelectedSeriesItems コレクションに追加できます。
 
+<code-view style="height: 500px" alt="Angular 選択マッチャー"
+           data-demos-base-url="{environment:dvDemosBaseUrl}"
+                    iframe-src="{environment:dvDemosBaseUrl}/charts/category-chart/selection-matcher"
+                                                 github-src="charts/category-chart/selection-matcher">
+</code-view>
+
+
 ## API リファレンス
 
 以下は上記のセクションで説明した API メンバーのリストです。

diff --git a/jp/components/general-changelog-dv.md b/jp/components/general-changelog-dv.md
@@ -17,6 +17,35 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、
 
 *   [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master)
 
+## **19.0.1 (February 2025)**
+
+### 機能拡張
+
+#### Toolbar
+
+*   [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) と [`IgxToolPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolpanelcomponent.html) に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての [`IgxToolActionGroupHeaderComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactiongroupheadercomponent.html) アクションに適用されます。
+*   タイトル テキストの水平方向の配置を制御する [`titleHorizontalAlignment`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#titleHorizontalAlignment) という新しいプロパティを [`IgxToolActionComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html) に追加しました。
+*   [`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) に、パネル内の項目間の間隔を制御する `ItemSpacing` という新しいプロパティを追加しました。
+
+### バグ修正
+
+次の表は、このリリースの Ignite UI for Angular ツールセットに対して行われたバグ修正を示しています。
+
+| バグ番号 | コントロール | 説明      |
+|------------|---------|------------------|
+|26218|Excel Library|Excel ファイルを読み込むだけで、チャートのプロット領域の右マージンが狭くなり、塗りつぶしパターンと前景の塗りつぶしが消える。|
+|30286|IgxDataChart|バブルをクリックすると、Bubble Series のツールチップが近くのバブル データの内容に切り替わる。|
+|32906|IgxDataChart|IgxDataChart は上部に 2 つの xAxis を表示している。|
+|33605|IgxDataChart|凡例に ScatterLineSeries の線の色が正しく表示されない。|
+|34053|IgxRadialGauge|スケール ラベルの位置がずれる。|
+|34083|Excel Library|テンプレート Excel ファイルのテキストに 「=」 が含まれている場合、TextOperatorConditionalFormat が正しく読み込まれない/保存されない。|
+|34776|IgxDataChart|IgxDataChart を繰り返し表示したり非表示にしたりすると、JS ヒープでメモリ リークが発生する。|
+|35495|Excel Library|テンプレート ファイルを読み込むと、セル内の画像が失われる。|
+|35496|IgxSpreadsheet|Excel に画像付きでスタイルを設定すると エラーが発生する。|
+|35498|IgxDataChart|IncludedSeries で指定されたシリーズのツールチップは表示されない。|
+|36176|Excel Library|LET 関数を含む Excel ブックを読み込むと、例外が発生する。|
+|36379|Excel Library|Excel ワークブック内のアルファ チャネルを含む色は読み込まれない。|
+
 ## **19.0.0 (January 2025)**
 
 *   Angular 19 のサポート。

diff --git a/jp/components/list.md b/jp/components/list.md
@@ -548,46 +548,52 @@ export class ContactListComponent {
 
 ## リスト項目の選択
 
-リスト項目は選択状態を提供しません。しかし、アプリケーションで選択された項目を追跡する必要がある場合、どのようにしてそれを実現できるかの例を示します。必要なのは、コンポーネントのどこか、またはリストがバインドされているデータの中で、状態を追跡することです。
+リスト項目には、どの項目が「選択」されているかを追跡するのに役立つ `selected` プロパティがあります。このプロパティを使用すると、各項目の選択状態を識別および管理できます。
 
-以下は、リストにバインドされているデータの状態追跡に基づいて、テーマのセカンダリ 500 カラーをリストの背景色に適用する例です。
+以下の例は、`selected` プロパティを使用したときに項目の視覚スタイルがどのように変化するかを示しています。
 
 <code-view style="height: 420px"
            data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/lists/list-item-selection" >
 </code-view>
 
-`selected` プロパティを各データ メンバーに追加します。デフォルトは `false` です。リスト項目がクリックされたら、データ コレクション内のすべての `selected` プロパティをリセットしたあと、クリックされた項目に対応するデータの `selected` プロパティを `true` に設定します。選択したロパティに基づいて、選択されたときの背景を定義している css クラスをリスト項目に適用します。
+デフォルトで、`selected` プロパティは `false` に設定されています。各リスト項目の `(click)` イベントにバインドされたインライン式を使用して値を切り替えることができ、クリックされるたびに項目の視覚的な状態を効果的に切り替えることができます。
 
 ```html
 <igx-list>
-    <igx-list-item isHeader="true">Contacts</igx-list-item>
-    <igx-list-item [ngClass]="contact.selected ? 'selected' : ''"
-                    (click)="selectItem(contact)"
-                    *ngFor="let contact of contacts | igxFilter: filterContacts;">
+    <igx-list-item [isHeader]="true">Contacts</igx-list-item>
+    @for (contact of contacts | igxFilter: filterContacts; track contact) {
+      <igx-list-item [selected]="contact.selected" (click)="contact.selected = !contact.selected">
         <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
         <span igxListLineTitle>{{ contact.name }}</span>
         <span igxListLineSubTitle>{{ contact.phone }}</span>
-        <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact, $event)">star</igx-icon>
-    </igx-list-item>
-</igx-list>
-```
-
-```typescript
-public selectItem(item) {
-    if (!item.selected) {
-        this.contacts.forEach(c => c.selected = false);
-        item.selected = true;
+        <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
+          [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+        (mousedown)="mousedown($event)">star</igx-icon>
+      </igx-list-item>
     }
-}
+  </igx-list>
 ```
 
+リスト項目には、選択した要素のさまざまな部分のスタイルを設定するために使用できるいくつかの CSS 変数も公開されています。
+
+- `--item-background-selected`
+- `--item-text-color-selected`
+- `--item-title-color-selected`
+- `--item-action-color-selected`
+- `--item-subtitle-color-selected`
+- `--item-thumbnail-color-selected`
+
 ```scss
-.selected {
-    background-color: hsla(var(--igx-secondary-500))
+igx-list-item {
+  --item-background-selected: var(--ig-secondary-500);
+  --item-title-color-selected: var(--ig-secondary-500-contrast);
+  --item-subtitle-color-selected: var(--ig-info-100);
 }
 ```
 
+リストのテーマ変数を使用する場合は、リスト項目の選択状態のスタイルを設定できるパラメーターが用意されています。これらのパラメーターの詳細については、[`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme) を参照してください。
+
 <div class="divider--half"></div>
 
 ## Chat コンポーネント

diff --git a/jp/components/menus/toolbar.md b/jp/components/menus/toolbar.md
@@ -82,12 +82,13 @@ IgrDataChartCategoryTrendLineModule.register();
 *   [`IgxToolActionLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html)
 *   [`IgxToolActionNumberInputComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionnumberinputcomponent.html)
 *   [`IgxToolActionRadioComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html)
+*   [`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html)
 
-これらのツールはそれぞれ、マウスのクリックによってトリガーされる `OnCommand` イベントを公開します。
+これらのツールはそれぞれ、マウスのクリックによってトリガーされる `OnCommand` イベントを公開します。注: [`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html) は、[`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html) 内にラップすることもできる他のツールのラッパーです。
 
 [`IgxToolActionComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html) オブジェクトの [`overlayId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#overlayId)、[`beforeId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#beforeId)、および [`afterId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#afterId) プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は [`visibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#visibility) プロパティも公開します。
 
-次の例は、組み込みの **ZoomReset** と **AnalyzeMenu** メニュー ツール アクションの両方を非表示にする方法を示しています。**ZoomReset** ツール操作の新しいインスタンスが追加され、[`afterId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#afterId) プロパティを使用して **ZoomMenu** 内に配置され、それを **ZoomOut** に割り当てます。これにより、新しいリセット ツールが **ZoomMenu** の下部に表示されます。
+次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、[`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) でツールをグループ化できます。この例では、[`afterId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#afterId) プロパティを使用して **ZoomOut** に割り当てることで、**ZoomReset** ツール操作の新しいインスタンスが追加され、**ZoomMenu** 内に配置されます。また、ツールの [`isHighlighted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#isHighlighted) プロパティによってもハイライト表示されます。これにより、新しいリセット ツールが **ZoomMenu** の下部にすぐに表示されます。
 
 <code-view style="height: 600px" alt="Angular Toolbar の例"
            data-demos-base-url="{environment:dvDemosBaseUrl}"
@@ -154,6 +155,12 @@ Angular ツールバーには、`Target` プロパティが含まれています
 
 ツールを手動で追加する場合、`RenderIconFromText` メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: [`iconCollectionName`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#iconCollectionName))。2 つ目は、ツールで定義されたアイコンの名前 (例: [`iconName`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#iconName)) で、その後に SVG 文字列を追加します。
 
+### データ URL アイコン
+
+svg を追加するのと同様に、`RegisterIconFromDataURL` を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。
+
+次のスニペットは、アイコンを追加する両方の方法を示しています。
+
 ```html
 <igx-tool-action-label
     title="Custom Icon"
@@ -171,15 +178,61 @@ public toolbarCustomIconOnViewInit(): void {
 }
 ```
 
+```ts
+public toolbarCustomIconOnViewInit(): void {
+
+  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
+
+}
+```
+
 ```ts
 public toolbarCustomIconOnViewInit(): void {
 
   const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
 
   this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
+
 }
 ```
 
+```ts
+public toolbarCustomIconOnViewInit(): void {
+
+  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
+
+}
+```
+
+@code {
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var toolbar = this.toolbar;
+
+        if (firstRender) {
+            this.ToolbarCustomIconOnViewInit();
+        }
+    }
+
+    private IgbToolbar toolbar;
+
+    public void ToolbarCustomIconOnViewInit()
+    {
+    	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
+    	{
+            this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
+    	}));
+    }
+
+}
+
+````
+
+```tsx
+<IgrToolbar orientation="Vertical" />
+````
+
 ### 垂直方向
 
 デフォルトでは、Angular ツールバーは水平に表示されますが、[`orientation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) プロパティを設定することで垂直に表示することもできます。
@@ -188,7 +241,9 @@ public toolbarCustomIconOnViewInit(): void {
 <igx-toolbar orientation="Vertical" />
 ```
 
-次の例は、Angular ツールバーの垂直方向を示しています。 <code-view style="height: 600px" alt="Angular 垂直方向"
+次の例は、Angular ツールバーの垂直方向を示しています。
+
+<code-view style="height: 600px" alt="Angular 垂直方向"
            data-demos-base-url="{environment:dvDemosBaseUrl}"
                     iframe-src="{environment:dvDemosBaseUrl}/charts/toolbar/layout-in-vertical-orientation"
                                                  github-src="charts/toolbar/layout-in-vertical-orientation">

diff --git a/jp/components/query-builder.md b/jp/components/query-builder.md
@@ -19,9 +19,10 @@ Angular Query Builder は、[Angular コンポーネント](https://jp.infragist
 
 この Angular Query Builder の例を作成して、Angular Query Builder コンポーネントのデフォルト機能を紹介しました。プラス ボタンをクリックして、条件、「and」グループ、および「or」グループを追加します。グループ解除または削除するには、サイド バーに移動します。
 
-<code-view style="height:700px"
+<code-view style="height:700px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-sample-1" alt="Angular Query Builder の例">
+           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-request-sample"
+           alt="Angular Query Builder 概要の例">
 </code-view>
 
 <div class="divider--half"></div>

diff --git a/jp/components/themes/palettes.md b/jp/components/themes/palettes.md
@@ -108,11 +108,11 @@ Ignite UI for Angular は、`primary`、`secondary`、`surface`、`gray`、`info
 /* styles.css */
 
 .blue-theme {
-    --ig-primary-500: #0008ff;
+  --ig-primary-500: #0008ff;
 }
 
 .red-theme {
-    --ig-primary-500: #ff0400;
+  --ig-primary-500: #ff0400;
 }
 ```
 
@@ -176,10 +176,10 @@ Ignite UI for Angular のパレットは、テーマが明るいまたは暗い
 
 ```css
 :root {
-    --ig-info-500: #1377d5;
-    --ig-success-500: #4eb862;
-    --ig-warn-500: #faa419;
-    --ig-error-500: #ff134a;
+  --ig-info-500: #1377d5;
+  --ig-success-500: #4eb862;
+  --ig-warn-500: #faa419;
+  --ig-error-500: #ff134a;
 }
 ```