CC-31652 Introduced datasource.dependable and datasource.trigger services.

_data/sidebars/scos_dev_sidebar.yml

@@ -1782,6 +1782,15 @@ entries:
             - title: "Datasources"
               url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasources.html
               nested:
+                - title: "Trigger"
+                  url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.html
+                  nested:
+                    - title: "Change"
+                      url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.html
+                    - title: "Input"
+                      url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.html
+                - title: "Depenable"
+                  url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-dependable.html
                 - title: "HTTP"
                   url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-http.html
                 - title: "Inline"

docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md

@@ -0,0 +1,113 @@
+---
+title: Datasource Dependable
+description: This document provides details about the Datasource Dependable service in the Components Library.
+template: concept-topic-template
+related:
+  - title: Datasource Trigger
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html
+  - title: Datasource Http
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html
+  - title: Datasource Inline Table
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html
+  - title: Datasource Inline
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html
+---
+
+This document explains the Datasource Dependable service in the Components Library.
+
+## Overview
+
+Datasource Dependable is an Angular Service that resolves datasources for a component based on the value of a specific element. 
+
+Check out an example usage of the Datasource Dependable.
+
+Service configuration:
+
+- `type` — a datasource type.  
+- `id` — an ID of the depended element.  
+- `datasource` — the next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html)).  
+
+```html
+<spy-datasource-dependable id="dependable-select">
+    <spy-select
+        [options]="{ ... }"
+    >
+    </spy-select>
+</spy-datasource-dependable>
+
+<spy-select
+    [datasource]="{
+        type: 'dependable-element',
+        id: 'dependable-select',
+        datasource: {
+            type: 'http',
+            url: '/request-url',
+        },
+    }"
+>
+</spy-select>
+```
+
+The depended element (in our example it's a `SelectComponent`) must implement a `DatasourceDependableElement` abstract class (token) and return component value using `getValueChanges()` abstract method:   
+
+```ts
+@Component({
+    ...,
+    providers: [
+        {
+            provide: DatasourceDependableElement,
+            useExisting: SelectComponent,
+        },
+    ],
+})
+export class SelectComponent implements DatasourceDependableElement {
+    ...
+    getValueChanges(): Observable<SelectValueSelected> {
+        // This method must return an Observable of the component value.
+    }
+    ...
+}
+```
+
+## Service registration
+
+Register the service:
+
+```ts
+declare module '@spryker/datasource' {
+    interface DatasourceRegistry {
+        'dependable-element': DatasourceDependableService;
+    }
+}
+
+@NgModule({
+    imports: [
+        DatasourceModule.withDatasources({
+            'dependable-element': DatasourceDependableService,
+        }),
+    ],
+})
+export class RootModule {}
+```
+
+## Interfaces
+
+Below you can find interfaces for the Datasource Dependable:
+
+```ts
+import { DatasourceConfig } from '@spryker/datasource';
+import { Observable } from 'rxjs';
+
+export interface DatasourceDependableConfig extends DatasourceConfig {
+    id: string;
+    datasource: DatasourceConfig;
+}
+
+export interface DatasourceDependableElementsConfig {
+    [id: string]: DatasourceDependableElement;
+}
+
+export abstract class DatasourceDependableElement {
+    abstract getValueChanges(): Observable<unknown>;
+}
+```

docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md

@@ -5,8 +5,10 @@ template: concept-topic-template
 redirect_from:
   - /docs/marketplace/dev/front-end/202212.0/ui-components-library/datasources/datasource-http.html
 related:
-  - title: Datasources
-    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasources.html
+  - title: Datasource Dependable
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html
+  - title: Datasource Trigger
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html
   - title: Datasource Inline Table
     link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html
   - title: Datasource Inline

docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline-table.md

@@ -5,8 +5,10 @@ template: concept-topic-template
 redirect_from:
   - /docs/marketplace/dev/front-end/202212.0/ui-components-library/datasources/datasource-inline-table.html
 related:
-  - title: Datasources
-    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasources.html
+  - title: Datasource Dependable
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html
+  - title: Datasource Trigger
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html
   - title: Datasource Http
     link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html
   - title: Datasource Inline

docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline.md

@@ -5,8 +5,10 @@ template: concept-topic-template
 redirect_from:
   - /docs/marketplace/dev/front-end/202212.0/ui-components-library/datasources/datasource-inline.html
 related:
-  - title: Datasources
-    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasources.html
+  - title: Datasource Dependable
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html
+  - title: Datasource Trigger
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html
   - title: Datasource Http
     link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html
   - title: Datasource Inline Table

docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md

@@ -0,0 +1,84 @@
+---
+title: Datasource Trigger Change
+description: This document provides details about the Datasource Trigger Change service in the Components Library.
+template: concept-topic-template
+related:
+  - title: Datasource Dependable
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html
+  - title: Datasource Http
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html
+  - title: Datasource Inline Table
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html
+  - title: Datasource Inline
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html
+---
+
+This document explains the Datasource Trigger Change service in the Components Library.
+
+## Overview
+
+Datasource Trigger Change is an Angular Service that extracts the value from the event trigger element and checks whether it meets certain criteria. If the value is valid, it emits an object containing the value.  
+
+Check out an example usage of the Datasource Trigger Change.
+
+Service configuration:
+
+- `type` — a datasource type.  
+- `event` — an event type triggered by element.  
+- `debounce` - delays the emission of values the next datasource (default is `300ms`).  
+- `minCharacters` - emits the trigger element value if the length is greater than or equal to the `minCharacters` property (default is `2`).  
+- `datasource` — the next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html)).  
+
+```html
+<spy-select
+    [datasource]="{
+        type: 'trigger',
+        event: 'change',
+        debounce: 400,
+        minCharacters: 3,
+        datasource: {
+            type: 'http',
+            url: '/request-url',
+        },
+    }"
+>
+</spy-select>
+```
+
+## Service registration
+
+Register the service:
+
+```ts
+declare module '@spryker/datasource' {
+    interface DatasourceRegistry {
+        trigger: DatasourceTriggerService;
+    }
+}
+
+@NgModule({
+    imports: [
+        DatasourceModule.withDatasources({
+            trigger: DatasourceTriggerService,
+        }),
+        DatasourceTriggerModule.withEvents({
+            change: ChangeDatasourceTriggerService,
+        }),
+    ],
+})
+export class RootModule {}
+```
+
+## Interfaces
+
+Below you can find interfaces for the Datasource Trigger Change:  
+
+```ts
+import { DatasourceTriggerConfig } from '@spryker/datasource.trigger';
+
+export interface ChangeDatasourceTriggerConfig extends DatasourceTriggerConfig {
+    minCharacters?: number;
+}
+
+export type ChangeDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+```

docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md

@@ -0,0 +1,84 @@
+---
+title: Datasource Trigger Input
+description: This document provides details about the Datasource Trigger Input service in the Components Library.
+template: concept-topic-template
+related:
+  - title: Datasource Dependable
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html
+  - title: Datasource Http
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html
+  - title: Datasource Inline Table
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html
+  - title: Datasource Inline
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html
+---
+
+This document explains the Datasource Trigger Input service in the Components Library.
+
+## Overview
+
+Datasource Trigger Input is an Angular Service that extracts the value from the event trigger element and checks whether it meets certain criteria. If the value is valid, it emits an object containing the value.  
+
+Check out an example usage of the Datasource Trigger Input.
+
+Service configuration:
+
+- `type` — a datasource type.  
+- `event` — an event type triggered by element.  
+- `debounce` - delays the emission of values the next datasource (default is `300ms`).  
+- `minCharacters` - emits the trigger element value if the length is greater than or equal to the `minCharacters` property (default is `2`).  
+- `datasource` — the next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html)).  
+
+```html
+<spy-select
+    [datasource]="{
+        type: 'trigger',
+        event: 'input',
+        debounce: 400,
+        minCharacters: 3,
+        datasource: {
+            type: 'http',
+            url: '/request-url',
+        },
+    }"
+>
+</spy-select>
+```
+
+## Service registration
+
+Register the service:
+
+```ts
+declare module '@spryker/datasource' {
+    interface DatasourceRegistry {
+        trigger: DatasourceTriggerService;
+    }
+}
+
+@NgModule({
+    imports: [
+        DatasourceModule.withDatasources({
+            trigger: DatasourceTriggerService,
+        }),
+        DatasourceTriggerModule.withEvents({
+            input: InputDatasourceTriggerService,
+        }),
+    ],
+})
+export class RootModule {}
+```
+
+## Interfaces
+
+Below you can find interfaces for the Datasource Trigger Input:  
+
+```ts
+import { DatasourceTriggerConfig } from '@spryker/datasource.trigger';
+
+export interface InputDatasourceTriggerConfig extends DatasourceTriggerConfig {
+    minCharacters?: number;
+}
+
+export type InputDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+```