From fb36e4d5a80e24a269d133c3632c68845d1293f9 Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 12 Sep 2026 01:24:24 +0900 Subject: [PATCH 1/2] chore: update ionic angular libraries to 22.0.3 --- package-lock.json | 44 ++++++++++--------- package.json | 8 ++-- .../docs/src/app/docs/plugin-index.spec.ts | 2 +- .../generated/project-catalog.generated.ts | 16 +++---- .../ionic-angular-kit.en.generated.ts | 2 +- .../ionic-angular-kit.ja.generated.ts | 4 +- ...ionic-angular-photo-editor.en.generated.ts | 6 +-- ...ionic-angular-photo-editor.ja.generated.ts | 8 ++-- ...onic-angular-scroll-header.en.generated.ts | 6 +-- ...onic-angular-scroll-header.ja.generated.ts | 8 ++-- .../ngx-cdk-scroll-strategies.en.generated.ts | 8 ++-- .../ngx-cdk-scroll-strategies.ja.generated.ts | 10 ++--- .../docs/src/ionic-angular-kit/docs/api.md | 2 +- .../docs/src/ionic-angular-kit/docs/ja/api.md | 2 +- .../ionic-angular-photo-editor/docs/api.md | 2 +- .../ionic-angular-photo-editor/docs/ja/api.md | 2 +- .../docs/ja/readme.md | 2 +- .../docs/ja/theme.md | 2 +- .../ionic-angular-photo-editor/docs/readme.md | 4 +- .../ionic-angular-photo-editor/docs/theme.md | 2 +- .../ionic-angular-scroll-header/docs/api.md | 2 +- .../docs/ion-content.md | 2 +- .../docs/ja/api.md | 2 +- .../docs/ja/ion-content.md | 2 +- .../docs/ja/virtual-scroll.md | 2 +- .../docs/virtual-scroll.md | 2 +- .../docs/advanced.md | 2 +- .../src/ngx-cdk-scroll-strategies/docs/api.md | 2 +- .../docs/ja/advanced.md | 2 +- .../ngx-cdk-scroll-strategies/docs/ja/api.md | 2 +- .../docs/ja/reverse.md | 6 +-- .../docs/ja/simple.md | 2 +- .../ngx-cdk-scroll-strategies/docs/reverse.md | 6 +-- .../ngx-cdk-scroll-strategies/docs/simple.md | 2 +- 34 files changed, 90 insertions(+), 86 deletions(-) diff --git a/package-lock.json b/package-lock.json index ecf8880..50720b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,13 +45,13 @@ "@rdlabo/capacitor-screenshot-event": "8.0.0", "@rdlabo/eslint-plugin-rules": "22.1.0", "@rdlabo/ionic-angular-collect-icons": "3.0.0", - "@rdlabo/ionic-angular-kit": "22.0.0", - "@rdlabo/ionic-angular-photo-editor": "22.0.0", - "@rdlabo/ionic-angular-scroll-header": "22.0.0", + "@rdlabo/ionic-angular-kit": "22.0.3", + "@rdlabo/ionic-angular-photo-editor": "22.0.3", + "@rdlabo/ionic-angular-scroll-header": "22.0.3", "@rdlabo/ionic-theme-ios26": "9.2.0", "@rdlabo/ionic-theme-ios27": "0.1.0-1", "@rdlabo/ionic-theme-md3": "9.1.0", - "@rdlabo/ngx-cdk-scroll-strategies": "22.0.0", + "@rdlabo/ngx-cdk-scroll-strategies": "22.0.3", "@rdlabo/workers-hono-kit": "0.12.2", "@rdlabo/workers-mysql": "0.12.2", "@rdlabo/workers-timezone": "0.12.2", @@ -5173,9 +5173,9 @@ } }, "node_modules/@rdlabo/ionic-angular-kit": { - "version": "22.0.0", - "resolved": "https://registry.npmjs.org/@rdlabo/ionic-angular-kit/-/ionic-angular-kit-22.0.0.tgz", - "integrity": "sha512-u/+dlI2DH0yNTBQD6QnOZl7ES5zeVB5VHaUqYMzYae+odGq29e3qMUIoLHRmgztKZIfp+dX9bz8eHaklCO389A==", + "version": "22.0.3", + "resolved": "https://registry.npmjs.org/@rdlabo/ionic-angular-kit/-/ionic-angular-kit-22.0.3.tgz", + "integrity": "sha512-n24V29oPrcq54VvL+muHS3Q4hfnrTGrMbfo5TUEZ3yQyqtj9D7zWMWzt98OCi3qusLxrwcFcILF3aOkFXXPxDw==", "dev": true, "dependencies": { "tslib": "^2.3.0" @@ -5186,7 +5186,6 @@ "@angular/forms": ">=21.0.0 <23.0.0", "@angular/router": ">=21.0.0 <23.0.0", "@angular/service-worker": ">=21.0.0 <23.0.0", - "@capacitor-community/apple-sign-in": "*", "@capacitor-community/facebook-login": ">=8.0.0 <9.0.0", "@capacitor-community/in-app-review": ">=7.0.0 <9.0.0", "@capacitor/app": ">=7.0.0 <9.0.0", @@ -5196,6 +5195,8 @@ "@capacitor/network": ">=7.0.0 <9.0.0", "@capacitor/preferences": ">=7.0.0 <9.0.0", "@capacitor/status-bar": ">=7.0.0 <9.0.0", + "@capawesome/capacitor-apple-sign-in": ">=0.1.4 <1", + "@capawesome/capacitor-google-sign-in": "^0.1.4", "@capawesome/capacitor-live-update": ">=7.0.0 <9.0.0", "@ionic/angular": "^9.0.0", "@ionic/storage-angular": "^4.0.0", @@ -5209,9 +5210,6 @@ "@angular/service-worker": { "optional": true }, - "@capacitor-community/apple-sign-in": { - "optional": true - }, "@capacitor-community/facebook-login": { "optional": true }, @@ -5224,6 +5222,12 @@ "@capacitor/status-bar": { "optional": true }, + "@capawesome/capacitor-apple-sign-in": { + "optional": true + }, + "@capawesome/capacitor-google-sign-in": { + "optional": true + }, "@capawesome/capacitor-live-update": { "optional": true }, @@ -5242,9 +5246,9 @@ } }, "node_modules/@rdlabo/ionic-angular-photo-editor": { - "version": "22.0.0", - "resolved": "https://registry.npmjs.org/@rdlabo/ionic-angular-photo-editor/-/ionic-angular-photo-editor-22.0.0.tgz", - "integrity": "sha512-UnSAnd6B0QvSoxn1XSW/myzVvt5lbynN4b+QtlWWEOk5MkyNeweYlwNxfJYYcZxsSbj2jtHVk2/5qVeuFs4vWw==", + "version": "22.0.3", + "resolved": "https://registry.npmjs.org/@rdlabo/ionic-angular-photo-editor/-/ionic-angular-photo-editor-22.0.3.tgz", + "integrity": "sha512-vJXYXV0CJB1bTJR8KHHqGED4Bc1HEFfowI60G8KOZN42AQsj6xJPL0cFT7cgGIc7sPh/KcUo3uYUbaEpXdqe+A==", "dev": true, "dependencies": { "tslib": "^2.3.0" @@ -5275,9 +5279,9 @@ } }, "node_modules/@rdlabo/ionic-angular-scroll-header": { - "version": "22.0.0", - "resolved": "https://registry.npmjs.org/@rdlabo/ionic-angular-scroll-header/-/ionic-angular-scroll-header-22.0.0.tgz", - "integrity": "sha512-JJDLZ6f9tyh1/lo5YefvHNaAGAp3K4qresm7MJ8HlbJgq+mZSb5B2Zq8v5aUQlE/rqIT5MGHg3Ji+MBWi2EBJw==", + "version": "22.0.3", + "resolved": "https://registry.npmjs.org/@rdlabo/ionic-angular-scroll-header/-/ionic-angular-scroll-header-22.0.3.tgz", + "integrity": "sha512-36fmMYL7Cow75YZnWFHk8sZXWLIwwDuil+1WWAucK3kQBT0Q6TBj3mBBiy0Dno+/8prQFQaUv7sLa9h9M35GTg==", "dev": true, "dependencies": { "tslib": "^2.3.0" @@ -5320,9 +5324,9 @@ } }, "node_modules/@rdlabo/ngx-cdk-scroll-strategies": { - "version": "22.0.0", - "resolved": "https://registry.npmjs.org/@rdlabo/ngx-cdk-scroll-strategies/-/ngx-cdk-scroll-strategies-22.0.0.tgz", - "integrity": "sha512-lWeIpJK8/2pMSO4o2KPzv9fVo3DXMDM7cEN7jvORqPalUpW5fI0PLuxmIvkrE/5AJyP3xwp3faq88Bele0Heew==", + "version": "22.0.3", + "resolved": "https://registry.npmjs.org/@rdlabo/ngx-cdk-scroll-strategies/-/ngx-cdk-scroll-strategies-22.0.3.tgz", + "integrity": "sha512-K040VFA5EGQaReEOVmWiwYdUbsJt9+pL1ncpBd+7hlgVBBVjEX+udKOpM9ZhsO63iCMIn+FWi6Vy3xv+uXes0w==", "dev": true, "dependencies": { "tslib": "^2.3.0" diff --git a/package.json b/package.json index e0de336..8f103ae 100644 --- a/package.json +++ b/package.json @@ -79,13 +79,13 @@ "@rdlabo/capacitor-screenshot-event": "8.0.0", "@rdlabo/eslint-plugin-rules": "22.1.0", "@rdlabo/ionic-angular-collect-icons": "3.0.0", - "@rdlabo/ionic-angular-kit": "22.0.0", - "@rdlabo/ionic-angular-photo-editor": "22.0.0", - "@rdlabo/ionic-angular-scroll-header": "22.0.0", + "@rdlabo/ionic-angular-kit": "22.0.3", + "@rdlabo/ionic-angular-photo-editor": "22.0.3", + "@rdlabo/ionic-angular-scroll-header": "22.0.3", "@rdlabo/ionic-theme-ios26": "9.2.0", "@rdlabo/ionic-theme-ios27": "0.1.0-1", "@rdlabo/ionic-theme-md3": "9.1.0", - "@rdlabo/ngx-cdk-scroll-strategies": "22.0.0", + "@rdlabo/ngx-cdk-scroll-strategies": "22.0.3", "@rdlabo/workers-hono-kit": "0.12.2", "@rdlabo/workers-mysql": "0.12.2", "@rdlabo/workers-timezone": "0.12.2", diff --git a/projects/docs/src/app/docs/plugin-index.spec.ts b/projects/docs/src/app/docs/plugin-index.spec.ts index ae9d10e..3745b0c 100644 --- a/projects/docs/src/app/docs/plugin-index.spec.ts +++ b/projects/docs/src/app/docs/plugin-index.spec.ts @@ -172,7 +172,7 @@ describe('PluginIndexComponent', () => { 'primaryHyperdrive', ); const ionic = await loadProject('ionic-angular-kit', 'ja'); - expect(ionic?.version).toBe('22.0.0'); + expect(ionic?.version).toBe('22.0.3'); expect(ionic?.pages.find((page) => page.slug === 'offline-realtime')?.html).toContain( 'createOfflineAuthBridge', ); diff --git a/projects/docs/src/app/generated/project-catalog.generated.ts b/projects/docs/src/app/generated/project-catalog.generated.ts index ce8df68..edd8f1d 100644 --- a/projects/docs/src/app/generated/project-catalog.generated.ts +++ b/projects/docs/src/app/generated/project-catalog.generated.ts @@ -133,7 +133,7 @@ export const PROJECTS_EN = [ "repositoryUrl": "https://github.com/rdlabo-dev/ionic-angular-library", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Shared application infrastructure for Ionic Angular projects.", "headline": "Build consistent, resilient Ionic Angular applications", "overview": "Save typed preferences, open modals with typed results, and connect Ionic controls to Angular Signal Forms. Add authentication and native features as your app grows.", @@ -230,7 +230,7 @@ export const PROJECTS_EN = [ "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/photo-editor", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Photo editing and viewing flows for Ionic Angular and Capacitor applications.", "headline": "Edit and review photos in Ionic modals", "overview": "Load photos from camera or album, crop and edit images, and present a configurable photo viewer from one Ionic Angular package.", @@ -316,7 +316,7 @@ export const PROJECTS_EN = [ "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/scroll-header", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Scroll-aware header directives for Ionic and Angular CDK viewports.", "headline": "Build headers that respond to content scrolling", "overview": "Hide and reveal Ionic headers for IonContent and CDK virtual scrolling while preserving safe-area and native-header layouts.", @@ -395,7 +395,7 @@ export const PROJECTS_EN = [ "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "seoTitle": "Angular CDK Virtual Scroll: Variable Item Heights | rdlabo", "description": "Use Angular CDK virtual scroll with variable or dynamic item heights. Supply exact per-item sizes for stable lists, chat UIs, and reverse scrolling.", "headline": "Angular CDK virtual scroll with variable item heights", @@ -2294,7 +2294,7 @@ export const PROJECTS_JA = [ "repositoryUrl": "https://github.com/rdlabo-dev/ionic-angular-library", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Ionic Angularプロジェクト向けの共有アプリケーション基盤。", "headline": "一貫性と耐障害性を備えたIonic Angularアプリを構築する", "overview": "型安全な設定の保存、戻り値に型が付くモーダル、IonicとAngular Signal Formsの連携から始められます。認証やNative機能は必要に応じて追加できます。", @@ -2391,7 +2391,7 @@ export const PROJECTS_JA = [ "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/photo-editor", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Ionic Angular・Capacitorアプリ向けの写真編集・閲覧フロー。", "headline": "Ionic Modalで写真を編集・確認する", "overview": "カメラやアルバムから写真を読み込み、切り抜き・編集し、設定可能な写真Viewerを1つのIonic Angularパッケージから利用できます。", @@ -2477,7 +2477,7 @@ export const PROJECTS_JA = [ "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/scroll-header", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Ionic・Angular CDK viewport向けのScroll連動Header Directive。", "headline": "Scrollに追従するHeaderを実装する", "overview": "Safe AreaとNative Headerレイアウトを維持しながら、IonContentとCDK Virtual Scrollに応じてIonic Headerを表示・非表示にします。", @@ -2556,7 +2556,7 @@ export const PROJECTS_JA = [ "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "seoTitle": "Angular CDK Virtual Scrollの可変アイテム高さ対応 | rdlabo", "description": "Angular CDK Virtual Scrollで可変・動的なItem Heightに対応。Itemごとの正確なSizeにより、List、Chat UI、Reverse Scrollを安定させます。", "headline": "Angular CDK Virtual Scrollを可変Item Heightに対応", diff --git a/projects/docs/src/app/generated/projects/ionic-angular-kit.en.generated.ts b/projects/docs/src/app/generated/projects/ionic-angular-kit.en.generated.ts index e9afef5..78bef34 100644 --- a/projects/docs/src/app/generated/projects/ionic-angular-kit.en.generated.ts +++ b/projects/docs/src/app/generated/projects/ionic-angular-kit.en.generated.ts @@ -8,7 +8,7 @@ export const PROJECT = { "repositoryUrl": "https://github.com/rdlabo-dev/ionic-angular-library", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Shared application infrastructure for Ionic Angular projects.", "headline": "Build consistent, resilient Ionic Angular applications", "overview": "Save typed preferences, open modals with typed results, and connect Ionic controls to Angular Signal Forms. Add authentication and native features as your app grows.", diff --git a/projects/docs/src/app/generated/projects/ionic-angular-kit.ja.generated.ts b/projects/docs/src/app/generated/projects/ionic-angular-kit.ja.generated.ts index 0a6d1a3..5d94397 100644 --- a/projects/docs/src/app/generated/projects/ionic-angular-kit.ja.generated.ts +++ b/projects/docs/src/app/generated/projects/ionic-angular-kit.ja.generated.ts @@ -8,7 +8,7 @@ export const PROJECT = { "repositoryUrl": "https://github.com/rdlabo-dev/ionic-angular-library", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Ionic Angularプロジェクト向けの共有アプリケーション基盤。", "headline": "一貫性と耐障害性を備えたIonic Angularアプリを構築する", "overview": "型安全な設定の保存、戻り値に型が付くモーダル、IonicとAngular Signal Formsの連携から始められます。認証やNative機能は必要に応じて追加できます。", @@ -290,7 +290,7 @@ export const PROJECT = { "file": "api.md", "section": "リファレンス", "path": "/projects/ionic-angular-kit/docs/api", - "html": "

@rdlabo/ionic-angular-kit v22.0.0 のpublic entry point一覧です。Lifecycleと統合要件は各Guideで説明し、このページではAPI familyを所有するpackage pathを定義します。

\n

Core

\n

module @rdlabo/ionic-angular-kit

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
API familyPrincipal exportsGuide
StorageKitStorageService, kitClearStoragePreservingKeysStorage・Overlay
OverlayprovideKitOverlay, KitOverlayController, KitLoadingControllerStorage・Overlay
AuthenticationprovideKitAuth、Guard function、KitAuthAccessService認証・HTTP
HTTPprovideKitHttp, kitAuthInterceptor認証・HTTP
RealtimeKitRealtimeConnection, KitRealtimeLivenessWatchdogOffline・Realtime
\n\n

Optional entry point

\n

module @rdlabo/ionic-angular-kit/offline

Offline repository、同期Replica、Outbox、Request Policy、Schema、Identity、Recovery APIです。Composition Rootには provideOffline または用途別Providerを使います。

\n\n

module @rdlabo/ionic-angular-kit/forms

Angular 22 Signal FormsをIonic controlへadaptする KitIonicFormField、provideKitIonicSignalForms、kitDefaultSignalFormErrorMessage、KIT_SIGNAL_FORM_ERROR_MESSAGE_RESOLVER、KitSignalFormErrorMessageResolver です。フォームも参照してください。

\n\n

module @rdlabo/ionic-angular-kit/auth-firebase

Firebase Authentication Providerと、Sign-in、Sign-up、Link、Reauthentication、Verification、Password、Account更新の型付き関数です。

\n\n

module @rdlabo/ionic-angular-kit/auth-firebase/social

Apple・Facebook Social Authentication helperとresponse・option typeです。

\n\n

module @rdlabo/ionic-angular-kit/app-update

Angular Service Workerのupdateを連携する provideKitAppUpdate と KitAppUpdateService です。

\n\n

module @rdlabo/ionic-angular-kit/live-update

Live Updateの起動準備を連携する provideLiveUpdateReadiness です。

\n\n

module @rdlabo/ionic-angular-kit/printer

PDF Layout、DOM-to-PNG、Preview、Download、Rotation、Paper Size、Brother Print設定のhelperです。

\n\n

module @rdlabo/ionic-angular-kit/review

Native Review Prompt用の kitRequestReview と KitRequestReviewOptions です。

\n\n

module @rdlabo/ionic-angular-kit/theme

Theme選択を保存する provideKitTheme、KitThemeController、KitThemeConfig、KitThemeMode です。

\n\n
", + "html": "

@rdlabo/ionic-angular-kit v22.0.3 のpublic entry point一覧です。Lifecycleと統合要件は各Guideで説明し、このページではAPI familyを所有するpackage pathを定義します。

\n

Core

\n

module @rdlabo/ionic-angular-kit

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
API familyPrincipal exportsGuide
StorageKitStorageService, kitClearStoragePreservingKeysStorage・Overlay
OverlayprovideKitOverlay, KitOverlayController, KitLoadingControllerStorage・Overlay
AuthenticationprovideKitAuth、Guard function、KitAuthAccessService認証・HTTP
HTTPprovideKitHttp, kitAuthInterceptor認証・HTTP
RealtimeKitRealtimeConnection, KitRealtimeLivenessWatchdogOffline・Realtime
\n\n

Optional entry point

\n

module @rdlabo/ionic-angular-kit/offline

Offline repository、同期Replica、Outbox、Request Policy、Schema、Identity、Recovery APIです。Composition Rootには provideOffline または用途別Providerを使います。

\n\n

module @rdlabo/ionic-angular-kit/forms

Angular 22 Signal FormsをIonic controlへadaptする KitIonicFormField、provideKitIonicSignalForms、kitDefaultSignalFormErrorMessage、KIT_SIGNAL_FORM_ERROR_MESSAGE_RESOLVER、KitSignalFormErrorMessageResolver です。フォームも参照してください。

\n\n

module @rdlabo/ionic-angular-kit/auth-firebase

Firebase Authentication Providerと、Sign-in、Sign-up、Link、Reauthentication、Verification、Password、Account更新の型付き関数です。

\n\n

module @rdlabo/ionic-angular-kit/auth-firebase/social

Apple・Facebook Social Authentication helperとresponse・option typeです。

\n\n

module @rdlabo/ionic-angular-kit/app-update

Angular Service Workerのupdateを連携する provideKitAppUpdate と KitAppUpdateService です。

\n\n

module @rdlabo/ionic-angular-kit/live-update

Live Updateの起動準備を連携する provideLiveUpdateReadiness です。

\n\n

module @rdlabo/ionic-angular-kit/printer

PDF Layout、DOM-to-PNG、Preview、Download、Rotation、Paper Size、Brother Print設定のhelperです。

\n\n

module @rdlabo/ionic-angular-kit/review

Native Review Prompt用の kitRequestReview と KitRequestReviewOptions です。

\n\n

module @rdlabo/ionic-angular-kit/theme

Theme選択を保存する provideKitTheme、KitThemeController、KitThemeConfig、KitThemeMode です。

\n\n
", "headings": [ { "id": "core", diff --git a/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.en.generated.ts b/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.en.generated.ts index f267a46..c91d9c6 100644 --- a/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.en.generated.ts +++ b/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.en.generated.ts @@ -9,7 +9,7 @@ export const PROJECT = { "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/photo-editor", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Photo editing and viewing flows for Ionic Angular and Capacitor applications.", "headline": "Edit and review photos in Ionic modals", "overview": "Load photos from camera or album, crop and edit images, and present a configurable photo viewer from one Ionic Angular package.", @@ -41,7 +41,7 @@ export const PROJECT = { "file": "readme.md", "section": "Quickstart", "path": "/projects/ionic-angular-photo-editor/docs/readme", - "html": "

Photo editor and viewer modal pages for Ionic Angular applications, with browser file selection and optional Capacitor camera/album support.

\n

Installation

\n
npm install @rdlabo/ionic-angular-photo-editor tui-image-editor\n

Select and display a photo in the browser

\n

Register the TUI resize adapter (required for loadPhoto resizing), then pick a file and show the returned data URL:

\n
import { Component, inject, signal } from '@angular/core';\nimport type { ApplicationConfig } from '@angular/core';\nimport { IonButton, IonImg } from '@ionic/angular';\nimport { providePhotoEditor, PhotoLoadError } from '@rdlabo/ionic-angular-photo-editor';\nimport { createTuiImageEditor } from '@rdlabo/ionic-angular-photo-editor/editor/tui';\nimport { PhotoFileService } from '@rdlabo/ionic-angular-photo-editor/file';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    providePhotoEditor({\n      maxSize: 1000,\n      createImageEditor: createTuiImageEditor,\n    }),\n  ],\n};\n\n@Component({\n  selector: 'app-photo-pick',\n  imports: [IonButton, IonImg],\n  template: `\n    <ion-button type=\"button\" (click)=\"pick()\">Select photo</ion-button>\n    @if (previewUrl()) {\n      <ion-img [src]=\"previewUrl()\" alt=\"Selected photo\"></ion-img>\n    }\n  `,\n})\nexport class PhotoPickPage {\n  private readonly photoFileService = inject(PhotoFileService);\n  readonly previewUrl = signal('');\n\n  async pick(): Promise<void> {\n    try {\n      const files = await this.photoFileService.loadPhoto({ limit: 1 });\n      this.previewUrl.set(files[0] ?? '');\n    } catch (error) {\n      if (error instanceof PhotoLoadError && error.code === 'cancelled') {\n        return;\n      }\n      throw error;\n    }\n  }\n}\n

Click Select photo, choose an image — the preview appears. Native camera/album setup comes later under PhotoFileService.

\n

Add a viewer or native camera

\n

Install the dependencies for the features you add:

\n
# viewer\nnpm install swiper\n\n# native camera and album selection\nnpm install @capacitor/camera\n

For native camera access, configure Camera permissions and the adapter in PhotoFileService. Native iOS apps require iOS/iPadOS 16.4 or later.

\n

Package entry points

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Import pathExports
@rdlabo/ionic-angular-photo-editorTypes, providePhotoEditor, PHOTO_EDITOR_CONFIG, PhotoLoadError
@rdlabo/ionic-angular-photo-editor/editorPhotoEditorPage
@rdlabo/ionic-angular-photo-editor/editor/tuiopt-in createTuiImageEditor adapter
@rdlabo/ionic-angular-photo-editor/viewerPhotoViewerPage
@rdlabo/ionic-angular-photo-editor/filePhotoFileService
@rdlabo/ionic-angular-photo-editor/file/capacitoropt-in loadCapacitorPhotoCamera adapter
\n

Import components and services only from their entry point. Import shared types and configuration from the root package.

\n

Choose by editing goal

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GoalGuide
Load a photo from camera or albumPhotoFileService
Crop and edit in a modalPhoto Editor
Browse images in a modalPhoto Viewer
Override editor colorsTheme
Upgrade from an earlier releaseMigration guide
\n", + "html": "

Photo editor and viewer modal pages for Ionic Angular applications, with browser file selection and optional Capacitor camera/album support.

\n

Installation

\n
npm install @rdlabo/ionic-angular-photo-editor tui-image-editor\n

Select and display a photo in the browser

\n

Register the TUI resize adapter (required for loadPhoto resizing), then pick a file and show the returned data URL:

\n
import { Component, inject, signal } from '@angular/core';\nimport type { ApplicationConfig } from '@angular/core';\nimport { IonButton, IonImg } from '@ionic/angular';\nimport { providePhotoEditor, PhotoLoadError } from '@rdlabo/ionic-angular-photo-editor';\nimport { createTuiImageEditor } from '@rdlabo/ionic-angular-photo-editor/editor/tui';\nimport { PhotoFileService } from '@rdlabo/ionic-angular-photo-editor/file';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    providePhotoEditor({\n      maxSize: 1000,\n      createImageEditor: createTuiImageEditor,\n    }),\n  ],\n};\n\n@Component({\n  selector: 'app-photo-pick',\n  imports: [IonButton, IonImg],\n  template: `\n    <ion-button type=\"button\" (click)=\"pick()\">Select photo</ion-button>\n    @if (previewUrl()) {\n      <ion-img [src]=\"previewUrl()\" alt=\"Selected photo\"></ion-img>\n    }\n  `,\n})\nexport class PhotoPickPage {\n  private readonly photoFileService = inject(PhotoFileService);\n  readonly previewUrl = signal('');\n\n  async pick(): Promise<void> {\n    try {\n      const files = await this.photoFileService.loadPhoto({ limit: 1 });\n      this.previewUrl.set(files[0] ?? '');\n    } catch (error) {\n      if (error instanceof PhotoLoadError && error.code === 'cancelled') {\n        return;\n      }\n      throw error;\n    }\n  }\n}\n

Click Select photo, choose an image — the preview appears. Native camera/album setup comes later under PhotoFileService.

\n

Add a viewer or native camera

\n

Install the dependencies for the features you add:

\n
# viewer\nnpm install swiper\n\n# native camera and album selection\nnpm install @capacitor/camera\n

For native camera access, configure Camera permissions and the adapter in PhotoFileService. Native iOS apps require iOS/iPadOS 16.4 or later.

\n

Package entry points

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Import pathExports
@rdlabo/ionic-angular-photo-editorTypes, providePhotoEditor, PHOTO_EDITOR_CONFIG, PhotoLoadError
@rdlabo/ionic-angular-photo-editor/editorPhotoEditorPage
@rdlabo/ionic-angular-photo-editor/editor/tuiopt-in createTuiImageEditor adapter
@rdlabo/ionic-angular-photo-editor/viewerPhotoViewerPage
@rdlabo/ionic-angular-photo-editor/filePhotoFileService
@rdlabo/ionic-angular-photo-editor/file/capacitoropt-in loadCapacitorPhotoCamera adapter
\n

Import components and services only from their entry point. Import shared types and configuration from the root package.

\n

Choose by editing goal

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GoalGuide
Load a photo from camera or albumPhotoFileService
Crop and edit in a modalPhoto Editor
Browse images in a modalPhoto Viewer
Override editor colorsTheme
Upgrade from an earlier releaseMigration guide
\n", "headings": [ { "id": "installation", @@ -253,7 +253,7 @@ export const PROJECT = { "file": "theme.md", "section": "Guides", "path": "/projects/ionic-angular-photo-editor/docs/theme", - "html": "

Override the editor colors after Installation.

\n

Default colors are defined in the library stylesheet. Override them with CSS variables:

\n
:root {\n  --ion-photo-editor-background: #2a2a2a;\n  --ion-photo-editor-background-tint: #414141;\n\n  --ion-photo-editor-color: #f0f0f0;\n  --ion-photo-editor-color-tint: #dbdbdb;\n\n  --ion-photo-editor-primary: #4d8dff;\n  --ion-photo-editor-danger: #f24c58;\n  --ion-photo-editor-success: #2dd55b;\n\n  --ion-photo-editor-header-button-color-on-light: #222428;\n  --ion-photo-editor-header-button-color-on-dark: #f4f5f8;\n}\n

Source reference: core.scss.

\n

Toolbar color scheme

\n

PhotoEditorPage and PhotoViewerPage require toolbarColorScheme: 'light' | 'dark' in modal componentProps. Select dark for a dark/black ion-toolbar and light for a light/white toolbar. The consumer must choose because the library cannot reliably infer the final toolbar appearance from CSS, translucency, or runtime theme overrides.

\n

For @rdlabo/ionic-theme-ios26 v3, import the optional integration stylesheet after the iOS 26 theme and dark-mode styles:

\n
@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.css';\n@import '@ionic/angular/css/palettes/dark.class.css';\n@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-class.css';\n@import '@rdlabo/ionic-angular-photo-editor/css/ios26-header-button-color-scheme.css';\n

Use the matching Always or System dark-mode import instead when appropriate. The photo-editor integration stylesheet must remain last so its local header scheme can override the ambient application scheme. Applications that do not use the iOS 26 theme should not import this optional stylesheet; they receive only the regular Ionic button foreground-color switch.

\n", + "html": "

Override the editor colors after Installation.

\n

Default colors are defined in the library stylesheet. Override them with CSS variables:

\n
:root {\n  --ion-photo-editor-background: #2a2a2a;\n  --ion-photo-editor-background-tint: #414141;\n\n  --ion-photo-editor-color: #f0f0f0;\n  --ion-photo-editor-color-tint: #dbdbdb;\n\n  --ion-photo-editor-primary: #4d8dff;\n  --ion-photo-editor-danger: #f24c58;\n  --ion-photo-editor-success: #2dd55b;\n\n  --ion-photo-editor-header-button-color-on-light: #222428;\n  --ion-photo-editor-header-button-color-on-dark: #f4f5f8;\n}\n

Source reference: core.scss.

\n

Toolbar color scheme

\n

PhotoEditorPage and PhotoViewerPage require toolbarColorScheme: 'light' | 'dark' in modal componentProps. Select dark for a dark/black ion-toolbar and light for a light/white toolbar. The consumer must choose because the library cannot reliably infer the final toolbar appearance from CSS, translucency, or runtime theme overrides.

\n

For @rdlabo/ionic-theme-ios26 v3, import the optional integration stylesheet after the iOS 26 theme and dark-mode styles:

\n
@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.css';\n@import '@ionic/angular/css/palettes/dark.class.css';\n@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-class.css';\n@import '@rdlabo/ionic-angular-photo-editor/css/ios26-header-button-color-scheme.css';\n

Use the matching Always or System dark-mode import instead when appropriate. The photo-editor integration stylesheet must remain last so its local header scheme can override the ambient application scheme. Applications that do not use the iOS 26 theme should not import this optional stylesheet; they receive only the regular Ionic button foreground-color switch.

\n", "headings": [ { "id": "toolbar-color-scheme", diff --git a/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.ja.generated.ts b/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.ja.generated.ts index b16fc35..f46da15 100644 --- a/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.ja.generated.ts +++ b/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.ja.generated.ts @@ -9,7 +9,7 @@ export const PROJECT = { "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/photo-editor", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Ionic Angular・Capacitorアプリ向けの写真編集・閲覧フロー。", "headline": "Ionic Modalで写真を編集・確認する", "overview": "カメラやアルバムから写真を読み込み、切り抜き・編集し、設定可能な写真Viewerを1つのIonic Angularパッケージから利用できます。", @@ -41,7 +41,7 @@ export const PROJECT = { "file": "readme.md", "section": "クイックスタート", "path": "/projects/ionic-angular-photo-editor/docs/readme", - "html": "

Ionic Angularアプリ向けのPhoto Editor・Viewer Modal Pageです。Browserのfile選択に対応し、任意でCapacitorのCamera・Albumも使えます。

\n

Installation

\n
npm install @rdlabo/ionic-angular-photo-editor tui-image-editor\n

ブラウザで写真を選んで表示する

\n

TUIのresize adapterを登録し（loadPhoto のresizeに必須）、fileを選んで返されたdata URLを表示します。

\n
import { Component, inject, signal } from '@angular/core';\nimport type { ApplicationConfig } from '@angular/core';\nimport { IonButton, IonImg } from '@ionic/angular';\nimport { providePhotoEditor, PhotoLoadError } from '@rdlabo/ionic-angular-photo-editor';\nimport { createTuiImageEditor } from '@rdlabo/ionic-angular-photo-editor/editor/tui';\nimport { PhotoFileService } from '@rdlabo/ionic-angular-photo-editor/file';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    providePhotoEditor({\n      maxSize: 1000,\n      createImageEditor: createTuiImageEditor,\n    }),\n  ],\n};\n\n@Component({\n  selector: 'app-photo-pick',\n  imports: [IonButton, IonImg],\n  template: `\n    <ion-button type=\"button\" (click)=\"pick()\">Select photo</ion-button>\n    @if (previewUrl()) {\n      <ion-img [src]=\"previewUrl()\" alt=\"Selected photo\"></ion-img>\n    }\n  `,\n})\nexport class PhotoPickPage {\n  private readonly photoFileService = inject(PhotoFileService);\n  readonly previewUrl = signal('');\n\n  async pick(): Promise<void> {\n    try {\n      const files = await this.photoFileService.loadPhoto({ limit: 1 });\n      this.previewUrl.set(files[0] ?? '');\n    } catch (error) {\n      if (error instanceof PhotoLoadError && error.code === 'cancelled') {\n        return;\n      }\n      throw error;\n    }\n  }\n}\n

Select photoをクリックして画像を選ぶと、previewが表示されます。NativeのCamera・Album設定は後段のPhotoFileServiceです。

\n

Viewer・ネイティブカメラを追加する

\n

追加する機能に合わせて依存をインストールします。

\n
# viewer\nnpm install swiper\n\n# native camera and album selection\nnpm install @capacitor/camera\n

ネイティブカメラを使う場合は、カメラ権限とPhotoFileServiceのadapterを設定します。iOSアプリの対象はiOS/iPadOS 16.4以降です。

\n

Package entry point

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Import pathExport
@rdlabo/ionic-angular-photo-editor型、providePhotoEditor、PHOTO_EDITOR_CONFIG、PhotoLoadError
@rdlabo/ionic-angular-photo-editor/editorPhotoEditorPage
@rdlabo/ionic-angular-photo-editor/editor/tuiopt-inの createTuiImageEditor adapter
@rdlabo/ionic-angular-photo-editor/viewerPhotoViewerPage
@rdlabo/ionic-angular-photo-editor/filePhotoFileService
@rdlabo/ionic-angular-photo-editor/file/capacitoropt-inの loadCapacitorPhotoCamera adapter
\n

ComponentとServiceは、そのentry pointからだけimportしてください。共有型と設定はroot packageからimportします。

\n

編集目的から選ぶ

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
目的ガイド
CameraまたはAlbumから写真を読み込むPhotoFileService
Modalで切り抜き・編集するPhoto Editor
Modalで画像を閲覧するPhoto Viewer
Editorの色を上書きするTheme
以前のreleaseからupgradeするMigration guide
\n", + "html": "

Ionic Angularアプリ向けのPhoto Editor・Viewer Modal Pageです。Browserのfile選択に対応し、任意でCapacitorのCamera・Albumも使えます。

\n

Installation

\n
npm install @rdlabo/ionic-angular-photo-editor tui-image-editor\n

ブラウザで写真を選んで表示する

\n

TUIのresize adapterを登録し（loadPhoto のresizeに必須）、fileを選んで返されたdata URLを表示します。

\n
import { Component, inject, signal } from '@angular/core';\nimport type { ApplicationConfig } from '@angular/core';\nimport { IonButton, IonImg } from '@ionic/angular';\nimport { providePhotoEditor, PhotoLoadError } from '@rdlabo/ionic-angular-photo-editor';\nimport { createTuiImageEditor } from '@rdlabo/ionic-angular-photo-editor/editor/tui';\nimport { PhotoFileService } from '@rdlabo/ionic-angular-photo-editor/file';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    providePhotoEditor({\n      maxSize: 1000,\n      createImageEditor: createTuiImageEditor,\n    }),\n  ],\n};\n\n@Component({\n  selector: 'app-photo-pick',\n  imports: [IonButton, IonImg],\n  template: `\n    <ion-button type=\"button\" (click)=\"pick()\">Select photo</ion-button>\n    @if (previewUrl()) {\n      <ion-img [src]=\"previewUrl()\" alt=\"Selected photo\"></ion-img>\n    }\n  `,\n})\nexport class PhotoPickPage {\n  private readonly photoFileService = inject(PhotoFileService);\n  readonly previewUrl = signal('');\n\n  async pick(): Promise<void> {\n    try {\n      const files = await this.photoFileService.loadPhoto({ limit: 1 });\n      this.previewUrl.set(files[0] ?? '');\n    } catch (error) {\n      if (error instanceof PhotoLoadError && error.code === 'cancelled') {\n        return;\n      }\n      throw error;\n    }\n  }\n}\n

Select photoをクリックして画像を選ぶと、previewが表示されます。NativeのCamera・Album設定は後段のPhotoFileServiceです。

\n

Viewer・ネイティブカメラを追加する

\n

追加する機能に合わせて依存をインストールします。

\n
# viewer\nnpm install swiper\n\n# native camera and album selection\nnpm install @capacitor/camera\n

ネイティブカメラを使う場合は、カメラ権限とPhotoFileServiceのadapterを設定します。iOSアプリの対象はiOS/iPadOS 16.4以降です。

\n

Package entry point

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Import pathExport
@rdlabo/ionic-angular-photo-editor型、providePhotoEditor、PHOTO_EDITOR_CONFIG、PhotoLoadError
@rdlabo/ionic-angular-photo-editor/editorPhotoEditorPage
@rdlabo/ionic-angular-photo-editor/editor/tuiopt-inの createTuiImageEditor adapter
@rdlabo/ionic-angular-photo-editor/viewerPhotoViewerPage
@rdlabo/ionic-angular-photo-editor/filePhotoFileService
@rdlabo/ionic-angular-photo-editor/file/capacitoropt-inの loadCapacitorPhotoCamera adapter
\n

ComponentとServiceは、そのentry pointからだけimportしてください。共有型と設定はroot packageからimportします。

\n

編集目的から選ぶ

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
目的ガイド
CameraまたはAlbumから写真を読み込むPhotoFileService
Modalで切り抜き・編集するPhoto Editor
Modalで画像を閲覧するPhoto Viewer
Editorの色を上書きするTheme
以前のreleaseからupgradeするMigration guide
\n", "headings": [ { "id": "installation", @@ -253,7 +253,7 @@ export const PROJECT = { "file": "theme.md", "section": "ガイド", "path": "/projects/ionic-angular-photo-editor/docs/theme", - "html": "

Installationの後に、Editorの色を上書きします。

\n

Default colorはlibrary stylesheetで定義されています。CSS variableで上書きします。

\n
:root {\n  --ion-photo-editor-background: #2a2a2a;\n  --ion-photo-editor-background-tint: #414141;\n\n  --ion-photo-editor-color: #f0f0f0;\n  --ion-photo-editor-color-tint: #dbdbdb;\n\n  --ion-photo-editor-primary: #4d8dff;\n  --ion-photo-editor-danger: #f24c58;\n  --ion-photo-editor-success: #2dd55b;\n\n  --ion-photo-editor-header-button-color-on-light: #222428;\n  --ion-photo-editor-header-button-color-on-dark: #f4f5f8;\n}\n

Source reference: core.scss

\n

Toolbar color scheme

\n

PhotoEditorPage と PhotoViewerPage では、Modalの componentProps に toolbarColorScheme: 'light' | 'dark' を指定する必要があります。暗色・黒色の ion-toolbar には dark、明色・白色のToolbarには light を選択してください。最終的なToolbarの外観はCSS、translucency、runtime theme overrideによって変わるため、Library側では確実に判定できません。利用側で明示的に選択する必要があります。

\n

@rdlabo/ionic-theme-ios26 v3では、iOS 26 ThemeとDark Mode styleより後に、任意のintegration stylesheetをimportします。

\n
@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.css';\n@import '@ionic/angular/css/palettes/dark.class.css';\n@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-class.css';\n@import '@rdlabo/ionic-angular-photo-editor/css/ios26-header-button-color-scheme.css';\n

必要に応じて、対応するAlwaysまたはSystem Dark Mode用のimportへ置き換えてください。Photo Editor integration stylesheetは、local header schemeがアプリ全体のschemeを上書きできるよう、必ず最後に読み込みます。iOS 26 Themeを使わないアプリでは、この任意stylesheetをimportしないでください。その場合は通常のIonic Button foreground color switchだけが適用されます。

\n", + "html": "

Installationの後に、Editorの色を上書きします。

\n

Default colorはlibrary stylesheetで定義されています。CSS variableで上書きします。

\n
:root {\n  --ion-photo-editor-background: #2a2a2a;\n  --ion-photo-editor-background-tint: #414141;\n\n  --ion-photo-editor-color: #f0f0f0;\n  --ion-photo-editor-color-tint: #dbdbdb;\n\n  --ion-photo-editor-primary: #4d8dff;\n  --ion-photo-editor-danger: #f24c58;\n  --ion-photo-editor-success: #2dd55b;\n\n  --ion-photo-editor-header-button-color-on-light: #222428;\n  --ion-photo-editor-header-button-color-on-dark: #f4f5f8;\n}\n

Source reference: core.scss

\n

Toolbar color scheme

\n

PhotoEditorPage と PhotoViewerPage では、Modalの componentProps に toolbarColorScheme: 'light' | 'dark' を指定する必要があります。暗色・黒色の ion-toolbar には dark、明色・白色のToolbarには light を選択してください。最終的なToolbarの外観はCSS、translucency、runtime theme overrideによって変わるため、Library側では確実に判定できません。利用側で明示的に選択する必要があります。

\n

@rdlabo/ionic-theme-ios26 v3では、iOS 26 ThemeとDark Mode styleより後に、任意のintegration stylesheetをimportします。

\n
@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.css';\n@import '@ionic/angular/css/palettes/dark.class.css';\n@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-class.css';\n@import '@rdlabo/ionic-angular-photo-editor/css/ios26-header-button-color-scheme.css';\n

必要に応じて、対応するAlwaysまたはSystem Dark Mode用のimportへ置き換えてください。Photo Editor integration stylesheetは、local header schemeがアプリ全体のschemeを上書きできるよう、必ず最後に読み込みます。iOS 26 Themeを使わないアプリでは、この任意stylesheetをimportしないでください。その場合は通常のIonic Button foreground color switchだけが適用されます。

\n", "headings": [ { "id": "toolbar-color-scheme", @@ -272,7 +272,7 @@ export const PROJECT = { "file": "api.md", "section": "リファレンス", "path": "/projects/ionic-angular-photo-editor/docs/api", - "html": "

@rdlabo/ionic-angular-photo-editor v22.0.0が公開するpublic entry pointのリファレンスです。Component、Service、任意実装は、それぞれ専用のsecondary entry pointからimportしてください。

\n

Entry point

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Import path主なexport
@rdlabo/ionic-angular-photo-editor設定、共有型、PhotoLoadError
@rdlabo/ionic-angular-photo-editor/editorPhotoEditorPage
@rdlabo/ionic-angular-photo-editor/editor/tuicreateTuiImageEditor
@rdlabo/ionic-angular-photo-editor/viewerPhotoViewerPage
@rdlabo/ionic-angular-photo-editor/filePhotoFileService
@rdlabo/ionic-angular-photo-editor/file/capacitorloadCapacitorPhotoCamera
\n

設定・写真読み込み

\n

function providePhotoEditor(config?: PhotoEditorConfig): EnvironmentProviders

アプリ全体の写真読み込みdefaultと、任意のEditor・Camera adapterを登録します。

\n\n

constant PHOTO_EDITOR_CONFIG

\n

解決済みの maxSize、label、Image Editor factory、Camera loaderを保持するAngular Injection Tokenです。

\n

interface PhotoEditorConfig

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionDefault
maxSizenumberResize後の長辺pixel数です。1000
labelsPartial<PhotoFileLabels>Camera、Album、Cancel labelの上書きです。undefined
createImageEditorPhotoImageEditorFactory編集・Resizeに使うadapterです。
loadCameraPhotoCameraLoaderNativeのCamera・Album選択に使うadapterです。
\n\n

class PhotoFileService

@rdlabo/ionic-angular-photo-editor/file からimportします。Browser・Capacitorから写真を選択し、正規化します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
loadPhoto(options?)(options?: PhotoLoadOptions) => Promise<string[]>Platform Pickerを開き、正規化したData URLを返します。
\n\n\n

interface PhotoLoadOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionDefault
limitnumberAlbum・Browserで選択する最大画像数です。1
maxSizenumberResize後の長辺pixel数です。設定済みの maxSize または 1000
labelsPartial<PhotoFileLabels>Request単位のNative Action Sheet label上書きです。設定済みのlabel
\n\n

class PhotoLoadError

想定される写真選択エラーの型付きErrorです。Readonlyの code は PhotoLoadErrorCode です。

\n\n

type alias PhotoLoadErrorCode

'cancelled' | 'invalid-type' | 'unavailable'

\n\n

interface PhotoFileLabels

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
camerastringCamera選択labelです。
albumstringAlbum選択labelです。
cancelstringCancel labelです。
\n\n

Editor

\n

component PhotoEditorPage

@rdlabo/ionic-angular-photo-editor/editor からimportし、Ionic Modalで表示します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
valuestringImage URLまたはData URLです。必須です。
requireSquareboolean編集を続ける前に正方形へのcropを必須にします。false
toolbarColorSchemePhotoToolbarColorSchemeHeader Button背後のToolbar外観です。必須です。
labelsPartial<PhotoEditorLabels>Editor labelを上書きします。undefined
\n\n\n

interface PhotoEditorProps

Modalの componentProps contractです。上記の value、requireSquare、toolbarColorScheme、labels と同じfieldを持ちます。

\n\n

interface PhotoEditorResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
action'save'Save成功を示します。
valuestring編集済み画像のData URLです。
\n\n

interface PhotoEditorLabels

文字列field: save、close、back、apply、crop、rotate、cropCover、crop16x9、cropSquare、cropFree、filter、brightness、original、invert、sepia、vintage、blur、grayscale、sharpen、emboss。

\n\n

Viewer

\n

component PhotoViewerPage

@rdlabo/ionic-angular-photo-editor/viewer からimportし、Ionic Modalで表示します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
imageUrlsstring[]Image URLまたはData URLです。必須です。
indexnumber最初に選択するImage indexです。0
isCircleboolean画像を円形で表示します。false
enableDeletebooleanDelete Buttonを表示します。false
enableFooterSafeAreabooleaniOS FooterのSafe Area paddingを追加します。false
toolbarColorSchemePhotoToolbarColorSchemeHeader Button背後のToolbar外観です。必須です。
imageAltstring | ((url: string, index: number) => string)Accessibleな画像alt textまたはresolverです。''
labelsPartial<PhotoViewerLabels>Viewer labelを上書きします。undefined
\n\n\n

interface PhotoViewerProps

Modalの componentProps contractです。PhotoViewerPage に示したものと同じfieldを持ちます。

\n\n

interface PhotoViewerResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
action'delete'Delete要求を示します。
indexnumber選択した画像のindexです。
valuestringそのindexのURLまたはData URLです。
\n\n

interface PhotoViewerLabels

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
closestringClose labelです。
deletestringDelete labelです。
\n\n

type alias PhotoToolbarColorScheme

'light' | 'dark'

\n\n

任意adapter

\n

function createTuiImageEditor

@rdlabo/ionic-angular-photo-editor/editor/tui からimportします。TUI Image Editor実装をbundlerが解決できるLazy Chunkで読み込む PhotoImageEditorFactory です。

\n\n

function loadCapacitorPhotoCamera

@rdlabo/ionic-angular-photo-editor/file/capacitor からimportします。Capacitor Camera実装をbundlerが解決できるLazy Chunkで読み込む PhotoCameraLoader です。

\n\n

type alias PhotoImageEditorFactory

(host: Element, options: PhotoImageEditorOptions) => Promise<PhotoImageEditor>

\n\n

interface PhotoImageEditorOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
cssMaxWidthnumberEditor Canvasの最大widthです。
cssMaxHeightnumberEditor Canvasの最大heightです。
\n\n

interface PhotoCropRect

数値の left、top、width、height fieldを持つRectangleです。

\n\n

interface PhotoImageEditor

最小限のEditor adapter contractです。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberType
applyFilter(type: string, options?: Exclude<PhotoFilterOptions, null>) => Promise<unknown>
crop(rect: PhotoCropRect) => Promise<unknown>
destroy() => void
getCropzoneRect() => PhotoCropRect
hasFilter(type: string) => boolean
loadImageFromFile(file: File) => Promise<{ newWidth: number; newHeight: number }>
removeFilter(type: string) => Promise<unknown>
rotate(angle: number) => Promise<unknown>
setCropzoneRect(ratio?: number) => void
startDrawingMode(mode: string) => void
stopDrawingMode() => void
toDataURL(options?: { multiplier?: number }) => string
\n\n\n

type alias PhotoCameraLoader

() => Promise<PhotoCameraAdapter>

\n\n

interface PhotoCameraAdapter

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
getPhoto(options: PhotoCameraOptions) => Promise<PhotoCameraImage>Camera撮影。
pickImages(options: PhotoCameraOptions) => Promise<{ photos: PhotoCameraImage[] }>Album選択。
\n\n

interface PhotoCameraOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
qualitynumber要求するImage qualityです。
widthnumber要求するImage widthです。
limit?number任意のAlbum選択上限です。
source?'camera'任意のCamera専用source markerです。
\n\n

interface PhotoCameraImage

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
dataUrl?stringImage Data URLです。
webPath?stringBrowserから参照できるImage URLです。
\n\n

画像関連の補助型

\n

interface PhotoFilter

name、type、option、data、width、height を持つrender済みFilter previewです。

\n\n

type alias PhotoFilterOptions

{ blur: number } | { brightness: number } | { noise: number } | { blocksize: number } | { color: string; distance: number; useAlpha?: boolean } | { mode: string; color: string; alpha?: number } | { maskObjId: number } | null

\n\n

interface PhotoFilterPreset

name、type、option を持つFilter Menu presetです。

\n\n

interface PhotoSize

数値の width と height を持つ2次元pixel sizeです。

\n\n
", + "html": "

@rdlabo/ionic-angular-photo-editor v22.0.3が公開するpublic entry pointのリファレンスです。Component、Service、任意実装は、それぞれ専用のsecondary entry pointからimportしてください。

\n

Entry point

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Import path主なexport
@rdlabo/ionic-angular-photo-editor設定、共有型、PhotoLoadError
@rdlabo/ionic-angular-photo-editor/editorPhotoEditorPage
@rdlabo/ionic-angular-photo-editor/editor/tuicreateTuiImageEditor
@rdlabo/ionic-angular-photo-editor/viewerPhotoViewerPage
@rdlabo/ionic-angular-photo-editor/filePhotoFileService
@rdlabo/ionic-angular-photo-editor/file/capacitorloadCapacitorPhotoCamera
\n

設定・写真読み込み

\n

function providePhotoEditor(config?: PhotoEditorConfig): EnvironmentProviders

アプリ全体の写真読み込みdefaultと、任意のEditor・Camera adapterを登録します。

\n\n

constant PHOTO_EDITOR_CONFIG

\n

解決済みの maxSize、label、Image Editor factory、Camera loaderを保持するAngular Injection Tokenです。

\n

interface PhotoEditorConfig

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionDefault
maxSizenumberResize後の長辺pixel数です。1000
labelsPartial<PhotoFileLabels>Camera、Album、Cancel labelの上書きです。undefined
createImageEditorPhotoImageEditorFactory編集・Resizeに使うadapterです。
loadCameraPhotoCameraLoaderNativeのCamera・Album選択に使うadapterです。
\n\n

class PhotoFileService

@rdlabo/ionic-angular-photo-editor/file からimportします。Browser・Capacitorから写真を選択し、正規化します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
loadPhoto(options?)(options?: PhotoLoadOptions) => Promise<string[]>Platform Pickerを開き、正規化したData URLを返します。
\n\n\n

interface PhotoLoadOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionDefault
limitnumberAlbum・Browserで選択する最大画像数です。1
maxSizenumberResize後の長辺pixel数です。設定済みの maxSize または 1000
labelsPartial<PhotoFileLabels>Request単位のNative Action Sheet label上書きです。設定済みのlabel
\n\n

class PhotoLoadError

想定される写真選択エラーの型付きErrorです。Readonlyの code は PhotoLoadErrorCode です。

\n\n

type alias PhotoLoadErrorCode

'cancelled' | 'invalid-type' | 'unavailable'

\n\n

interface PhotoFileLabels

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
camerastringCamera選択labelです。
albumstringAlbum選択labelです。
cancelstringCancel labelです。
\n\n

Editor

\n

component PhotoEditorPage

@rdlabo/ionic-angular-photo-editor/editor からimportし、Ionic Modalで表示します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
valuestringImage URLまたはData URLです。必須です。
requireSquareboolean編集を続ける前に正方形へのcropを必須にします。false
toolbarColorSchemePhotoToolbarColorSchemeHeader Button背後のToolbar外観です。必須です。
labelsPartial<PhotoEditorLabels>Editor labelを上書きします。undefined
\n\n\n

interface PhotoEditorProps

Modalの componentProps contractです。上記の value、requireSquare、toolbarColorScheme、labels と同じfieldを持ちます。

\n\n

interface PhotoEditorResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
action'save'Save成功を示します。
valuestring編集済み画像のData URLです。
\n\n

interface PhotoEditorLabels

文字列field: save、close、back、apply、crop、rotate、cropCover、crop16x9、cropSquare、cropFree、filter、brightness、original、invert、sepia、vintage、blur、grayscale、sharpen、emboss。

\n\n

Viewer

\n

component PhotoViewerPage

@rdlabo/ionic-angular-photo-editor/viewer からimportし、Ionic Modalで表示します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
imageUrlsstring[]Image URLまたはData URLです。必須です。
indexnumber最初に選択するImage indexです。0
isCircleboolean画像を円形で表示します。false
enableDeletebooleanDelete Buttonを表示します。false
enableFooterSafeAreabooleaniOS FooterのSafe Area paddingを追加します。false
toolbarColorSchemePhotoToolbarColorSchemeHeader Button背後のToolbar外観です。必須です。
imageAltstring | ((url: string, index: number) => string)Accessibleな画像alt textまたはresolverです。''
labelsPartial<PhotoViewerLabels>Viewer labelを上書きします。undefined
\n\n\n

interface PhotoViewerProps

Modalの componentProps contractです。PhotoViewerPage に示したものと同じfieldを持ちます。

\n\n

interface PhotoViewerResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
action'delete'Delete要求を示します。
indexnumber選択した画像のindexです。
valuestringそのindexのURLまたはData URLです。
\n\n

interface PhotoViewerLabels

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
closestringClose labelです。
deletestringDelete labelです。
\n\n

type alias PhotoToolbarColorScheme

'light' | 'dark'

\n\n

任意adapter

\n

function createTuiImageEditor

@rdlabo/ionic-angular-photo-editor/editor/tui からimportします。TUI Image Editor実装をbundlerが解決できるLazy Chunkで読み込む PhotoImageEditorFactory です。

\n\n

function loadCapacitorPhotoCamera

@rdlabo/ionic-angular-photo-editor/file/capacitor からimportします。Capacitor Camera実装をbundlerが解決できるLazy Chunkで読み込む PhotoCameraLoader です。

\n\n

type alias PhotoImageEditorFactory

(host: Element, options: PhotoImageEditorOptions) => Promise<PhotoImageEditor>

\n\n

interface PhotoImageEditorOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
cssMaxWidthnumberEditor Canvasの最大widthです。
cssMaxHeightnumberEditor Canvasの最大heightです。
\n\n

interface PhotoCropRect

数値の left、top、width、height fieldを持つRectangleです。

\n\n

interface PhotoImageEditor

最小限のEditor adapter contractです。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberType
applyFilter(type: string, options?: Exclude<PhotoFilterOptions, null>) => Promise<unknown>
crop(rect: PhotoCropRect) => Promise<unknown>
destroy() => void
getCropzoneRect() => PhotoCropRect
hasFilter(type: string) => boolean
loadImageFromFile(file: File) => Promise<{ newWidth: number; newHeight: number }>
removeFilter(type: string) => Promise<unknown>
rotate(angle: number) => Promise<unknown>
setCropzoneRect(ratio?: number) => void
startDrawingMode(mode: string) => void
stopDrawingMode() => void
toDataURL(options?: { multiplier?: number }) => string
\n\n\n

type alias PhotoCameraLoader

() => Promise<PhotoCameraAdapter>

\n\n

interface PhotoCameraAdapter

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
getPhoto(options: PhotoCameraOptions) => Promise<PhotoCameraImage>Camera撮影。
pickImages(options: PhotoCameraOptions) => Promise<{ photos: PhotoCameraImage[] }>Album選択。
\n\n

interface PhotoCameraOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
qualitynumber要求するImage qualityです。
widthnumber要求するImage widthです。
limit?number任意のAlbum選択上限です。
source?'camera'任意のCamera専用source markerです。
\n\n

interface PhotoCameraImage

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
dataUrl?stringImage Data URLです。
webPath?stringBrowserから参照できるImage URLです。
\n\n

画像関連の補助型

\n

interface PhotoFilter

name、type、option、data、width、height を持つrender済みFilter previewです。

\n\n

type alias PhotoFilterOptions

{ blur: number } | { brightness: number } | { noise: number } | { blocksize: number } | { color: string; distance: number; useAlpha?: boolean } | { mode: string; color: string; alpha?: number } | { maskObjId: number } | null

\n\n

interface PhotoFilterPreset

name、type、option を持つFilter Menu presetです。

\n\n

interface PhotoSize

数値の width と height を持つ2次元pixel sizeです。

\n\n
", "headings": [ { "id": "entry-point", diff --git a/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.en.generated.ts b/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.en.generated.ts index 37882dc..5f0336f 100644 --- a/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.en.generated.ts +++ b/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.en.generated.ts @@ -9,7 +9,7 @@ export const PROJECT = { "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/scroll-header", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Scroll-aware header directives for Ionic and Angular CDK viewports.", "headline": "Build headers that respond to content scrolling", "overview": "Hide and reveal Ionic headers for IonContent and CDK virtual scrolling while preserving safe-area and native-header layouts.", @@ -75,7 +75,7 @@ export const PROJECT = { "file": "ion-content.md", "section": "Guides", "path": "/projects/ionic-angular-scroll-header/docs/ion-content", - "html": "

Attach scroll-aware headers to Ionic content. Call this after Installation. Import the package CSS globally first. Safe-area hidden headers and always-visible native headers are covered on Safe Area.

\n\n
import { Component } from '@angular/core';\nimport { IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/angular';\nimport { ScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n@Component({\n  selector: 'app-scroll-header',\n  imports: [IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonLabel, ScrollHeaderDirective],\n  template: `\n    <ion-header class=\"hidden\">\n      <ion-toolbar></ion-toolbar>\n    </ion-header>\n    <ion-content rdlaboScrollHeader>\n      <ion-header>\n        <ion-toolbar>\n          <ion-title>Scroll header</ion-title>\n        </ion-toolbar>\n      </ion-header>\n      <ion-list>\n        @for (item of items; track item) {\n          <ion-item>\n            <ion-label>{{ item }}</ion-label>\n          </ion-item>\n        }\n      </ion-list>\n    </ion-content>\n  `,\n})\nexport class ScrollHeaderPage {\n  readonly items = Array.from({ length: 40 }, (_, index) => `Row ${index + 1}`);\n}\n

Scroll down — the content header hides. Scroll up — it returns. The outer ion-header.hidden reserves safe-area space; see Safe Area when you need a different header layout.

\n", + "html": "

Attach scroll-aware headers to Ionic content. Call this after Installation. Import the package CSS globally first. Safe-area hidden headers and always-visible native headers are covered on Safe Area.

\n\n
import { Component } from '@angular/core';\nimport { IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/angular';\nimport { ScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n@Component({\n  selector: 'app-scroll-header',\n  imports: [IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonLabel, ScrollHeaderDirective],\n  template: `\n    <ion-header class=\"hidden\">\n      <ion-toolbar></ion-toolbar>\n    </ion-header>\n    <ion-content rdlaboScrollHeader>\n      <ion-header>\n        <ion-toolbar>\n          <ion-title>Scroll header</ion-title>\n        </ion-toolbar>\n      </ion-header>\n      <ion-list>\n        @for (item of items; track item) {\n          <ion-item>\n            <ion-label>{{ item }}</ion-label>\n          </ion-item>\n        }\n      </ion-list>\n    </ion-content>\n  `,\n})\nexport class ScrollHeaderPage {\n  readonly items = Array.from({ length: 40 }, (_, index) => `Row ${index + 1}`);\n}\n

Scroll down — the content header hides. Scroll up — it returns. The outer ion-header.hidden reserves safe-area space; see Safe Area when you need a different header layout.

\n", "headings": [], "codes": [], "scrollMap": [], @@ -93,7 +93,7 @@ export const PROJECT = { "file": "virtual-scroll.md", "section": "Guides", "path": "/projects/ionic-angular-scroll-header/docs/virtual-scroll", - "html": "

Extend an existing CDK virtual-scroll viewport with scroll-aware headers. Start from IonContent for the header/safe-area pattern, then replace the scroll host with a viewport. Call this after Installation.

\n\n
import { Component } from '@angular/core';\nimport { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';\nimport { VirtualScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n@Component({\n  selector: 'app-virtual-scroll-header',\n  imports: [\n    IonContent,\n    IonHeader,\n    IonToolbar,\n    IonTitle,\n    CdkVirtualScrollViewport,\n    CdkVirtualForOf,\n    CdkFixedSizeVirtualScroll,\n    VirtualScrollHeaderDirective,\n  ],\n  template: `\n    <ion-header class=\"hidden\">\n      <ion-toolbar></ion-toolbar>\n    </ion-header>\n    <ion-content rdlaboVirtualScrollHeader>\n      <ion-header>\n        <ion-toolbar>\n          <ion-title>Virtual scroll header</ion-title>\n        </ion-toolbar>\n      </ion-header>\n      <cdk-virtual-scroll-viewport\n        minBufferPx=\"900\"\n        maxBufferPx=\"1350\"\n        [itemSize]=\"44\"\n        class=\"ion-content-scroll-host\"\n      >\n        <div *cdkVirtualFor=\"let item of items; trackBy: trackByFn\" style=\"height: 44px\">\n          {{ item }}\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </ion-content>\n  `,\n})\nexport class VirtualScrollHeaderPage {\n  readonly items = Array.from({ length: 80 }, (_, index) => `Row ${index + 1}`);\n  trackByFn = (_: number, item: string) => item;\n}\n

Give the viewport a definite height via the global CSS from Installation.

\n

Prevent scroll jump / flicker at the top

\n

Addresses angular/components#27104 when an existing CDK viewport jumps back while scrolling.

\n

Add the directive to the imports of the component above, then add its attribute to the existing viewport. Keep the CDK imports and data from that example.

\n
import { FixVirtualScrollElementDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n
<ion-content>\n  <cdk-virtual-scroll-viewport\n    rdlaboFixVirtualScrollElement\n    minBufferPx=\"900\"\n    maxBufferPx=\"1350\"\n    [itemSize]=\"44\"\n    class=\"ion-content-scroll-host\"\n  >\n    <div *cdkVirtualFor=\"let item of items; trackBy: trackByFn\" style=\"height: 44px\">\n      {{ item }}\n    </div>\n  </cdk-virtual-scroll-viewport>\n</ion-content>\n
", + "html": "

Extend an existing CDK virtual-scroll viewport with scroll-aware headers. Start from IonContent for the header/safe-area pattern, then replace the scroll host with a viewport. Call this after Installation.

\n\n
import { Component } from '@angular/core';\nimport { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';\nimport { VirtualScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n@Component({\n  selector: 'app-virtual-scroll-header',\n  imports: [\n    IonContent,\n    IonHeader,\n    IonToolbar,\n    IonTitle,\n    CdkVirtualScrollViewport,\n    CdkVirtualForOf,\n    CdkFixedSizeVirtualScroll,\n    VirtualScrollHeaderDirective,\n  ],\n  template: `\n    <ion-header class=\"hidden\">\n      <ion-toolbar></ion-toolbar>\n    </ion-header>\n    <ion-content rdlaboVirtualScrollHeader>\n      <ion-header>\n        <ion-toolbar>\n          <ion-title>Virtual scroll header</ion-title>\n        </ion-toolbar>\n      </ion-header>\n      <cdk-virtual-scroll-viewport\n        minBufferPx=\"900\"\n        maxBufferPx=\"1350\"\n        [itemSize]=\"44\"\n        class=\"ion-content-scroll-host\"\n      >\n        <div *cdkVirtualFor=\"let item of items; trackBy: trackByFn\" style=\"height: 44px\">\n          {{ item }}\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </ion-content>\n  `,\n})\nexport class VirtualScrollHeaderPage {\n  readonly items = Array.from({ length: 80 }, (_, index) => `Row ${index + 1}`);\n  trackByFn = (_: number, item: string) => item;\n}\n

Give the viewport a definite height via the global CSS from Installation.

\n

Prevent scroll jump / flicker at the top

\n

Addresses angular/components#27104 when an existing CDK viewport jumps back while scrolling.

\n

Add the directive to the imports of the component above, then add its attribute to the existing viewport. Keep the CDK imports and data from that example.

\n
import { FixVirtualScrollElementDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n
<ion-content>\n  <cdk-virtual-scroll-viewport\n    rdlaboFixVirtualScrollElement\n    minBufferPx=\"900\"\n    maxBufferPx=\"1350\"\n    [itemSize]=\"44\"\n    class=\"ion-content-scroll-host\"\n  >\n    <div *cdkVirtualFor=\"let item of items; trackBy: trackByFn\" style=\"height: 44px\">\n      {{ item }}\n    </div>\n  </cdk-virtual-scroll-viewport>\n</ion-content>\n
", "headings": [ { "id": "prevent-scroll-jump-%2F-flicker-at-the-top", diff --git a/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.ja.generated.ts b/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.ja.generated.ts index b2b4e3c..7f47bb9 100644 --- a/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.ja.generated.ts +++ b/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.ja.generated.ts @@ -9,7 +9,7 @@ export const PROJECT = { "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/scroll-header", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "description": "Ionic・Angular CDK viewport向けのScroll連動Header Directive。", "headline": "Scrollに追従するHeaderを実装する", "overview": "Safe AreaとNative Headerレイアウトを維持しながら、IonContentとCDK Virtual Scrollに応じてIonic Headerを表示・非表示にします。", @@ -75,7 +75,7 @@ export const PROJECT = { "file": "ion-content.md", "section": "ガイド", "path": "/projects/ionic-angular-scroll-header/docs/ion-content", - "html": "

Ionic Content に Scroll 連動 Header を付けます。インストール のあとで呼び出します。先にpackage CSSをグローバルへimportしてください。Safe Area用の非表示Headerと常時表示するNative Headerの使い分けは、Safe Areaガイドを参照してください。

\n\n
import { Component } from '@angular/core';\nimport { IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/angular';\nimport { ScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n@Component({\n  selector: 'app-scroll-header',\n  imports: [IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonLabel, ScrollHeaderDirective],\n  template: `\n    <ion-header class=\"hidden\">\n      <ion-toolbar></ion-toolbar>\n    </ion-header>\n    <ion-content rdlaboScrollHeader>\n      <ion-header>\n        <ion-toolbar>\n          <ion-title>Scroll header</ion-title>\n        </ion-toolbar>\n      </ion-header>\n      <ion-list>\n        @for (item of items; track item) {\n          <ion-item>\n            <ion-label>{{ item }}</ion-label>\n          </ion-item>\n        }\n      </ion-list>\n    </ion-content>\n  `,\n})\nexport class ScrollHeaderPage {\n  readonly items = Array.from({ length: 40 }, (_, index) => `Row ${index + 1}`);\n}\n

下へスクロールするとContent Headerが隠れ、上へスクロールすると戻ります。外側の ion-header.hidden はSafe Area用の余白を確保します。別のHeader構成は Safe Area を参照してください。

\n", + "html": "

Ionic Content に Scroll 連動 Header を付けます。インストール のあとで呼び出します。先にpackage CSSをグローバルへimportしてください。Safe Area用の非表示Headerと常時表示するNative Headerの使い分けは、Safe Areaガイドを参照してください。

\n\n
import { Component } from '@angular/core';\nimport { IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/angular';\nimport { ScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n@Component({\n  selector: 'app-scroll-header',\n  imports: [IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonLabel, ScrollHeaderDirective],\n  template: `\n    <ion-header class=\"hidden\">\n      <ion-toolbar></ion-toolbar>\n    </ion-header>\n    <ion-content rdlaboScrollHeader>\n      <ion-header>\n        <ion-toolbar>\n          <ion-title>Scroll header</ion-title>\n        </ion-toolbar>\n      </ion-header>\n      <ion-list>\n        @for (item of items; track item) {\n          <ion-item>\n            <ion-label>{{ item }}</ion-label>\n          </ion-item>\n        }\n      </ion-list>\n    </ion-content>\n  `,\n})\nexport class ScrollHeaderPage {\n  readonly items = Array.from({ length: 40 }, (_, index) => `Row ${index + 1}`);\n}\n

下へスクロールするとContent Headerが隠れ、上へスクロールすると戻ります。外側の ion-header.hidden はSafe Area用の余白を確保します。別のHeader構成は Safe Area を参照してください。

\n", "headings": [], "codes": [], "scrollMap": [], @@ -93,7 +93,7 @@ export const PROJECT = { "file": "virtual-scroll.md", "section": "ガイド", "path": "/projects/ionic-angular-scroll-header/docs/virtual-scroll", - "html": "

既存のCDK Virtual Scroll Viewportへ、Scroll連動Headerを拡張します。Header／Safe Areaの形は IonContent を起点にし、Scroll HostをViewportへ置き換えます。インストール のあとで呼び出します。

\n\n
import { Component } from '@angular/core';\nimport { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';\nimport { VirtualScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n@Component({\n  selector: 'app-virtual-scroll-header',\n  imports: [\n    IonContent,\n    IonHeader,\n    IonToolbar,\n    IonTitle,\n    CdkVirtualScrollViewport,\n    CdkVirtualForOf,\n    CdkFixedSizeVirtualScroll,\n    VirtualScrollHeaderDirective,\n  ],\n  template: `\n    <ion-header class=\"hidden\">\n      <ion-toolbar></ion-toolbar>\n    </ion-header>\n    <ion-content rdlaboVirtualScrollHeader>\n      <ion-header>\n        <ion-toolbar>\n          <ion-title>Virtual scroll header</ion-title>\n        </ion-toolbar>\n      </ion-header>\n      <cdk-virtual-scroll-viewport\n        minBufferPx=\"900\"\n        maxBufferPx=\"1350\"\n        [itemSize]=\"44\"\n        class=\"ion-content-scroll-host\"\n      >\n        <div *cdkVirtualFor=\"let item of items; trackBy: trackByFn\" style=\"height: 44px\">\n          {{ item }}\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </ion-content>\n  `,\n})\nexport class VirtualScrollHeaderPage {\n  readonly items = Array.from({ length: 80 }, (_, index) => `Row ${index + 1}`);\n  trackByFn = (_: number, item: string) => item;\n}\n

Viewportには インストール のグローバルCSSで確定した高さを与えてください。

\n

スクロールの跳ね返りを防ぐ

\n

既存のCDK Viewportがスクロール中に先頭へ跳ね返る場合の対策です。angular/components#27104 を参照してください。

\n

上のコンポーネントの imports にこのdirectiveを追加し、既存のviewportへ属性を付けます。CDKのimportsとデータはそのまま使います。

\n
import { FixVirtualScrollElementDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n
<ion-content>\n  <cdk-virtual-scroll-viewport\n    rdlaboFixVirtualScrollElement\n    minBufferPx=\"900\"\n    maxBufferPx=\"1350\"\n    [itemSize]=\"44\"\n    class=\"ion-content-scroll-host\"\n  >\n    <div *cdkVirtualFor=\"let item of items; trackBy: trackByFn\" style=\"height: 44px\">\n      {{ item }}\n    </div>\n  </cdk-virtual-scroll-viewport>\n</ion-content>\n
", + "html": "

既存のCDK Virtual Scroll Viewportへ、Scroll連動Headerを拡張します。Header／Safe Areaの形は IonContent を起点にし、Scroll HostをViewportへ置き換えます。インストール のあとで呼び出します。

\n\n
import { Component } from '@angular/core';\nimport { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';\nimport { VirtualScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n@Component({\n  selector: 'app-virtual-scroll-header',\n  imports: [\n    IonContent,\n    IonHeader,\n    IonToolbar,\n    IonTitle,\n    CdkVirtualScrollViewport,\n    CdkVirtualForOf,\n    CdkFixedSizeVirtualScroll,\n    VirtualScrollHeaderDirective,\n  ],\n  template: `\n    <ion-header class=\"hidden\">\n      <ion-toolbar></ion-toolbar>\n    </ion-header>\n    <ion-content rdlaboVirtualScrollHeader>\n      <ion-header>\n        <ion-toolbar>\n          <ion-title>Virtual scroll header</ion-title>\n        </ion-toolbar>\n      </ion-header>\n      <cdk-virtual-scroll-viewport\n        minBufferPx=\"900\"\n        maxBufferPx=\"1350\"\n        [itemSize]=\"44\"\n        class=\"ion-content-scroll-host\"\n      >\n        <div *cdkVirtualFor=\"let item of items; trackBy: trackByFn\" style=\"height: 44px\">\n          {{ item }}\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </ion-content>\n  `,\n})\nexport class VirtualScrollHeaderPage {\n  readonly items = Array.from({ length: 80 }, (_, index) => `Row ${index + 1}`);\n  trackByFn = (_: number, item: string) => item;\n}\n

Viewportには インストール のグローバルCSSで確定した高さを与えてください。

\n

スクロールの跳ね返りを防ぐ

\n

既存のCDK Viewportがスクロール中に先頭へ跳ね返る場合の対策です。angular/components#27104 を参照してください。

\n

上のコンポーネントの imports にこのdirectiveを追加し、既存のviewportへ属性を付けます。CDKのimportsとデータはそのまま使います。

\n
import { FixVirtualScrollElementDirective } from '@rdlabo/ionic-angular-scroll-header';\n\n
<ion-content>\n  <cdk-virtual-scroll-viewport\n    rdlaboFixVirtualScrollElement\n    minBufferPx=\"900\"\n    maxBufferPx=\"1350\"\n    [itemSize]=\"44\"\n    class=\"ion-content-scroll-host\"\n  >\n    <div *cdkVirtualFor=\"let item of items; trackBy: trackByFn\" style=\"height: 44px\">\n      {{ item }}\n    </div>\n  </cdk-virtual-scroll-viewport>\n</ion-content>\n
", "headings": [ { "id": "%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AE%E8%B7%B3%E3%81%AD%E8%BF%94%E3%82%8A%E3%82%92%E9%98%B2%E3%81%90", @@ -139,7 +139,7 @@ export const PROJECT = { "file": "api.md", "section": "リファレンス", "path": "/projects/ionic-angular-scroll-header/docs/api", - "html": "

@rdlabo/ionic-angular-scroll-header v22.0.0 が公開するstandalone directiveのリファレンスです。

\n

Directive

\n

directive ScrollHeaderDirective

ion-content のscroll streamと投影されたHeader elementを接続します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorContent childDescription
ion-content[rdlaboScrollHeader]scrollHeaderIonContentのscroll位置に追従するHeader elementです。
\n\n\n

directive VirtualScrollHeaderDirective

CDK Virtual Scroll viewportと投影されたHeader elementを接続し、破棄時にsubscriptionを解除します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorContent childDescription
ion-content[rdlaboVirtualScrollHeader]virtualScroll監視対象の CdkVirtualScrollViewport です。
ion-content[rdlaboVirtualScrollHeader]scrollHeaderVirtual Scrollのoffsetに追従するHeader elementです。
\n\n\n

directive FixVirtualScrollElementDirective

PackageのCDK Virtual Scroll連携で使用するviewport element補正を適用します。

\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorDescription
cdk-virtual-scroll-viewport[rdlaboFixVirtualScrollElement]初期化時にVirtual Scroll viewport elementを補正します。
\n\n\n
", + "html": "

@rdlabo/ionic-angular-scroll-header v22.0.3 が公開するstandalone directiveのリファレンスです。

\n

Directive

\n

directive ScrollHeaderDirective

ion-content のscroll streamと投影されたHeader elementを接続します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorContent childDescription
ion-content[rdlaboScrollHeader]scrollHeaderIonContentのscroll位置に追従するHeader elementです。
\n\n\n

directive VirtualScrollHeaderDirective

CDK Virtual Scroll viewportと投影されたHeader elementを接続し、破棄時にsubscriptionを解除します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorContent childDescription
ion-content[rdlaboVirtualScrollHeader]virtualScroll監視対象の CdkVirtualScrollViewport です。
ion-content[rdlaboVirtualScrollHeader]scrollHeaderVirtual Scrollのoffsetに追従するHeader elementです。
\n\n\n

directive FixVirtualScrollElementDirective

PackageのCDK Virtual Scroll連携で使用するviewport element補正を適用します。

\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorDescription
cdk-virtual-scroll-viewport[rdlaboFixVirtualScrollElement]初期化時にVirtual Scroll viewport elementを補正します。
\n\n\n
", "headings": [ { "id": "directive", diff --git a/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.en.generated.ts b/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.en.generated.ts index 37dda93..52fe117 100644 --- a/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.en.generated.ts +++ b/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.en.generated.ts @@ -9,7 +9,7 @@ export const PROJECT = { "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "seoTitle": "Angular CDK Virtual Scroll: Variable Item Heights | rdlabo", "description": "Use Angular CDK virtual scroll with variable or dynamic item heights. Supply exact per-item sizes for stable lists, chat UIs, and reverse scrolling.", "headline": "Angular CDK virtual scroll with variable item heights", @@ -78,7 +78,7 @@ export const PROJECT = { "file": "simple.md", "section": "Guides", "path": "/projects/ngx-cdk-scroll-strategies/docs/simple", - "html": "

Call this after Installation.

\n
\n

For items whose variable heights are already known.

\n
\n\n

Give the viewport a definite height in global CSS:

\n
cdk-virtual-scroll-viewport {\n  width: 100%;\n  height: 320px;\n}\n
import { Component, computed, signal } from '@angular/core';\nimport { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { CdkDynamicSizeVirtualScroll, itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';\n\ntype Item = itemDynamicSize & { trackId: number };\n\n@Component({\n  selector: 'app-scroll-simple',\n  imports: [CdkVirtualScrollViewport, CdkVirtualForOf, CdkDynamicSizeVirtualScroll],\n  template: `\n    <cdk-virtual-scroll-viewport\n      [itemDynamicSizes]=\"dynamicSize()\"\n      minBufferPx=\"900\"\n      maxBufferPx=\"1350\"\n    >\n      <div\n        *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n        class=\"dynamic-item\"\n        [style.height.px]=\"item.itemSize\"\n      >\n        itemSize: {{ item.itemSize }}\n      </div>\n    </cdk-virtual-scroll-viewport>\n  `,\n})\nexport class ScrollSimplePage {\n  readonly items = signal<Item[]>(\n    Array.from({ length: 20 }, (_, index) => ({\n      trackId: index,\n      itemSize: 40 + (index % 5) * 16,\n    })),\n  );\n  readonly dynamicSize = computed<itemDynamicSize[]>(() =>\n    this.items().map((item) => ({ trackId: item.trackId, itemSize: item.itemSize })),\n  );\n  trackByFn = (_: number, item: Item) => item.trackId;\n}\n

Rows use different heights so scrolling changes which sizes stay in view. Other than [itemDynamicSizes], it works the same way as @angular/cdk/scrolling.

\n", + "html": "

Call this after Installation.

\n
\n

For items whose variable heights are already known.

\n
\n\n

Give the viewport a definite height in global CSS:

\n
cdk-virtual-scroll-viewport {\n  width: 100%;\n  height: 320px;\n}\n
import { Component, computed, signal } from '@angular/core';\nimport { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { CdkDynamicSizeVirtualScroll, itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';\n\ntype Item = itemDynamicSize & { trackId: number };\n\n@Component({\n  selector: 'app-scroll-simple',\n  imports: [CdkVirtualScrollViewport, CdkVirtualForOf, CdkDynamicSizeVirtualScroll],\n  template: `\n    <cdk-virtual-scroll-viewport\n      [itemDynamicSizes]=\"dynamicSize()\"\n      minBufferPx=\"900\"\n      maxBufferPx=\"1350\"\n    >\n      <div\n        *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n        class=\"dynamic-item\"\n        [style.height.px]=\"item.itemSize\"\n      >\n        itemSize: {{ item.itemSize }}\n      </div>\n    </cdk-virtual-scroll-viewport>\n  `,\n})\nexport class ScrollSimplePage {\n  readonly items = signal<Item[]>(\n    Array.from({ length: 20 }, (_, index) => ({\n      trackId: index,\n      itemSize: 40 + (index % 5) * 16,\n    })),\n  );\n  readonly dynamicSize = computed<itemDynamicSize[]>(() =>\n    this.items().map((item) => ({ trackId: item.trackId, itemSize: item.itemSize })),\n  );\n  trackByFn = (_: number, item: Item) => item.trackId;\n}\n

Rows use different heights so scrolling changes which sizes stay in view. Other than [itemDynamicSizes], it works the same way as @angular/cdk/scrolling.

\n", "headings": [], "codes": [], "scrollMap": [], @@ -97,7 +97,7 @@ export const PROJECT = { "file": "advanced.md", "section": "Guides", "path": "/projects/ngx-cdk-scroll-strategies/docs/advanced", - "html": "

Call this after Installation. Reuse the Simple Usage viewport, CDK imports, trackBy, and size-model rules. Replace known itemSize values with measured heights.

\n
\n

Measure each scroll item as a separate component, then write the result into the size model that drives [itemDynamicSizes].

\n
\n\n

Keep a measurement cache keyed by trackId. After the item renders, read its height and update the cache. A parent computed maps items to itemDynamicSize[], using the cache when present and a temporary estimate until the first measurement lands:

\n
import { afterRenderEffect, Component, computed, ElementRef, inject, Injectable, input, signal, untracked } from '@angular/core';\nimport { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { CdkDynamicSizeVirtualScroll, itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';\n\ntype Row = { trackId: string; body: string };\ntype SizeCache = { trackId: string; itemSize: number };\n\n@Injectable()\nexport class RowSizeCache {\n  readonly entries = signal<SizeCache[]>([]);\n}\n\n@Component({\n  selector: 'app-measured-row',\n  template: `<div class=\"row\">{{ item().body }}</div>`,\n  styles: `:host { display: block; } .row { white-space: pre-wrap; padding: 12px; }`,\n})\nexport class MeasuredRow {\n  private readonly el = inject(ElementRef<HTMLElement>);\n  private readonly sizes = inject(RowSizeCache);\n  readonly item = input.required<Row>();\n\n  constructor() {\n    afterRenderEffect((onCleanup) => {\n      const trackId = this.item().trackId;\n      const element = this.el.nativeElement;\n      const measure = () => {\n        const itemSize = Math.ceil(element.getBoundingClientRect().height);\n        if (itemSize <= 0) return;\n        untracked(() => this.sizes.entries.update((cache) => {\n          const previous = cache.find((entry) => entry.trackId === trackId);\n          if (previous?.itemSize === itemSize) return cache;\n          return [...cache.filter((entry) => entry.trackId !== trackId), { trackId, itemSize }];\n        }));\n      };\n      const observer = new ResizeObserver(measure);\n      observer.observe(element);\n      measure();\n      onCleanup(() => observer.disconnect());\n    });\n  }\n}\n\n@Component({\n  selector: 'app-scroll-advanced',\n  providers: [RowSizeCache],\n  styles: `cdk-virtual-scroll-viewport { height: 320px; width: 100%; }`,\n  imports: [CdkVirtualScrollViewport, CdkVirtualForOf, CdkDynamicSizeVirtualScroll, MeasuredRow],\n  template: `\n    <cdk-virtual-scroll-viewport\n      [itemDynamicSizes]=\"dynamicSize()\"\n      minBufferPx=\"900\"\n      maxBufferPx=\"1350\"\n    >\n      <app-measured-row\n        *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n        [item]=\"item\"\n      />\n    </cdk-virtual-scroll-viewport>\n  `,\n})\nexport class ScrollAdvancedPage {\n  private readonly sizes = inject(RowSizeCache);\n  readonly items = signal<Row[]>(\n    Array.from({ length: 20 }, (_, index) => ({\n      trackId: String(index),\n      body: `Row ${index + 1}\\n`.repeat(1 + (index % 4)),\n    })),\n  );\n  readonly dynamicSize = computed<itemDynamicSize[]>(() =>\n    this.items().map((item) => {\n      const cached = this.sizes.entries().find((entry) => entry.trackId === item.trackId)?.itemSize;\n      return {\n        trackId: item.trackId,\n        itemSize: cached ?? 80,\n        source: cached === undefined ? 'temporary' : 'cache',\n      };\n    }),\n  );\n  trackByFn = (_: number, item: Row) => item.trackId;\n}\n

Each itemSize must remain a finite number greater than zero. Until measurement arrives, pass a temporary positive estimate so lengths stay aligned; replace it when the cache updates. See the demo source for Infinite Scroll, refresher, and DynamicSizeVirtualScrollService helpers around this same measurement flow.

\n", + "html": "

Call this after Installation. Reuse the Simple Usage viewport, CDK imports, trackBy, and size-model rules. Replace known itemSize values with measured heights.

\n
\n

Measure each scroll item as a separate component, then write the result into the size model that drives [itemDynamicSizes].

\n
\n\n

Keep a measurement cache keyed by trackId. After the item renders, read its height and update the cache. A parent computed maps items to itemDynamicSize[], using the cache when present and a temporary estimate until the first measurement lands:

\n
import { afterRenderEffect, Component, computed, ElementRef, inject, Injectable, input, signal, untracked } from '@angular/core';\nimport { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { CdkDynamicSizeVirtualScroll, itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';\n\ntype Row = { trackId: string; body: string };\ntype SizeCache = { trackId: string; itemSize: number };\n\n@Injectable()\nexport class RowSizeCache {\n  readonly entries = signal<SizeCache[]>([]);\n}\n\n@Component({\n  selector: 'app-measured-row',\n  template: `<div class=\"row\">{{ item().body }}</div>`,\n  styles: `:host { display: block; } .row { white-space: pre-wrap; padding: 12px; }`,\n})\nexport class MeasuredRow {\n  private readonly el = inject(ElementRef<HTMLElement>);\n  private readonly sizes = inject(RowSizeCache);\n  readonly item = input.required<Row>();\n\n  constructor() {\n    afterRenderEffect((onCleanup) => {\n      const trackId = this.item().trackId;\n      const element = this.el.nativeElement;\n      const measure = () => {\n        const itemSize = Math.ceil(element.getBoundingClientRect().height);\n        if (itemSize <= 0) return;\n        untracked(() => this.sizes.entries.update((cache) => {\n          const previous = cache.find((entry) => entry.trackId === trackId);\n          if (previous?.itemSize === itemSize) return cache;\n          return [...cache.filter((entry) => entry.trackId !== trackId), { trackId, itemSize }];\n        }));\n      };\n      const observer = new ResizeObserver(measure);\n      observer.observe(element);\n      measure();\n      onCleanup(() => observer.disconnect());\n    });\n  }\n}\n\n@Component({\n  selector: 'app-scroll-advanced',\n  providers: [RowSizeCache],\n  styles: `cdk-virtual-scroll-viewport { height: 320px; width: 100%; }`,\n  imports: [CdkVirtualScrollViewport, CdkVirtualForOf, CdkDynamicSizeVirtualScroll, MeasuredRow],\n  template: `\n    <cdk-virtual-scroll-viewport\n      [itemDynamicSizes]=\"dynamicSize()\"\n      minBufferPx=\"900\"\n      maxBufferPx=\"1350\"\n    >\n      <app-measured-row\n        *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n        [item]=\"item\"\n      />\n    </cdk-virtual-scroll-viewport>\n  `,\n})\nexport class ScrollAdvancedPage {\n  private readonly sizes = inject(RowSizeCache);\n  readonly items = signal<Row[]>(\n    Array.from({ length: 20 }, (_, index) => ({\n      trackId: String(index),\n      body: `Row ${index + 1}\\n`.repeat(1 + (index % 4)),\n    })),\n  );\n  readonly dynamicSize = computed<itemDynamicSize[]>(() =>\n    this.items().map((item) => {\n      const cached = this.sizes.entries().find((entry) => entry.trackId === item.trackId)?.itemSize;\n      return {\n        trackId: item.trackId,\n        itemSize: cached ?? 80,\n        source: cached === undefined ? 'temporary' : 'cache',\n      };\n    }),\n  );\n  trackByFn = (_: number, item: Row) => item.trackId;\n}\n

Each itemSize must remain a finite number greater than zero. Until measurement arrives, pass a temporary positive estimate so lengths stay aligned; replace it when the cache updates. See the demo source for Infinite Scroll, refresher, and DynamicSizeVirtualScrollService helpers around this same measurement flow.

\n", "headings": [], "codes": [], "scrollMap": [], @@ -116,7 +116,7 @@ export const PROJECT = { "file": "reverse.md", "section": "Guides", "path": "/projects/ngx-cdk-scroll-strategies/docs/reverse", - "html": "

Call this after Installation.

\n
\n

Reuse the data model, dynamicSize computed, trackBy, and viewport imports from Simple Usage. This page adds reverse layout CSS and [isReverse]=\"true\" for a chat-style list.

\n
\n\n

If reverse scroll, add isReverse directive to cdk-virtual-scroll-viewport tag.

\n
<cdk-virtual-scroll-viewport\n  [itemDynamicSizes]=\"dynamicSize()\"\n  [isReverse]=\"true\"\n  minBufferPx=\"900\"\n  maxBufferPx=\"1350\"\n>\n  <div class=\"reverse-items\">\n    <div\n      *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n      class=\"dynamic-item\"\n      [style.height.px]=\"item.itemSize\"\n    >\n      itemSize: {{ item.itemSize }}\n    </div>\n  </div>\n</cdk-virtual-scroll-viewport>\n

Add css to cdk-virtual-scroll-viewport.reverse-scroll at global css file like styles.css.

\n
cdk-virtual-scroll-viewport {\n  width: 100%;\n  height: 320px;\n\n  /* .reverse-scroll class is added from this directive. */\n  &.reverse-scroll {\n    display: flex;\n    flex-direction: column-reverse;\n\n    .cdk-virtual-scroll-content-wrapper {\n      top: auto;\n      bottom: 0;\n    }\n  }\n}\n

And add item wrapper. div.reverse-items class is example. You can decide this.

\n
div.reverse-items {\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n\n  position: relative;\n  bottom: 0;\n}\n

In Reverse Scroll, CdkVirtualScrollViewport's measureScrollOffset does not work. Please use the scrollOffset of this directive.
\nhttps://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.tshttps://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.ts

\n

The reverse layout uses negative native scrollTop values. scrollToIndex() accepts a logical item index as usual and converts its cumulative offset to that native coordinate internally.

\n

Optional

\n

This package contains a Helper Service that simplifies development with Virtual Scroll.

\n
import { DynamicSizeVirtualScrollService } from '@rdlabo/ngx-cdk-scroll-strategies';\n

Detail is here: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll.service.ts

\n", + "html": "

Call this after Installation.

\n
\n

Reuse the data model, dynamicSize computed, trackBy, and viewport imports from Simple Usage. This page adds reverse layout CSS and [isReverse]=\"true\" for a chat-style list.

\n
\n\n

If reverse scroll, add isReverse directive to cdk-virtual-scroll-viewport tag.

\n
<cdk-virtual-scroll-viewport\n  [itemDynamicSizes]=\"dynamicSize()\"\n  [isReverse]=\"true\"\n  minBufferPx=\"900\"\n  maxBufferPx=\"1350\"\n>\n  <div class=\"reverse-items\">\n    <div\n      *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n      class=\"dynamic-item\"\n      [style.height.px]=\"item.itemSize\"\n    >\n      itemSize: {{ item.itemSize }}\n    </div>\n  </div>\n</cdk-virtual-scroll-viewport>\n

Add css to cdk-virtual-scroll-viewport.reverse-scroll at global css file like styles.css.

\n
cdk-virtual-scroll-viewport {\n  width: 100%;\n  height: 320px;\n\n  /* .reverse-scroll class is added from this directive. */\n  &.reverse-scroll {\n    display: flex;\n    flex-direction: column-reverse;\n\n    .cdk-virtual-scroll-content-wrapper {\n      top: auto;\n      bottom: 0;\n    }\n  }\n}\n

And add item wrapper. div.reverse-items class is example. You can decide this.

\n
div.reverse-items {\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n\n  position: relative;\n  bottom: 0;\n}\n

In Reverse Scroll, CdkVirtualScrollViewport's measureScrollOffset does not work. Please use the scrollOffset of this directive.
\nhttps://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.tshttps://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.ts

\n

The reverse layout uses negative native scrollTop values. scrollToIndex() accepts a logical item index as usual and converts its cumulative offset to that native coordinate internally.

\n

Optional

\n

This package contains a Helper Service that simplifies development with Virtual Scroll.

\n
import { DynamicSizeVirtualScrollService } from '@rdlabo/ngx-cdk-scroll-strategies';\n

Detail is here: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll.service.ts

\n", "headings": [ { "id": "optional", diff --git a/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.ja.generated.ts b/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.ja.generated.ts index 6589914..e25f925 100644 --- a/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.ja.generated.ts +++ b/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.ja.generated.ts @@ -9,7 +9,7 @@ export const PROJECT = { "demoUrl": "https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies", "category": "frontend-tools", "icon": "app", - "version": "22.0.0", + "version": "22.0.3", "seoTitle": "Angular CDK Virtual Scrollの可変アイテム高さ対応 | rdlabo", "description": "Angular CDK Virtual Scrollで可変・動的なItem Heightに対応。Itemごとの正確なSizeにより、List、Chat UI、Reverse Scrollを安定させます。", "headline": "Angular CDK Virtual Scrollを可変Item Heightに対応", @@ -78,7 +78,7 @@ export const PROJECT = { "file": "simple.md", "section": "ガイド", "path": "/projects/ngx-cdk-scroll-strategies/docs/simple", - "html": "

インストール のあとで使います。

\n
\n

各Itemの可変Heightがすでに分かっている場合に使います。

\n
\n\n

ViewportにはグローバルCSSで確定した高さを与えます。

\n
cdk-virtual-scroll-viewport {\n  width: 100%;\n  height: 320px;\n}\n
import { Component, computed, signal } from '@angular/core';\nimport { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { CdkDynamicSizeVirtualScroll, itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';\n\ntype Item = itemDynamicSize & { trackId: number };\n\n@Component({\n  selector: 'app-scroll-simple',\n  imports: [CdkVirtualScrollViewport, CdkVirtualForOf, CdkDynamicSizeVirtualScroll],\n  template: `\n    <cdk-virtual-scroll-viewport\n      [itemDynamicSizes]=\"dynamicSize()\"\n      minBufferPx=\"900\"\n      maxBufferPx=\"1350\"\n    >\n      <div\n        *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n        class=\"dynamic-item\"\n        [style.height.px]=\"item.itemSize\"\n      >\n        itemSize: {{ item.itemSize }}\n      </div>\n    </cdk-virtual-scroll-viewport>\n  `,\n})\nexport class ScrollSimplePage {\n  readonly items = signal<Item[]>(\n    Array.from({ length: 20 }, (_, index) => ({\n      trackId: index,\n      itemSize: 40 + (index % 5) * 16,\n    })),\n  );\n  readonly dynamicSize = computed<itemDynamicSize[]>(() =>\n    this.items().map((item) => ({ trackId: item.trackId, itemSize: item.itemSize })),\n  );\n  trackByFn = (_: number, item: Item) => item.trackId;\n}\n

行ごとに高さが違うため、スクロールすると表示中のサイズが変わります。[itemDynamicSizes] 以外は @angular/cdk/scrolling と同じように動作します。

\n", + "html": "

インストール のあとで使います。

\n
\n

各Itemの可変Heightがすでに分かっている場合に使います。

\n
\n\n

ViewportにはグローバルCSSで確定した高さを与えます。

\n
cdk-virtual-scroll-viewport {\n  width: 100%;\n  height: 320px;\n}\n
import { Component, computed, signal } from '@angular/core';\nimport { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { CdkDynamicSizeVirtualScroll, itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';\n\ntype Item = itemDynamicSize & { trackId: number };\n\n@Component({\n  selector: 'app-scroll-simple',\n  imports: [CdkVirtualScrollViewport, CdkVirtualForOf, CdkDynamicSizeVirtualScroll],\n  template: `\n    <cdk-virtual-scroll-viewport\n      [itemDynamicSizes]=\"dynamicSize()\"\n      minBufferPx=\"900\"\n      maxBufferPx=\"1350\"\n    >\n      <div\n        *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n        class=\"dynamic-item\"\n        [style.height.px]=\"item.itemSize\"\n      >\n        itemSize: {{ item.itemSize }}\n      </div>\n    </cdk-virtual-scroll-viewport>\n  `,\n})\nexport class ScrollSimplePage {\n  readonly items = signal<Item[]>(\n    Array.from({ length: 20 }, (_, index) => ({\n      trackId: index,\n      itemSize: 40 + (index % 5) * 16,\n    })),\n  );\n  readonly dynamicSize = computed<itemDynamicSize[]>(() =>\n    this.items().map((item) => ({ trackId: item.trackId, itemSize: item.itemSize })),\n  );\n  trackByFn = (_: number, item: Item) => item.trackId;\n}\n

行ごとに高さが違うため、スクロールすると表示中のサイズが変わります。[itemDynamicSizes] 以外は @angular/cdk/scrolling と同じように動作します。

\n", "headings": [], "codes": [], "scrollMap": [], @@ -97,7 +97,7 @@ export const PROJECT = { "file": "advanced.md", "section": "ガイド", "path": "/projects/ngx-cdk-scroll-strategies/docs/advanced", - "html": "

インストール のあとで使います。シンプルな使い方 のViewport、CDK import、trackBy、サイズモデルの規則を引き継ぎ、既知の itemSize を計測値へ置き換えます。

\n
\n

各Scroll Itemを別Componentにして高さを測り、その結果を [itemDynamicSizes] を駆動するサイズモデルへ書き戻します。

\n
\n\n

trackId をキーにした計測cacheを保持します。Itemの描画後に高さを読み、cacheを更新します。親の computed がItemを itemDynamicSize[] へ写像し、cacheがあればそれを使い、初回計測までは一時的な見積りを置きます。

\n
import { afterRenderEffect, Component, computed, ElementRef, inject, Injectable, input, signal, untracked } from '@angular/core';\nimport { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { CdkDynamicSizeVirtualScroll, itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';\n\ntype Row = { trackId: string; body: string };\ntype SizeCache = { trackId: string; itemSize: number };\n\n@Injectable()\nexport class RowSizeCache {\n  readonly entries = signal<SizeCache[]>([]);\n}\n\n@Component({\n  selector: 'app-measured-row',\n  template: `<div class=\"row\">{{ item().body }}</div>`,\n  styles: `:host { display: block; } .row { white-space: pre-wrap; padding: 12px; }`,\n})\nexport class MeasuredRow {\n  private readonly el = inject(ElementRef<HTMLElement>);\n  private readonly sizes = inject(RowSizeCache);\n  readonly item = input.required<Row>();\n\n  constructor() {\n    afterRenderEffect((onCleanup) => {\n      const trackId = this.item().trackId;\n      const element = this.el.nativeElement;\n      const measure = () => {\n        const itemSize = Math.ceil(element.getBoundingClientRect().height);\n        if (itemSize <= 0) return;\n        untracked(() => this.sizes.entries.update((cache) => {\n          const previous = cache.find((entry) => entry.trackId === trackId);\n          if (previous?.itemSize === itemSize) return cache;\n          return [...cache.filter((entry) => entry.trackId !== trackId), { trackId, itemSize }];\n        }));\n      };\n      const observer = new ResizeObserver(measure);\n      observer.observe(element);\n      measure();\n      onCleanup(() => observer.disconnect());\n    });\n  }\n}\n\n@Component({\n  selector: 'app-scroll-advanced',\n  providers: [RowSizeCache],\n  styles: `cdk-virtual-scroll-viewport { height: 320px; width: 100%; }`,\n  imports: [CdkVirtualScrollViewport, CdkVirtualForOf, CdkDynamicSizeVirtualScroll, MeasuredRow],\n  template: `\n    <cdk-virtual-scroll-viewport\n      [itemDynamicSizes]=\"dynamicSize()\"\n      minBufferPx=\"900\"\n      maxBufferPx=\"1350\"\n    >\n      <app-measured-row\n        *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n        [item]=\"item\"\n      />\n    </cdk-virtual-scroll-viewport>\n  `,\n})\nexport class ScrollAdvancedPage {\n  private readonly sizes = inject(RowSizeCache);\n  readonly items = signal<Row[]>(\n    Array.from({ length: 20 }, (_, index) => ({\n      trackId: String(index),\n      body: `Row ${index + 1}\\n`.repeat(1 + (index % 4)),\n    })),\n  );\n  readonly dynamicSize = computed<itemDynamicSize[]>(() =>\n    this.items().map((item) => {\n      const cached = this.sizes.entries().find((entry) => entry.trackId === item.trackId)?.itemSize;\n      return {\n        trackId: item.trackId,\n        itemSize: cached ?? 80,\n        source: cached === undefined ? 'temporary' : 'cache',\n      };\n    }),\n  );\n  trackByFn = (_: number, item: Row) => item.trackId;\n}\n

各 itemSize は 0 より大きい有限の数値のままにしてください。計測が来るまでは長さを揃えるために一時的な正の見積りを渡し、cache更新で置き換えます。この計測の流れの周辺にあるInfinite Scroll、Refresher、DynamicSizeVirtualScrollService の補助はdemo sourceを参照してください。

\n", + "html": "

インストール のあとで使います。シンプルな使い方 のViewport、CDK import、trackBy、サイズモデルの規則を引き継ぎ、既知の itemSize を計測値へ置き換えます。

\n
\n

各Scroll Itemを別Componentにして高さを測り、その結果を [itemDynamicSizes] を駆動するサイズモデルへ書き戻します。

\n
\n\n

trackId をキーにした計測cacheを保持します。Itemの描画後に高さを読み、cacheを更新します。親の computed がItemを itemDynamicSize[] へ写像し、cacheがあればそれを使い、初回計測までは一時的な見積りを置きます。

\n
import { afterRenderEffect, Component, computed, ElementRef, inject, Injectable, input, signal, untracked } from '@angular/core';\nimport { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { CdkDynamicSizeVirtualScroll, itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';\n\ntype Row = { trackId: string; body: string };\ntype SizeCache = { trackId: string; itemSize: number };\n\n@Injectable()\nexport class RowSizeCache {\n  readonly entries = signal<SizeCache[]>([]);\n}\n\n@Component({\n  selector: 'app-measured-row',\n  template: `<div class=\"row\">{{ item().body }}</div>`,\n  styles: `:host { display: block; } .row { white-space: pre-wrap; padding: 12px; }`,\n})\nexport class MeasuredRow {\n  private readonly el = inject(ElementRef<HTMLElement>);\n  private readonly sizes = inject(RowSizeCache);\n  readonly item = input.required<Row>();\n\n  constructor() {\n    afterRenderEffect((onCleanup) => {\n      const trackId = this.item().trackId;\n      const element = this.el.nativeElement;\n      const measure = () => {\n        const itemSize = Math.ceil(element.getBoundingClientRect().height);\n        if (itemSize <= 0) return;\n        untracked(() => this.sizes.entries.update((cache) => {\n          const previous = cache.find((entry) => entry.trackId === trackId);\n          if (previous?.itemSize === itemSize) return cache;\n          return [...cache.filter((entry) => entry.trackId !== trackId), { trackId, itemSize }];\n        }));\n      };\n      const observer = new ResizeObserver(measure);\n      observer.observe(element);\n      measure();\n      onCleanup(() => observer.disconnect());\n    });\n  }\n}\n\n@Component({\n  selector: 'app-scroll-advanced',\n  providers: [RowSizeCache],\n  styles: `cdk-virtual-scroll-viewport { height: 320px; width: 100%; }`,\n  imports: [CdkVirtualScrollViewport, CdkVirtualForOf, CdkDynamicSizeVirtualScroll, MeasuredRow],\n  template: `\n    <cdk-virtual-scroll-viewport\n      [itemDynamicSizes]=\"dynamicSize()\"\n      minBufferPx=\"900\"\n      maxBufferPx=\"1350\"\n    >\n      <app-measured-row\n        *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n        [item]=\"item\"\n      />\n    </cdk-virtual-scroll-viewport>\n  `,\n})\nexport class ScrollAdvancedPage {\n  private readonly sizes = inject(RowSizeCache);\n  readonly items = signal<Row[]>(\n    Array.from({ length: 20 }, (_, index) => ({\n      trackId: String(index),\n      body: `Row ${index + 1}\\n`.repeat(1 + (index % 4)),\n    })),\n  );\n  readonly dynamicSize = computed<itemDynamicSize[]>(() =>\n    this.items().map((item) => {\n      const cached = this.sizes.entries().find((entry) => entry.trackId === item.trackId)?.itemSize;\n      return {\n        trackId: item.trackId,\n        itemSize: cached ?? 80,\n        source: cached === undefined ? 'temporary' : 'cache',\n      };\n    }),\n  );\n  trackByFn = (_: number, item: Row) => item.trackId;\n}\n

各 itemSize は 0 より大きい有限の数値のままにしてください。計測が来るまでは長さを揃えるために一時的な正の見積りを渡し、cache更新で置き換えます。この計測の流れの周辺にあるInfinite Scroll、Refresher、DynamicSizeVirtualScrollService の補助はdemo sourceを参照してください。

\n", "headings": [], "codes": [], "scrollMap": [], @@ -116,7 +116,7 @@ export const PROJECT = { "file": "reverse.md", "section": "ガイド", "path": "/projects/ngx-cdk-scroll-strategies/docs/reverse", - "html": "

インストール のあとで使います。

\n
\n

シンプルな使い方 のデータモデル、dynamicSize computed、trackBy、Viewport importをそのまま使い、このページではChat型List向けにReverse Layout CSSと [isReverse]=\"true\" を追加します。

\n
\n\n

リバーススクロールの場合は、cdk-virtual-scroll-viewport タグに isReverse ディレクティブを追加します。

\n
<cdk-virtual-scroll-viewport\n  [itemDynamicSizes]=\"dynamicSize()\"\n  [isReverse]=\"true\"\n  minBufferPx=\"900\"\n  maxBufferPx=\"1350\"\n>\n  <div class=\"reverse-items\">\n    <div\n      *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n      class=\"dynamic-item\"\n      [style.height.px]=\"item.itemSize\"\n    >\n      itemSize: {{ item.itemSize }}\n    </div>\n  </div>\n</cdk-virtual-scroll-viewport>\n

styles.css のようなグローバル CSS ファイルで、cdk-virtual-scroll-viewport.reverse-scroll に CSS を追加します。

\n
cdk-virtual-scroll-viewport {\n  width: 100%;\n  height: 320px;\n\n  /* .reverse-scroll class is added from this directive. */\n  &.reverse-scroll {\n    display: flex;\n    flex-direction: column-reverse;\n\n    .cdk-virtual-scroll-content-wrapper {\n      top: auto;\n      bottom: 0;\n    }\n  }\n}\n

さらにアイテムのラッパーを追加します。div.reverse-items クラスは一例です。自由に決めて構いません。

\n
div.reverse-items {\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n\n  position: relative;\n  bottom: 0;\n}\n

リバーススクロールでは、CdkVirtualScrollViewport の measureScrollOffset は動作しません。このディレクティブの scrollOffset を使ってください。
\nhttps://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.tshttps://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.ts

\n

リバースレイアウトはネイティブの負の scrollTop 値を使います。scrollToIndex() は通常どおり論理的なアイテムインデックスを受け取り、その累積オフセットを内部でネイティブ座標に変換します。

\n

オプション

\n

このパッケージには、Virtual Scroll での開発を簡単にする Helper Service が含まれています。

\n
import { DynamicSizeVirtualScrollService } from '@rdlabo/ngx-cdk-scroll-strategies';\n

詳細はこちら: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll.service.ts

\n", + "html": "

インストール のあとで使います。

\n
\n

シンプルな使い方 のデータモデル、dynamicSize computed、trackBy、Viewport importをそのまま使い、このページではChat型List向けにReverse Layout CSSと [isReverse]=\"true\" を追加します。

\n
\n\n

リバーススクロールの場合は、cdk-virtual-scroll-viewport タグに isReverse ディレクティブを追加します。

\n
<cdk-virtual-scroll-viewport\n  [itemDynamicSizes]=\"dynamicSize()\"\n  [isReverse]=\"true\"\n  minBufferPx=\"900\"\n  maxBufferPx=\"1350\"\n>\n  <div class=\"reverse-items\">\n    <div\n      *cdkVirtualFor=\"let item of items(); trackBy: trackByFn\"\n      class=\"dynamic-item\"\n      [style.height.px]=\"item.itemSize\"\n    >\n      itemSize: {{ item.itemSize }}\n    </div>\n  </div>\n</cdk-virtual-scroll-viewport>\n

styles.css のようなグローバル CSS ファイルで、cdk-virtual-scroll-viewport.reverse-scroll に CSS を追加します。

\n
cdk-virtual-scroll-viewport {\n  width: 100%;\n  height: 320px;\n\n  /* .reverse-scroll class is added from this directive. */\n  &.reverse-scroll {\n    display: flex;\n    flex-direction: column-reverse;\n\n    .cdk-virtual-scroll-content-wrapper {\n      top: auto;\n      bottom: 0;\n    }\n  }\n}\n

さらにアイテムのラッパーを追加します。div.reverse-items クラスは一例です。自由に決めて構いません。

\n
div.reverse-items {\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n\n  position: relative;\n  bottom: 0;\n}\n

リバーススクロールでは、CdkVirtualScrollViewport の measureScrollOffset は動作しません。このディレクティブの scrollOffset を使ってください。
\nhttps://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.tshttps://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.ts

\n

リバースレイアウトはネイティブの負の scrollTop 値を使います。scrollToIndex() は通常どおり論理的なアイテムインデックスを受け取り、その累積オフセットを内部でネイティブ座標に変換します。

\n

オプション

\n

このパッケージには、Virtual Scroll での開発を簡単にする Helper Service が含まれています。

\n
import { DynamicSizeVirtualScrollService } from '@rdlabo/ngx-cdk-scroll-strategies';\n

詳細はこちら: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll.service.ts

\n", "headings": [ { "id": "%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3", @@ -166,7 +166,7 @@ export const PROJECT = { "file": "api.md", "section": "リファレンス", "path": "/projects/ngx-cdk-scroll-strategies/docs/api", - "html": "

@rdlabo/ngx-cdk-scroll-strategies v22.0.0 が公開するAPIのリファレンスです。

\n

Directive

\n

directive CdkDynamicSizeVirtualScroll

CDK Virtual Scroll viewportにDynamic Size Strategyを設定します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
itemDynamicSizesitemDynamicSize[]List itemの正確なsize modelです。[]
minBufferPxnumberItemを追加描画するまでの最小bufferです。100
maxBufferPxnumber追加描画時に確保するbufferです。200
isReversebooleanReverse Virtual Scrollを有効にします。false
scrollOffsetnumberReverse Scroll向けに正規化したread-only offsetです。
\n\n\n

Class

\n

class DynamicSizeVirtualScrollStrategy

事前にsizeが分かっているitem向けのAngular CDK VirtualScrollStrategy 実装です。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
constructor(itemSize, minBufferPx, maxBufferPx, isReverse)Size modelとbuffer設定を指定して生成します。
updateItemAndBufferSize(itemDynamicSize[], number, number, boolean) => voidSize modelとbuffer設定を置き換えます。
scrollToIndex(index: number, behavior: ScrollBehavior) => void指定したitem indexへscrollします。
scrolledIndexChangeObservable<number>現在のscroll indexを通知します。
measureScrollOffsetnumber最後に正規化したscroll offsetです。
\n\n\n

class DynamicSizeVirtualScrollService

Viewport lifecycle、item height binding、refresh、smooth scrollのhelperを提供します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
onInit(viewport, latestScrollOffset) => voidViewportの状態を復元します。
onDestroy(viewport) => number後で復元するoffsetを取得します。
getBindDynamicItemHeight(sizes: Signal<itemDynamicSize[]>) => Signal<string[]>Item sizeをCSS heightへ変換します。
refreshViewport(viewport) => voidViewportの寸法を強制更新します。
scrollToTopSmooth(viewport) => Promise<void>先頭へsmooth scrollします。
scrollToPoint(viewport, x, y, duration?) => Promise<void>指定位置へsmooth scrollします。
\n\n\n

Function

\n

function sumItemSize

(dynamicSize: itemDynamicSize[], endIndex: number) => number

endIndex より前にある全itemの累積sizeを返します。

\n\n\n

function calculateItemCountForPixelDistance

(dynamicSize: itemDynamicSize[], itemSizeRange: number, startIndex?: number, isReverse?: boolean) => number

Pixel距離を正確な小数item数へ変換します。

\n\n\n

function calcIndex

(dynamicSize: itemDynamicSize[], itemSizeRange: number, startIndex?: number, isReverse?: boolean) => number

互換性維持用の旧計算です。連続値には calculateItemCountForPixelDistance を使います。

\n\n\n

Type

\n

interface itemDynamicSize

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
itemSizenumberPixel単位の正確なitem sizeです。
consumer metadata`Record<string, stringnumber>`
\n\n
", + "html": "

@rdlabo/ngx-cdk-scroll-strategies v22.0.3 が公開するAPIのリファレンスです。

\n

Directive

\n

directive CdkDynamicSizeVirtualScroll

CDK Virtual Scroll viewportにDynamic Size Strategyを設定します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
itemDynamicSizesitemDynamicSize[]List itemの正確なsize modelです。[]
minBufferPxnumberItemを追加描画するまでの最小bufferです。100
maxBufferPxnumber追加描画時に確保するbufferです。200
isReversebooleanReverse Virtual Scrollを有効にします。false
scrollOffsetnumberReverse Scroll向けに正規化したread-only offsetです。
\n\n\n

Class

\n

class DynamicSizeVirtualScrollStrategy

事前にsizeが分かっているitem向けのAngular CDK VirtualScrollStrategy 実装です。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
constructor(itemSize, minBufferPx, maxBufferPx, isReverse)Size modelとbuffer設定を指定して生成します。
updateItemAndBufferSize(itemDynamicSize[], number, number, boolean) => voidSize modelとbuffer設定を置き換えます。
scrollToIndex(index: number, behavior: ScrollBehavior) => void指定したitem indexへscrollします。
scrolledIndexChangeObservable<number>現在のscroll indexを通知します。
measureScrollOffsetnumber最後に正規化したscroll offsetです。
\n\n\n

class DynamicSizeVirtualScrollService

Viewport lifecycle、item height binding、refresh、smooth scrollのhelperを提供します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
onInit(viewport, latestScrollOffset) => voidViewportの状態を復元します。
onDestroy(viewport) => number後で復元するoffsetを取得します。
getBindDynamicItemHeight(sizes: Signal<itemDynamicSize[]>) => Signal<string[]>Item sizeをCSS heightへ変換します。
refreshViewport(viewport) => voidViewportの寸法を強制更新します。
scrollToTopSmooth(viewport) => Promise<void>先頭へsmooth scrollします。
scrollToPoint(viewport, x, y, duration?) => Promise<void>指定位置へsmooth scrollします。
\n\n\n

Function

\n

function sumItemSize

(dynamicSize: itemDynamicSize[], endIndex: number) => number

endIndex より前にある全itemの累積sizeを返します。

\n\n\n

function calculateItemCountForPixelDistance

(dynamicSize: itemDynamicSize[], itemSizeRange: number, startIndex?: number, isReverse?: boolean) => number

Pixel距離を正確な小数item数へ変換します。

\n\n\n

function calcIndex

(dynamicSize: itemDynamicSize[], itemSizeRange: number, startIndex?: number, isReverse?: boolean) => number

互換性維持用の旧計算です。連続値には calculateItemCountForPixelDistance を使います。

\n\n\n

Type

\n

interface itemDynamicSize

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
itemSizenumberPixel単位の正確なitem sizeです。
consumer metadata`Record<string, stringnumber>`
\n\n
", "headings": [ { "id": "directive", diff --git a/projects/docs/src/ionic-angular-kit/docs/api.md b/projects/docs/src/ionic-angular-kit/docs/api.md index 441e6be..8ae533a 100644 --- a/projects/docs/src/ionic-angular-kit/docs/api.md +++ b/projects/docs/src/ionic-angular-kit/docs/api.md @@ -2,7 +2,7 @@ title: API --- -Public entry-point map for `@rdlabo/ionic-angular-kit` v22.0.0. The focused guide pages describe lifecycle and integration requirements; this page defines which package path owns each API family. +Public entry-point map for `@rdlabo/ionic-angular-kit` v22.0.3. The focused guide pages describe lifecycle and integration requirements; this page defines which package path owns each API family. ## Core diff --git a/projects/docs/src/ionic-angular-kit/docs/ja/api.md b/projects/docs/src/ionic-angular-kit/docs/ja/api.md index fbf3d0f..3f8c090 100644 --- a/projects/docs/src/ionic-angular-kit/docs/ja/api.md +++ b/projects/docs/src/ionic-angular-kit/docs/ja/api.md @@ -2,7 +2,7 @@ title: API --- -`@rdlabo/ionic-angular-kit` v22.0.0 のpublic entry point一覧です。Lifecycleと統合要件は各Guideで説明し、このページではAPI familyを所有するpackage pathを定義します。 +`@rdlabo/ionic-angular-kit` v22.0.3 のpublic entry point一覧です。Lifecycleと統合要件は各Guideで説明し、このページではAPI familyを所有するpackage pathを定義します。 ## Core diff --git a/projects/docs/src/ionic-angular-photo-editor/docs/api.md b/projects/docs/src/ionic-angular-photo-editor/docs/api.md index 14425a4..3c3554c 100644 --- a/projects/docs/src/ionic-angular-photo-editor/docs/api.md +++ b/projects/docs/src/ionic-angular-photo-editor/docs/api.md @@ -2,7 +2,7 @@ title: API --- -Reference for the public entry points exported by `@rdlabo/ionic-angular-photo-editor` v22.0.0. Import components, services, and optional implementations from their dedicated secondary entry points. +Reference for the public entry points exported by `@rdlabo/ionic-angular-photo-editor` v22.0.3. Import components, services, and optional implementations from their dedicated secondary entry points. ## Entry points diff --git a/projects/docs/src/ionic-angular-photo-editor/docs/ja/api.md b/projects/docs/src/ionic-angular-photo-editor/docs/ja/api.md index 98d6a7e..fccbe86 100644 --- a/projects/docs/src/ionic-angular-photo-editor/docs/ja/api.md +++ b/projects/docs/src/ionic-angular-photo-editor/docs/ja/api.md @@ -2,7 +2,7 @@ title: API --- -`@rdlabo/ionic-angular-photo-editor` v22.0.0が公開するpublic entry pointのリファレンスです。Component、Service、任意実装は、それぞれ専用のsecondary entry pointからimportしてください。 +`@rdlabo/ionic-angular-photo-editor` v22.0.3が公開するpublic entry pointのリファレンスです。Component、Service、任意実装は、それぞれ専用のsecondary entry pointからimportしてください。 ## Entry point diff --git a/projects/docs/src/ionic-angular-photo-editor/docs/ja/readme.md b/projects/docs/src/ionic-angular-photo-editor/docs/ja/readme.md index 8f75a2a..d1910b4 100644 --- a/projects/docs/src/ionic-angular-photo-editor/docs/ja/readme.md +++ b/projects/docs/src/ionic-angular-photo-editor/docs/ja/readme.md @@ -96,4 +96,4 @@ ComponentとServiceは、そのentry pointからだけimportしてください | Modalで切り抜き・編集する | [Photo Editor](/docs/editor) | | Modalで画像を閲覧する | [Photo Viewer](/docs/viewer) | | Editorの色を上書きする | [Theme](/docs/theme) | -| 以前のreleaseからupgradeする | [Migration guide](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/docs/migration.md#rdlaboionic-angular-photo-editor) | +| 以前のreleaseからupgradeする | [Migration guide](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/docs/migration.md#rdlaboionic-angular-photo-editor) | diff --git a/projects/docs/src/ionic-angular-photo-editor/docs/ja/theme.md b/projects/docs/src/ionic-angular-photo-editor/docs/ja/theme.md index d125190..1e75426 100644 --- a/projects/docs/src/ionic-angular-photo-editor/docs/ja/theme.md +++ b/projects/docs/src/ionic-angular-photo-editor/docs/ja/theme.md @@ -23,7 +23,7 @@ Default colorはlibrary stylesheetで定義されています。CSS variableで } ``` -Source reference: [`core.scss`](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/photo-editor/src/lib/pages/core.scss) +Source reference: [`core.scss`](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/photo-editor/src/lib/pages/core.scss) ## Toolbar color scheme diff --git a/projects/docs/src/ionic-angular-photo-editor/docs/readme.md b/projects/docs/src/ionic-angular-photo-editor/docs/readme.md index 370d2df..f6f8f04 100644 --- a/projects/docs/src/ionic-angular-photo-editor/docs/readme.md +++ b/projects/docs/src/ionic-angular-photo-editor/docs/readme.md @@ -18,7 +18,7 @@ Photo editor and viewer modal pages for Ionic Angular applications, with Capacit | Crop and edit in a modal | [Photo Editor](/docs/editor) | | Browse images in a modal | [Photo Viewer](/docs/viewer) | | Override editor colors | [Theme](/docs/theme) | -| Upgrade from an earlier release | [Migration guide](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/docs/migration.md#rdlaboionic-angular-photo-editor) | +| Upgrade from an earlier release | [Migration guide](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/docs/migration.md#rdlaboionic-angular-photo-editor) | ## Quick start @@ -93,4 +93,4 @@ Start with [Installation](#installation), then pick a guide. - [Photo Editor](/docs/editor) — crop and edit in a modal. - [Photo Viewer](/docs/viewer) — browse images in a modal. - [Theme](/docs/theme) — CSS variables and toolbar color scheme. -- [Migration guide](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/docs/migration.md#rdlaboionic-angular-photo-editor) — breaking changes and required consumer updates. +- [Migration guide](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/docs/migration.md#rdlaboionic-angular-photo-editor) — breaking changes and required consumer updates. diff --git a/projects/docs/src/ionic-angular-photo-editor/docs/theme.md b/projects/docs/src/ionic-angular-photo-editor/docs/theme.md index 9bdcc2f..7112060 100644 --- a/projects/docs/src/ionic-angular-photo-editor/docs/theme.md +++ b/projects/docs/src/ionic-angular-photo-editor/docs/theme.md @@ -25,7 +25,7 @@ Default colors are defined in the library stylesheet. Override them with CSS var } ``` -Source reference: [`core.scss`](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/photo-editor/src/lib/pages/core.scss). +Source reference: [`core.scss`](https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/photo-editor/src/lib/pages/core.scss). ## Toolbar color scheme diff --git a/projects/docs/src/ionic-angular-scroll-header/docs/api.md b/projects/docs/src/ionic-angular-scroll-header/docs/api.md index 50a7099..6f108ec 100644 --- a/projects/docs/src/ionic-angular-scroll-header/docs/api.md +++ b/projects/docs/src/ionic-angular-scroll-header/docs/api.md @@ -2,7 +2,7 @@ title: API --- -Reference for the public standalone directives exported by `@rdlabo/ionic-angular-scroll-header` v22.0.0. +Reference for the public standalone directives exported by `@rdlabo/ionic-angular-scroll-header` v22.0.3. ## Directives diff --git a/projects/docs/src/ionic-angular-scroll-header/docs/ion-content.md b/projects/docs/src/ionic-angular-scroll-header/docs/ion-content.md index f80b58d..683290b 100644 --- a/projects/docs/src/ionic-angular-scroll-header/docs/ion-content.md +++ b/projects/docs/src/ionic-angular-scroll-header/docs/ion-content.md @@ -7,7 +7,7 @@ scrollActiveLine: [] Attach scroll-aware headers to Ionic content. Call this after [Installation](/docs/readme#installation). - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-header -- Source: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/demo/src/app/scroll-header/scroll-header.page.html +- Source: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/demo/src/app/scroll-header/scroll-header.page.html ```ts import { ScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header'; diff --git a/projects/docs/src/ionic-angular-scroll-header/docs/ja/api.md b/projects/docs/src/ionic-angular-scroll-header/docs/ja/api.md index 94b6992..ff275f0 100644 --- a/projects/docs/src/ionic-angular-scroll-header/docs/ja/api.md +++ b/projects/docs/src/ionic-angular-scroll-header/docs/ja/api.md @@ -2,7 +2,7 @@ title: API --- -`@rdlabo/ionic-angular-scroll-header` v22.0.0 が公開するstandalone directiveのリファレンスです。 +`@rdlabo/ionic-angular-scroll-header` v22.0.3 が公開するstandalone directiveのリファレンスです。 ## Directive diff --git a/projects/docs/src/ionic-angular-scroll-header/docs/ja/ion-content.md b/projects/docs/src/ionic-angular-scroll-header/docs/ja/ion-content.md index 1e0722a..2030ac8 100644 --- a/projects/docs/src/ionic-angular-scroll-header/docs/ja/ion-content.md +++ b/projects/docs/src/ionic-angular-scroll-header/docs/ja/ion-content.md @@ -7,7 +7,7 @@ scrollActiveLine: [] Ionic Content に Scroll 連動 Header を付けます。[インストール](/docs/readme#インストール) のあとで呼び出します。先にpackage CSSをグローバルへimportしてください。Safe Area用の非表示Headerと常時表示するNative Headerの使い分けは、[Safe Areaガイド](/docs/safe-area)を参照してください。 - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-header -- Source: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/demo/src/app/scroll-header/scroll-header.page.html +- Source: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/demo/src/app/scroll-header/scroll-header.page.html ```ts import { Component } from '@angular/core'; diff --git a/projects/docs/src/ionic-angular-scroll-header/docs/ja/virtual-scroll.md b/projects/docs/src/ionic-angular-scroll-header/docs/ja/virtual-scroll.md index fd274d1..ec2e70a 100644 --- a/projects/docs/src/ionic-angular-scroll-header/docs/ja/virtual-scroll.md +++ b/projects/docs/src/ionic-angular-scroll-header/docs/ja/virtual-scroll.md @@ -7,7 +7,7 @@ scrollActiveLine: [] 既存のCDK Virtual Scroll Viewportへ、Scroll連動Headerを拡張します。Header／Safe Areaの形は [IonContent](/docs/ion-content) を起点にし、Scroll HostをViewportへ置き換えます。[インストール](/docs/readme#インストール) のあとで呼び出します。 - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/virtual-scroll-header -- Source: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/demo/src/app/virtual-scroll-header/virtual-scroll-header.page.html +- Source: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/demo/src/app/virtual-scroll-header/virtual-scroll-header.page.html ```ts import { Component } from '@angular/core'; diff --git a/projects/docs/src/ionic-angular-scroll-header/docs/virtual-scroll.md b/projects/docs/src/ionic-angular-scroll-header/docs/virtual-scroll.md index 36261d3..038f201 100644 --- a/projects/docs/src/ionic-angular-scroll-header/docs/virtual-scroll.md +++ b/projects/docs/src/ionic-angular-scroll-header/docs/virtual-scroll.md @@ -7,7 +7,7 @@ scrollActiveLine: [] Coordinate headers with Angular CDK virtual viewports. Call this after [Installation](/docs/readme#installation). - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/virtual-scroll-header -- Source: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/demo/src/app/virtual-scroll-header/virtual-scroll-header.page.html +- Source: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/demo/src/app/virtual-scroll-header/virtual-scroll-header.page.html ```ts import { VirtualScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header'; diff --git a/projects/docs/src/ngx-cdk-scroll-strategies/docs/advanced.md b/projects/docs/src/ngx-cdk-scroll-strategies/docs/advanced.md index 655636d..cfc16fb 100644 --- a/projects/docs/src/ngx-cdk-scroll-strategies/docs/advanced.md +++ b/projects/docs/src/ngx-cdk-scroll-strategies/docs/advanced.md @@ -10,4 +10,4 @@ Call this after [Installation](/docs/readme#installation). > It is difficult without basic knowledge of Angular. - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies/advanced -- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.0/projects/demo/src/app/scroll-strategies/pages/scroll-advanced +- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.3/projects/demo/src/app/scroll-strategies/pages/scroll-advanced diff --git a/projects/docs/src/ngx-cdk-scroll-strategies/docs/api.md b/projects/docs/src/ngx-cdk-scroll-strategies/docs/api.md index dc2e97b..760b21f 100644 --- a/projects/docs/src/ngx-cdk-scroll-strategies/docs/api.md +++ b/projects/docs/src/ngx-cdk-scroll-strategies/docs/api.md @@ -2,7 +2,7 @@ title: API --- -Reference for the public API exported by `@rdlabo/ngx-cdk-scroll-strategies` v22.0.0. +Reference for the public API exported by `@rdlabo/ngx-cdk-scroll-strategies` v22.0.3. ## Directive diff --git a/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/advanced.md b/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/advanced.md index e5670c9..e8bf09e 100644 --- a/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/advanced.md +++ b/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/advanced.md @@ -9,7 +9,7 @@ scrollActiveLine: [] > 各Scroll Itemを別Componentにして高さを測り、その結果を `[itemDynamicSizes]` を駆動するサイズモデルへ書き戻します。 - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies/advanced -- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.0/projects/demo/src/app/scroll-strategies/pages/scroll-advanced +- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.3/projects/demo/src/app/scroll-strategies/pages/scroll-advanced `trackId` をキーにした計測cacheを保持します。Itemの描画後に高さを読み、cacheを更新します。親の `computed` がItemを `itemDynamicSize[]` へ写像し、cacheがあればそれを使い、初回計測までは一時的な見積りを置きます。 diff --git a/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/api.md b/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/api.md index bee3bf6..6eb2be6 100644 --- a/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/api.md +++ b/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/api.md @@ -2,7 +2,7 @@ title: API --- -`@rdlabo/ngx-cdk-scroll-strategies` v22.0.0 が公開するAPIのリファレンスです。 +`@rdlabo/ngx-cdk-scroll-strategies` v22.0.3 が公開するAPIのリファレンスです。 ## Directive diff --git a/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/reverse.md b/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/reverse.md index a845585..6df8da5 100644 --- a/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/reverse.md +++ b/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/reverse.md @@ -9,7 +9,7 @@ scrollActiveLine: [] > [シンプルな使い方](/docs/simple) のデータモデル、`dynamicSize` computed、`trackBy`、Viewport importをそのまま使い、このページではChat型List向けにReverse Layout CSSと `[isReverse]="true"` を追加します。 - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies/reverse -- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.0/projects/demo/src/app/scroll-strategies/pages/scroll-reverse +- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.3/projects/demo/src/app/scroll-strategies/pages/scroll-reverse リバーススクロールの場合は、`cdk-virtual-scroll-viewport` タグに `isReverse` ディレクティブを追加します。 @@ -66,7 +66,7 @@ div.reverse-items { ``` **リバーススクロールでは、CdkVirtualScrollViewport の measureScrollOffset は動作しません。このディレクティブの scrollOffset を使ってください。** -https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.ts +https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.ts リバースレイアウトはネイティブの負の `scrollTop` 値を使います。`scrollToIndex()` は通常どおり論理的なアイテムインデックスを受け取り、その累積オフセットを内部でネイティブ座標に変換します。 @@ -78,4 +78,4 @@ https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll import { DynamicSizeVirtualScrollService } from '@rdlabo/ngx-cdk-scroll-strategies'; ``` -詳細はこちら: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll.service.ts +詳細はこちら: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll.service.ts diff --git a/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/simple.md b/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/simple.md index 50a2ddc..718d1fe 100644 --- a/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/simple.md +++ b/projects/docs/src/ngx-cdk-scroll-strategies/docs/ja/simple.md @@ -9,7 +9,7 @@ scrollActiveLine: [] > 各Itemの可変Heightがすでに分かっている場合に使います。 - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies/simple -- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.0/projects/demo/src/app/scroll-strategies/pages/scroll-simple +- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.3/projects/demo/src/app/scroll-strategies/pages/scroll-simple ViewportにはグローバルCSSで確定した高さを与えます。 diff --git a/projects/docs/src/ngx-cdk-scroll-strategies/docs/reverse.md b/projects/docs/src/ngx-cdk-scroll-strategies/docs/reverse.md index 24480b4..633ea0f 100644 --- a/projects/docs/src/ngx-cdk-scroll-strategies/docs/reverse.md +++ b/projects/docs/src/ngx-cdk-scroll-strategies/docs/reverse.md @@ -9,7 +9,7 @@ Call this after [Installation](/docs/readme#installation). > This demo combines variable item heights with reverse virtual scrolling for a chat UI like WeChat. - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies/reverse -- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.0/projects/demo/src/app/scroll-strategies/pages/scroll-reverse +- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.3/projects/demo/src/app/scroll-strategies/pages/scroll-reverse If reverse scroll, add `isReverse` directive to `cdk-virtual-scroll-viewport` tag. @@ -66,7 +66,7 @@ div.reverse-items { ``` **In Reverse Scroll, CdkVirtualScrollViewport's measureScrollOffset does not work. Please use the scrollOffset of this directive.** -https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.ts +https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll-strategy.ts The reverse layout uses negative native `scrollTop` values. `scrollToIndex()` accepts a logical item index as usual and converts its cumulative offset to that native coordinate internally. @@ -78,4 +78,4 @@ This package contains a Helper Service that simplifies development with Virtual import { DynamicSizeVirtualScrollService } from '@rdlabo/ngx-cdk-scroll-strategies'; ``` -Detail is here: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.0/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll.service.ts +Detail is here: https://github.com/rdlabo-dev/ionic-angular-library/blob/v22.0.3/projects/scroll-strategies/src/lib/dynamic-size-virtual-scroll.service.ts diff --git a/projects/docs/src/ngx-cdk-scroll-strategies/docs/simple.md b/projects/docs/src/ngx-cdk-scroll-strategies/docs/simple.md index 99a9d7a..d41ea37 100644 --- a/projects/docs/src/ngx-cdk-scroll-strategies/docs/simple.md +++ b/projects/docs/src/ngx-cdk-scroll-strategies/docs/simple.md @@ -9,7 +9,7 @@ Call this after [Installation](/docs/readme#installation). > This basic Angular CDK virtual scroll example is for items whose variable heights are already known. - Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies/simple -- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.0/projects/demo/src/app/scroll-strategies/pages/scroll-simple +- Source: https://github.com/rdlabo-dev/ionic-angular-library/tree/v22.0.3/projects/demo/src/app/scroll-strategies/pages/scroll-simple ```ts import { CdkDynamicSizeVirtualScroll, itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies'; From f8f2e39bd98f2418d18f71480b36449875b904c5 Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 12 Sep 2026 01:46:07 +0900 Subject: [PATCH 2/2] chore: refresh generated package docs --- .../app/generated/projects/ionic-angular-kit.en.generated.ts | 2 +- .../projects/ionic-angular-photo-editor.en.generated.ts | 2 +- .../projects/ionic-angular-scroll-header.en.generated.ts | 2 +- .../projects/ngx-cdk-scroll-strategies.en.generated.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/docs/src/app/generated/projects/ionic-angular-kit.en.generated.ts b/projects/docs/src/app/generated/projects/ionic-angular-kit.en.generated.ts index 78bef34..41a5329 100644 --- a/projects/docs/src/app/generated/projects/ionic-angular-kit.en.generated.ts +++ b/projects/docs/src/app/generated/projects/ionic-angular-kit.en.generated.ts @@ -290,7 +290,7 @@ export const PROJECT = { "file": "api.md", "section": "Reference", "path": "/projects/ionic-angular-kit/docs/api", - "html": "

Public entry-point map for @rdlabo/ionic-angular-kit v22.0.0. The focused guide pages describe lifecycle and integration requirements; this page defines which package path owns each API family.

\n

Core

\n

module @rdlabo/ionic-angular-kit

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
API familyPrincipal exportsGuide
StorageKitStorageService, kitClearStoragePreservingKeysStorage and Overlays
OverlayprovideKitOverlay, KitOverlayController, KitLoadingControllerStorage and Overlays
AuthenticationprovideKitAuth, guard functions, KitAuthAccessServiceAuthentication and HTTP
HTTPprovideKitHttp, kitAuthInterceptorAuthentication and HTTP
RealtimeKitRealtimeConnection, KitRealtimeLivenessWatchdogOffline and Realtime
\n\n

Optional entry points

\n

module @rdlabo/ionic-angular-kit/offline

Offline repository, synchronized replica, outbox, request-policy, schema, identity, and recovery APIs. Use provideOffline or its focused provider variants as the composition root.

\n\n

module @rdlabo/ionic-angular-kit/forms

KitIonicFormField, provideKitIonicSignalForms, kitDefaultSignalFormErrorMessage, KIT_SIGNAL_FORM_ERROR_MESSAGE_RESOLVER, and KitSignalFormErrorMessageResolver for adapting Angular 22 Signal Forms to Ionic controls. See Forms.

\n\n

module @rdlabo/ionic-angular-kit/auth-firebase

Firebase authentication providers and typed sign-in, sign-up, linking, reauthentication, verification, password, and account-update functions.

\n\n

module @rdlabo/ionic-angular-kit/auth-firebase/social

Apple and Facebook social authentication helpers and their response and option types.

\n\n

module @rdlabo/ionic-angular-kit/app-update

provideKitAppUpdate and KitAppUpdateService for coordinated Angular service-worker updates.

\n\n

module @rdlabo/ionic-angular-kit/live-update

provideLiveUpdateReadiness for coordinating Live Update startup readiness.

\n\n

module @rdlabo/ionic-angular-kit/printer

PDF layout, DOM-to-PNG, preview, download, rotation, paper-size, and Brother Print settings helpers.

\n\n

module @rdlabo/ionic-angular-kit/review

kitRequestReview and KitRequestReviewOptions for native review prompts.

\n\n

module @rdlabo/ionic-angular-kit/theme

provideKitTheme, KitThemeController, KitThemeConfig, and KitThemeMode for persisted theme selection.

\n\n
", + "html": "

Public entry-point map for @rdlabo/ionic-angular-kit v22.0.3. The focused guide pages describe lifecycle and integration requirements; this page defines which package path owns each API family.

\n

Core

\n

module @rdlabo/ionic-angular-kit

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
API familyPrincipal exportsGuide
StorageKitStorageService, kitClearStoragePreservingKeysStorage and Overlays
OverlayprovideKitOverlay, KitOverlayController, KitLoadingControllerStorage and Overlays
AuthenticationprovideKitAuth, guard functions, KitAuthAccessServiceAuthentication and HTTP
HTTPprovideKitHttp, kitAuthInterceptorAuthentication and HTTP
RealtimeKitRealtimeConnection, KitRealtimeLivenessWatchdogOffline and Realtime
\n\n

Optional entry points

\n

module @rdlabo/ionic-angular-kit/offline

Offline repository, synchronized replica, outbox, request-policy, schema, identity, and recovery APIs. Use provideOffline or its focused provider variants as the composition root.

\n\n

module @rdlabo/ionic-angular-kit/forms

KitIonicFormField, provideKitIonicSignalForms, kitDefaultSignalFormErrorMessage, KIT_SIGNAL_FORM_ERROR_MESSAGE_RESOLVER, and KitSignalFormErrorMessageResolver for adapting Angular 22 Signal Forms to Ionic controls. See Forms.

\n\n

module @rdlabo/ionic-angular-kit/auth-firebase

Firebase authentication providers and typed sign-in, sign-up, linking, reauthentication, verification, password, and account-update functions.

\n\n

module @rdlabo/ionic-angular-kit/auth-firebase/social

Apple and Facebook social authentication helpers and their response and option types.

\n\n

module @rdlabo/ionic-angular-kit/app-update

provideKitAppUpdate and KitAppUpdateService for coordinated Angular service-worker updates.

\n\n

module @rdlabo/ionic-angular-kit/live-update

provideLiveUpdateReadiness for coordinating Live Update startup readiness.

\n\n

module @rdlabo/ionic-angular-kit/printer

PDF layout, DOM-to-PNG, preview, download, rotation, paper-size, and Brother Print settings helpers.

\n\n

module @rdlabo/ionic-angular-kit/review

kitRequestReview and KitRequestReviewOptions for native review prompts.

\n\n

module @rdlabo/ionic-angular-kit/theme

provideKitTheme, KitThemeController, KitThemeConfig, and KitThemeMode for persisted theme selection.

\n\n
", "headings": [ { "id": "core", diff --git a/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.en.generated.ts b/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.en.generated.ts index c91d9c6..6f70043 100644 --- a/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.en.generated.ts +++ b/projects/docs/src/app/generated/projects/ionic-angular-photo-editor.en.generated.ts @@ -272,7 +272,7 @@ export const PROJECT = { "file": "api.md", "section": "Reference", "path": "/projects/ionic-angular-photo-editor/docs/api", - "html": "

Reference for the public entry points exported by @rdlabo/ionic-angular-photo-editor v22.0.0. Import components, services, and optional implementations from their dedicated secondary entry points.

\n

Entry points

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Import pathPrincipal exports
@rdlabo/ionic-angular-photo-editorConfiguration, shared types, PhotoLoadError
@rdlabo/ionic-angular-photo-editor/editorPhotoEditorPage
@rdlabo/ionic-angular-photo-editor/editor/tuicreateTuiImageEditor
@rdlabo/ionic-angular-photo-editor/viewerPhotoViewerPage
@rdlabo/ionic-angular-photo-editor/filePhotoFileService
@rdlabo/ionic-angular-photo-editor/file/capacitorloadCapacitorPhotoCamera
\n

Configuration and photo loading

\n

function providePhotoEditor(config?: PhotoEditorConfig): EnvironmentProviders

Registers application-wide photo-loading defaults and the optional editor and camera adapters.

\n\n

constant PHOTO_EDITOR_CONFIG

\n

Angular injection token containing the resolved maxSize, labels, image-editor factory, and camera loader.

\n

interface PhotoEditorConfig

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionDefault
maxSizenumberLongest edge in pixels after resize.1000
labelsPartial<PhotoFileLabels>Camera, album, and cancel label overrides.undefined
createImageEditorPhotoImageEditorFactoryAdapter used for editing and resizing.
loadCameraPhotoCameraLoaderAdapter used for native camera and album selection.
\n\n

class PhotoFileService

Imported from @rdlabo/ionic-angular-photo-editor/file. Selects and normalizes photos from browser and Capacitor sources.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
loadPhoto(options?)(options?: PhotoLoadOptions) => Promise<string[]>Opens the platform picker and returns normalized data URLs.
\n\n\n

interface PhotoLoadOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionDefault
limitnumberMaximum images for album and browser selection.1
maxSizenumberLongest edge in pixels after resize.Configured maxSize or 1000
labelsPartial<PhotoFileLabels>Per-request native action-sheet label overrides.Configured labels
\n\n

class PhotoLoadError

Typed error for expected photo-selection failures. Its readonly code is a PhotoLoadErrorCode.

\n\n

type alias PhotoLoadErrorCode

'cancelled' | 'invalid-type' | 'unavailable'

\n\n

interface PhotoFileLabels

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
camerastringCamera source label.
albumstringAlbum source label.
cancelstringCancel action label.
\n\n

Editor

\n

component PhotoEditorPage

Imported from @rdlabo/ionic-angular-photo-editor/editor and presented through an Ionic modal.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
valuestringImage URL or data URL. Required.
requireSquarebooleanRequires square cropping before editing continues.false
toolbarColorSchemePhotoToolbarColorSchemeToolbar appearance behind the header buttons. Required.
labelsPartial<PhotoEditorLabels>Editor label overrides.undefined
\n\n\n

interface PhotoEditorProps

The modal componentProps contract. It contains the same value, requireSquare, toolbarColorScheme, and labels fields shown above.

\n\n

interface PhotoEditorResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
action'save'Identifies a successful save.
valuestringData URL of the edited image.
\n\n

interface PhotoEditorLabels

String fields: save, close, back, apply, crop, rotate, cropCover, crop16x9, cropSquare, cropFree, filter, brightness, original, invert, sepia, vintage, blur, grayscale, sharpen, and emboss.

\n\n

Viewer

\n

component PhotoViewerPage

Imported from @rdlabo/ionic-angular-photo-editor/viewer and presented through an Ionic modal.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
imageUrlsstring[]Image URLs or data URLs. Required.
indexnumberInitially selected image index.0
isCirclebooleanDisplays images as circles.false
enableDeletebooleanDisplays the delete button.false
enableFooterSafeAreabooleanAdds iOS footer safe-area padding.false
toolbarColorSchemePhotoToolbarColorSchemeToolbar appearance behind the header buttons. Required.
imageAltstring | ((url: string, index: number) => string)Accessible image alt text or resolver.''
labelsPartial<PhotoViewerLabels>Viewer label overrides.undefined
\n\n\n

interface PhotoViewerProps

The modal componentProps contract. It contains the same fields shown for PhotoViewerPage.

\n\n

interface PhotoViewerResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
action'delete'Identifies a delete request.
indexnumberIndex of the selected image.
valuestringURL or data URL at that index.
\n\n

interface PhotoViewerLabels

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
closestringClose action label.
deletestringDelete action label.
\n\n

type alias PhotoToolbarColorScheme

'light' | 'dark'

\n\n

Optional adapters

\n

function createTuiImageEditor

Imported from @rdlabo/ionic-angular-photo-editor/editor/tui. A PhotoImageEditorFactory that loads the TUI Image Editor implementation in a bundler-resolvable lazy chunk.

\n\n

function loadCapacitorPhotoCamera

Imported from @rdlabo/ionic-angular-photo-editor/file/capacitor. A PhotoCameraLoader that loads the Capacitor Camera implementation in a bundler-resolvable lazy chunk.

\n\n

type alias PhotoImageEditorFactory

(host: Element, options: PhotoImageEditorOptions) => Promise<PhotoImageEditor>

\n\n

interface PhotoImageEditorOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
cssMaxWidthnumberMaximum editor canvas width.
cssMaxHeightnumberMaximum editor canvas height.
\n\n

interface PhotoCropRect

Rectangle with numeric left, top, width, and height fields.

\n\n

interface PhotoImageEditor

Minimal editor-adapter contract:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberType
applyFilter(type: string, options?: Exclude<PhotoFilterOptions, null>) => Promise<unknown>
crop(rect: PhotoCropRect) => Promise<unknown>
destroy() => void
getCropzoneRect() => PhotoCropRect
hasFilter(type: string) => boolean
loadImageFromFile(file: File) => Promise<{ newWidth: number; newHeight: number }>
removeFilter(type: string) => Promise<unknown>
rotate(angle: number) => Promise<unknown>
setCropzoneRect(ratio?: number) => void
startDrawingMode(mode: string) => void
stopDrawingMode() => void
toDataURL(options?: { multiplier?: number }) => string
\n\n\n

type alias PhotoCameraLoader

() => Promise<PhotoCameraAdapter>

\n\n

interface PhotoCameraAdapter

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
getPhoto(options: PhotoCameraOptions) => Promise<PhotoCameraImage>Camera capture.
pickImages(options: PhotoCameraOptions) => Promise<{ photos: PhotoCameraImage[] }>Album selection.
\n\n

interface PhotoCameraOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
qualitynumberRequested image quality.
widthnumberRequested image width.
limit?numberOptional album selection limit.
source?'camera'Optional camera-only source marker.
\n\n

interface PhotoCameraImage

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
dataUrl?stringImage data URL.
webPath?stringBrowser-accessible image URL.
\n\n

Supporting image types

\n

interface PhotoFilter

Rendered filter preview with name, type, option, data, width, and height.

\n\n

type alias PhotoFilterOptions

{ blur: number } | { brightness: number } | { noise: number } | { blocksize: number } | { color: string; distance: number; useAlpha?: boolean } | { mode: string; color: string; alpha?: number } | { maskObjId: number } | null

\n\n

interface PhotoFilterPreset

Filter menu preset with name, type, and option.

\n\n

interface PhotoSize

Two-dimensional pixel size with numeric width and height.

\n\n
", + "html": "

Reference for the public entry points exported by @rdlabo/ionic-angular-photo-editor v22.0.3. Import components, services, and optional implementations from their dedicated secondary entry points.

\n

Entry points

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Import pathPrincipal exports
@rdlabo/ionic-angular-photo-editorConfiguration, shared types, PhotoLoadError
@rdlabo/ionic-angular-photo-editor/editorPhotoEditorPage
@rdlabo/ionic-angular-photo-editor/editor/tuicreateTuiImageEditor
@rdlabo/ionic-angular-photo-editor/viewerPhotoViewerPage
@rdlabo/ionic-angular-photo-editor/filePhotoFileService
@rdlabo/ionic-angular-photo-editor/file/capacitorloadCapacitorPhotoCamera
\n

Configuration and photo loading

\n

function providePhotoEditor(config?: PhotoEditorConfig): EnvironmentProviders

Registers application-wide photo-loading defaults and the optional editor and camera adapters.

\n\n

constant PHOTO_EDITOR_CONFIG

\n

Angular injection token containing the resolved maxSize, labels, image-editor factory, and camera loader.

\n

interface PhotoEditorConfig

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionDefault
maxSizenumberLongest edge in pixels after resize.1000
labelsPartial<PhotoFileLabels>Camera, album, and cancel label overrides.undefined
createImageEditorPhotoImageEditorFactoryAdapter used for editing and resizing.
loadCameraPhotoCameraLoaderAdapter used for native camera and album selection.
\n\n

class PhotoFileService

Imported from @rdlabo/ionic-angular-photo-editor/file. Selects and normalizes photos from browser and Capacitor sources.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
loadPhoto(options?)(options?: PhotoLoadOptions) => Promise<string[]>Opens the platform picker and returns normalized data URLs.
\n\n\n

interface PhotoLoadOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionDefault
limitnumberMaximum images for album and browser selection.1
maxSizenumberLongest edge in pixels after resize.Configured maxSize or 1000
labelsPartial<PhotoFileLabels>Per-request native action-sheet label overrides.Configured labels
\n\n

class PhotoLoadError

Typed error for expected photo-selection failures. Its readonly code is a PhotoLoadErrorCode.

\n\n

type alias PhotoLoadErrorCode

'cancelled' | 'invalid-type' | 'unavailable'

\n\n

interface PhotoFileLabels

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
camerastringCamera source label.
albumstringAlbum source label.
cancelstringCancel action label.
\n\n

Editor

\n

component PhotoEditorPage

Imported from @rdlabo/ionic-angular-photo-editor/editor and presented through an Ionic modal.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
valuestringImage URL or data URL. Required.
requireSquarebooleanRequires square cropping before editing continues.false
toolbarColorSchemePhotoToolbarColorSchemeToolbar appearance behind the header buttons. Required.
labelsPartial<PhotoEditorLabels>Editor label overrides.undefined
\n\n\n

interface PhotoEditorProps

The modal componentProps contract. It contains the same value, requireSquare, toolbarColorScheme, and labels fields shown above.

\n\n

interface PhotoEditorResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
action'save'Identifies a successful save.
valuestringData URL of the edited image.
\n\n

interface PhotoEditorLabels

String fields: save, close, back, apply, crop, rotate, cropCover, crop16x9, cropSquare, cropFree, filter, brightness, original, invert, sepia, vintage, blur, grayscale, sharpen, and emboss.

\n\n

Viewer

\n

component PhotoViewerPage

Imported from @rdlabo/ionic-angular-photo-editor/viewer and presented through an Ionic modal.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
imageUrlsstring[]Image URLs or data URLs. Required.
indexnumberInitially selected image index.0
isCirclebooleanDisplays images as circles.false
enableDeletebooleanDisplays the delete button.false
enableFooterSafeAreabooleanAdds iOS footer safe-area padding.false
toolbarColorSchemePhotoToolbarColorSchemeToolbar appearance behind the header buttons. Required.
imageAltstring | ((url: string, index: number) => string)Accessible image alt text or resolver.''
labelsPartial<PhotoViewerLabels>Viewer label overrides.undefined
\n\n\n

interface PhotoViewerProps

The modal componentProps contract. It contains the same fields shown for PhotoViewerPage.

\n\n

interface PhotoViewerResult

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
action'delete'Identifies a delete request.
indexnumberIndex of the selected image.
valuestringURL or data URL at that index.
\n\n

interface PhotoViewerLabels

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
closestringClose action label.
deletestringDelete action label.
\n\n

type alias PhotoToolbarColorScheme

'light' | 'dark'

\n\n

Optional adapters

\n

function createTuiImageEditor

Imported from @rdlabo/ionic-angular-photo-editor/editor/tui. A PhotoImageEditorFactory that loads the TUI Image Editor implementation in a bundler-resolvable lazy chunk.

\n\n

function loadCapacitorPhotoCamera

Imported from @rdlabo/ionic-angular-photo-editor/file/capacitor. A PhotoCameraLoader that loads the Capacitor Camera implementation in a bundler-resolvable lazy chunk.

\n\n

type alias PhotoImageEditorFactory

(host: Element, options: PhotoImageEditorOptions) => Promise<PhotoImageEditor>

\n\n

interface PhotoImageEditorOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
cssMaxWidthnumberMaximum editor canvas width.
cssMaxHeightnumberMaximum editor canvas height.
\n\n

interface PhotoCropRect

Rectangle with numeric left, top, width, and height fields.

\n\n

interface PhotoImageEditor

Minimal editor-adapter contract:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberType
applyFilter(type: string, options?: Exclude<PhotoFilterOptions, null>) => Promise<unknown>
crop(rect: PhotoCropRect) => Promise<unknown>
destroy() => void
getCropzoneRect() => PhotoCropRect
hasFilter(type: string) => boolean
loadImageFromFile(file: File) => Promise<{ newWidth: number; newHeight: number }>
removeFilter(type: string) => Promise<unknown>
rotate(angle: number) => Promise<unknown>
setCropzoneRect(ratio?: number) => void
startDrawingMode(mode: string) => void
stopDrawingMode() => void
toDataURL(options?: { multiplier?: number }) => string
\n\n\n

type alias PhotoCameraLoader

() => Promise<PhotoCameraAdapter>

\n\n

interface PhotoCameraAdapter

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
getPhoto(options: PhotoCameraOptions) => Promise<PhotoCameraImage>Camera capture.
pickImages(options: PhotoCameraOptions) => Promise<{ photos: PhotoCameraImage[] }>Album selection.
\n\n

interface PhotoCameraOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
qualitynumberRequested image quality.
widthnumberRequested image width.
limit?numberOptional album selection limit.
source?'camera'Optional camera-only source marker.
\n\n

interface PhotoCameraImage

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
dataUrl?stringImage data URL.
webPath?stringBrowser-accessible image URL.
\n\n

Supporting image types

\n

interface PhotoFilter

Rendered filter preview with name, type, option, data, width, and height.

\n\n

type alias PhotoFilterOptions

{ blur: number } | { brightness: number } | { noise: number } | { blocksize: number } | { color: string; distance: number; useAlpha?: boolean } | { mode: string; color: string; alpha?: number } | { maskObjId: number } | null

\n\n

interface PhotoFilterPreset

Filter menu preset with name, type, and option.

\n\n

interface PhotoSize

Two-dimensional pixel size with numeric width and height.

\n\n
", "headings": [ { "id": "entry-points", diff --git a/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.en.generated.ts b/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.en.generated.ts index 5f0336f..f2240db 100644 --- a/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.en.generated.ts +++ b/projects/docs/src/app/generated/projects/ionic-angular-scroll-header.en.generated.ts @@ -139,7 +139,7 @@ export const PROJECT = { "file": "api.md", "section": "Reference", "path": "/projects/ionic-angular-scroll-header/docs/api", - "html": "

Reference for the public standalone directives exported by @rdlabo/ionic-angular-scroll-header v22.0.0.

\n

Directives

\n

directive ScrollHeaderDirective

Connects an ion-content scroll stream to a projected header element.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorContent childDescription
ion-content[rdlaboScrollHeader]scrollHeaderHeader element that follows the IonContent scroll position.
\n\n\n

directive VirtualScrollHeaderDirective

Connects a CDK virtual-scroll viewport to a projected header element and removes its subscription when destroyed.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorContent childDescription
ion-content[rdlaboVirtualScrollHeader]virtualScrollCdkVirtualScrollViewport to observe.
ion-content[rdlaboVirtualScrollHeader]scrollHeaderHeader element that follows the virtual-scroll offset.
\n\n\n

directive FixVirtualScrollElementDirective

Applies the viewport element correction used by the package's CDK virtual-scroll integration.

\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorDescription
cdk-virtual-scroll-viewport[rdlaboFixVirtualScrollElement]Corrects the virtual-scroll viewport element during initialization.
\n\n\n
", + "html": "

Reference for the public standalone directives exported by @rdlabo/ionic-angular-scroll-header v22.0.3.

\n

Directives

\n

directive ScrollHeaderDirective

Connects an ion-content scroll stream to a projected header element.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorContent childDescription
ion-content[rdlaboScrollHeader]scrollHeaderHeader element that follows the IonContent scroll position.
\n\n\n

directive VirtualScrollHeaderDirective

Connects a CDK virtual-scroll viewport to a projected header element and removes its subscription when destroyed.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorContent childDescription
ion-content[rdlaboVirtualScrollHeader]virtualScrollCdkVirtualScrollViewport to observe.
ion-content[rdlaboVirtualScrollHeader]scrollHeaderHeader element that follows the virtual-scroll offset.
\n\n\n

directive FixVirtualScrollElementDirective

Applies the viewport element correction used by the package's CDK virtual-scroll integration.

\n\n\n\n\n\n\n\n\n\n\n\n\n
SelectorDescription
cdk-virtual-scroll-viewport[rdlaboFixVirtualScrollElement]Corrects the virtual-scroll viewport element during initialization.
\n\n\n
", "headings": [ { "id": "directives", diff --git a/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.en.generated.ts b/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.en.generated.ts index 52fe117..c085986 100644 --- a/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.en.generated.ts +++ b/projects/docs/src/app/generated/projects/ngx-cdk-scroll-strategies.en.generated.ts @@ -166,7 +166,7 @@ export const PROJECT = { "file": "api.md", "section": "Reference", "path": "/projects/ngx-cdk-scroll-strategies/docs/api", - "html": "

Reference for the public API exported by @rdlabo/ngx-cdk-scroll-strategies v22.0.0.

\n

Directive

\n

directive CdkDynamicSizeVirtualScroll

Installs the dynamic-size strategy on a CDK virtual-scroll viewport.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
itemDynamicSizesitemDynamicSize[]Exact size model for the list items.[]
minBufferPxnumberMinimum remaining buffer before rendering more items.100
maxBufferPxnumberTarget buffer rendered when replenishing.200
isReversebooleanEnables reverse virtual scrolling.false
scrollOffsetnumberRead-only normalized offset for reverse scrolling.
\n\n\n

Classes

\n

class DynamicSizeVirtualScrollStrategy

Implements Angular CDK VirtualScrollStrategy for item sizes known in advance.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
constructor(itemSize, minBufferPx, maxBufferPx, isReverse)Creates the strategy with its size model and buffer limits.
updateItemAndBufferSize(itemDynamicSize[], number, number, boolean) => voidReplaces the size model and buffer configuration.
scrollToIndex(index: number, behavior: ScrollBehavior) => voidScrolls to an item index.
scrolledIndexChangeObservable<number>Emits the currently scrolled index.
measureScrollOffsetnumberLast normalized scroll offset.
\n\n\n

class DynamicSizeVirtualScrollService

Provides viewport lifecycle, item-height binding, refresh, and smooth-scroll helpers.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
onInit(viewport, latestScrollOffset) => voidRestores viewport state.
onDestroy(viewport) => numberCaptures the offset for later restoration.
getBindDynamicItemHeight(sizes: Signal<itemDynamicSize[]>) => Signal<string[]>Converts item sizes into CSS heights.
refreshViewport(viewport) => voidForces viewport dimensions to refresh.
scrollToTopSmooth(viewport) => Promise<void>Smoothly scrolls to the top.
scrollToPoint(viewport, x, y, duration?) => Promise<void>Smoothly scrolls to a point.
\n\n\n

Functions

\n

function sumItemSize

(dynamicSize: itemDynamicSize[], endIndex: number) => number

Returns the cumulative size of all items before endIndex.

\n\n\n

function calculateItemCountForPixelDistance

(dynamicSize: itemDynamicSize[], itemSizeRange: number, startIndex?: number, isReverse?: boolean) => number

Converts a pixel distance into an exact fractional item count.

\n\n\n

function calcIndex

(dynamicSize: itemDynamicSize[], itemSizeRange: number, startIndex?: number, isReverse?: boolean) => number

Legacy compatibility calculation. Use calculateItemCountForPixelDistance for continuous results.

\n\n\n

Types

\n

interface itemDynamicSize

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
itemSizenumberExact item size in pixels.
consumer metadata`Record<string, stringnumber>`
\n\n
", + "html": "

Reference for the public API exported by @rdlabo/ngx-cdk-scroll-strategies v22.0.3.

\n

Directive

\n

directive CdkDynamicSizeVirtualScroll

Installs the dynamic-size strategy on a CDK virtual-scroll viewport.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputTypeDescriptionDefault
itemDynamicSizesitemDynamicSize[]Exact size model for the list items.[]
minBufferPxnumberMinimum remaining buffer before rendering more items.100
maxBufferPxnumberTarget buffer rendered when replenishing.200
isReversebooleanEnables reverse virtual scrolling.false
scrollOffsetnumberRead-only normalized offset for reverse scrolling.
\n\n\n

Classes

\n

class DynamicSizeVirtualScrollStrategy

Implements Angular CDK VirtualScrollStrategy for item sizes known in advance.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
constructor(itemSize, minBufferPx, maxBufferPx, isReverse)Creates the strategy with its size model and buffer limits.
updateItemAndBufferSize(itemDynamicSize[], number, number, boolean) => voidReplaces the size model and buffer configuration.
scrollToIndex(index: number, behavior: ScrollBehavior) => voidScrolls to an item index.
scrolledIndexChangeObservable<number>Emits the currently scrolled index.
measureScrollOffsetnumberLast normalized scroll offset.
\n\n\n

class DynamicSizeVirtualScrollService

Provides viewport lifecycle, item-height binding, refresh, and smooth-scroll helpers.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MemberTypeDescription
onInit(viewport, latestScrollOffset) => voidRestores viewport state.
onDestroy(viewport) => numberCaptures the offset for later restoration.
getBindDynamicItemHeight(sizes: Signal<itemDynamicSize[]>) => Signal<string[]>Converts item sizes into CSS heights.
refreshViewport(viewport) => voidForces viewport dimensions to refresh.
scrollToTopSmooth(viewport) => Promise<void>Smoothly scrolls to the top.
scrollToPoint(viewport, x, y, duration?) => Promise<void>Smoothly scrolls to a point.
\n\n\n

Functions

\n

function sumItemSize

(dynamicSize: itemDynamicSize[], endIndex: number) => number

Returns the cumulative size of all items before endIndex.

\n\n\n

function calculateItemCountForPixelDistance

(dynamicSize: itemDynamicSize[], itemSizeRange: number, startIndex?: number, isReverse?: boolean) => number

Converts a pixel distance into an exact fractional item count.

\n\n\n

function calcIndex

(dynamicSize: itemDynamicSize[], itemSizeRange: number, startIndex?: number, isReverse?: boolean) => number

Legacy compatibility calculation. Use calculateItemCountForPixelDistance for continuous results.

\n\n\n

Types

\n

interface itemDynamicSize

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescription
itemSizenumberExact item size in pixels.
consumer metadata`Record<string, stringnumber>`
\n\n
", "headings": [ { "id": "directive",