From 490d42892a7418aa5a8a287dfe8efe0ab718c996 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Wed, 3 Apr 2024 14:41:54 +0300 Subject: [PATCH 01/11] fix(*): removing another topic that is not used --- en/components/general-licensing.md | 202 ----------------------------- 1 file changed, 202 deletions(-) delete mode 100644 en/components/general-licensing.md diff --git a/en/components/general-licensing.md b/en/components/general-licensing.md deleted file mode 100644 index 0c6c746d03..0000000000 --- a/en/components/general-licensing.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Angular Licensing | Dock Manager | Ignite UI for Angular | Infragistics -_description: Learn how to use Infragistics' Ignite UI for Angular licensed npm feed. -_keywords: npm package license, Ignite UI for Angular license feed, licensing -mentionedTypes: [] ---- - -# License FAQ and Installation - -## License Agreements in Ignite UI for Angular - -It is important to know all the [legal terms and conditions](https://www.infragistics.com/legal/license/igultimate-la) regarding the Ignite UI for Angular that you purchase and use. - -> We have updated our license terms and subscription model in second quarter of 2020. - -If your trial has ended or your subscription [has expired](http://www.infragistics.com/renewal), each developer on your team using Ignite UI will need to [purchase](https://www.infragistics.com/how-to-buy/product-pricing) a subscription. This will enable you to use our private npm feed hosted on for development. There you will find the latest versions of the Ignite UI for Angular packages. If you have a current subscription, you can use this private feed and you will have access to the full version of Ignite UI for Angular. - -For detailed explanation of the Ignite UI license agreement and terms of use, [click here](https://www.infragistics.com/legal/license/igultimate-la). - -Infragistics offers free, non-commercial, not-for-resale (NFR) licenses for the following: - -* If you are part of a developer program like the Microsoft MVP, Microsoft Regional Director, Google Developer Expert, etc. -* If you are a primary, secondary or university student, or an academic institution, or a professor. - -If you qualify for a free, non-commercial, NFR license or if you have any license questions, please [contact us](https://www.infragistics.com/about-us/contact-us). - -> Currently only the **igniteui-dockmanager** package is available in our private npm feed, but in the future we will add the other Ignite UI for Angular packages as well. - -## Ignite UI for Angular npm packages - Using the Private npm feed - -Npm is the most popular package manager and is also the default one for the runtime environment Node.js. It is highly adopted and is one of the fastest and easiest ways to manage the packages that you depend on in your project. For more information on how npm works, read the official [npm documentation](https://docs.npmjs.com/). - -Infragistics Ignite UI for Angular is available as npm packages and you can add them as dependencies to your project in a [few easy steps](./general-getting-started.md). Choosing this approach will not require configuring npm. By installing this package you will start using the **Ignite UI for Angular Trial version** of the product. - -> Currently only the [igniteui-dockmanager](https://www.npmjs.com/package/igniteui-dockmanager) npm package has a trial watermark, but in the future we will add it to the other Ignite UI for Angular packages as well. - -### How to setup your environment to use the private npm feed - -#### First you need to setup the private registry and to associate this registry with the Infragistics scope. - -This will allow you to seamlessly use a mix of packages from the public npm registry and the Infragistics private registry. You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile. - -> If your account is not licensed (you are still using a Trial account) the private package feed won't be accessible to you e.g. it will return 404 or 403 error message. **Only licensed accounts can access the packages.infragistics private feed.** - -### Now, to log in to our private feed using npm - -#### npm version 9+ - -Our private feed doesn't currently support login/adduser commands with npm v9, so we recommend the following steps instead to add the required auth fields to the config: - -```cmd -npm config set @infragistics:registry https://packages.infragistics.com/npm/js-licensed/ - -npm config set //packages.infragistics.com/npm/js-licensed/:username=YOUR_USERNAME - -npm config set //packages.infragistics.com/npm/js-licensed/:email=YOUR_IG_EMAIL - -npm config set //packages.infragistics.com/npm/js-licensed/:_auth=YOUR_IG_AUTH_TOKEN -``` - -You can generate [Access Token](#access-token-usage) through your Infragistics profile. - -This approach is applicable to all prior versions of `npm`. - -#### npm version up to v8 - -Run the `adduser` command and specify a user account and password: - -```cmd -npm adduser --registry=https://packages.infragistics.com/npm/js-licensed/ --scope=@infragistics -``` - -You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile. - -> `npm` is disallowing the use of the `"@"` symbol inside your username as it is considered as being "not safe for the net". Because your username is actually the email that you use for your Infragistics account it always contains the symbol `"@"`. That's why you must escape this limitation by replacing the `"@"` symbol with `"!!"` (two exclamation marks). For example, if your username is `"username@example.com"` when asked about your username you should provide the following input: `"username!!example.com"`. - -#### After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project: - -```cmd -npm uninstall igniteui-dockmanager -npm install @infragistics/igniteui-dockmanager - -npm uninstall igniteui-dockmanager -npm install @infragistics/igniteui-dockmanager -``` - -Have in mind that we have set the Ignite UI for Angular package to be scoped, meaning that no changing the registries is needed if you want to install packages from our private feed and from npmjs.org simultaneously. - -### Changes in your project source after license package update - -If you are upgrading from trial to licensed package the new packages will be scoped under `@infragistics`. -As a result you can either: - -* Do a global replace for all trial packages and change then to the licensed scoped version across all files in your project. For example, replace all `igniteui-dockmanager` references to `@infragicstics/igniteui-dockmanager` The change should affect all imports where such packages are used. - - **Or** - -* Add a **paths** mapping in the project **tsconfig.json**. - -```json -{ - /* ... */ - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - /* ... */ - "paths": { - "igniteui-dockmanager": ["./node_modules/@infragistics/igniteui-dockmanager"], - "igniteui-dockmanager/*": ["./node_modules/@infragistics/igniteui-dockmanager/*"], - } - } -} -``` - -* Change the themes imports like this: - -```ts -@import '~igniteui-dockmanager/dist/collection/styles/igc.themes'; - -// Should be changed to - -@import '~@infragistics/igniteui-dockmanager/dist/collection/styles/igc.themes'; -``` - -So, if you've already adopted npm and you have an Ignite UI for Angular license, don't hesitate setting up the Infragistics private feed and boost your productivity, using the full potential of Ignite UI for Angular. - -## Access Token Usage - -You can also authenticate to our private npm feed using an access token, which you can acquire through your [infragistics.com user account](https://account.infragistics.com/access-tokens). The access token authentication is the preferred alternative when you want to integrate a CI process in a publicly accessible repository, which uses the Ignite UI for Angular licensed packages. - -The following information is on how to setup authentication to our private npm registry using an access token in local configuration, Azure Pipelines build procedures and Travis CI build process: - -* Generate a token from https://account.infragistics.com/access-tokens - - - -> Each token is with Base64 encoding. - -* Add the following into your [.npmrc](https://docs.npmjs.com/configuring-npm/npmrc.html) file - -```cmd -@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/ -//packages.infragistics.com/npm/js-licensed/:_auth=YOUR_ACCESS_TOKEN -//packages.infragistics.com/npm/js-licensed/:username=YOUR_USERNAME -``` - -## Azure Pipelines Configuration - -Update the azure-pipelines.yml with the following steps: - -```cmd -steps: - -- script: npm config set @infragistics:registry $(npmRegistry) - displayName: 'Npm add registry' -- script: npm config set $(igScope):_auth=$(token) - displayName: 'Npm config auth' -``` - -Add **npm registry** and **token** variables. - - - - - -## Travis CI Configuration - -We will follow almost the same approach here. The only difference would be that the configuration will be set on [before_install](https://docs.travis-ci.com/user/job-lifecycle/#the-job-lifecycle) - -```cmd -before_install: -- echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc -- echo "//packages.infragistics.com/npm/js-licensed/:_auth=$TOKEN" >> ~/.npmrc -``` - -The best way to define an environment variable depends on what type of information it will contain. So [you have two options](https://docs.travis-ci.com/user/environment-variables/): - -* encrypt it and add it [to your .travis.yml](https://docs.travis-ci.com/user/environment-variables/#defining-encrypted-variables-in-travisyml) -* add it to your [Repository Settings](https://docs.travis-ci.com/user/environment-variables/#defining-variables-in-repository-settings) - -### GitHub Actions Configuration - -Add the following scripts before the **npm i(ci)** step to your [CI workflow configuration](https://help.github.com/en/actions/language-and-framework-guides/using-nodejs-with-github-actions): - -```cmd -- run: echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc -- run: echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc -``` - -Define [*secrets* (encrypted environment variables)](https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) and use them in the GitHub actions workflow for sensitive information like the access token. From c9e44b1bece15884cf6bfcb77fb39b4e95955aa9 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Thu, 22 Aug 2024 16:37:06 +0300 Subject: [PATCH 02/11] feat(list): restoring wrongly remove chat component sample --- en/components/list.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/en/components/list.md b/en/components/list.md index fce538f2db..faac35252a 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -591,6 +591,16 @@ public selectItem(item) {
+## Chat Component +The following sample demonstrates how to create a simple chat component using **IgxList**. + + + + +
+ ## Applying theme to the list component Let's see how we can change the background of our list. First we need to import index.scss in to our component .scss file. From 1e7b1da0bf6c3b163359a3e310b7d0fb5b0aa7fc Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 25 Sep 2024 18:09:14 +0300 Subject: [PATCH 03/11] refactor(badge): add --size clarification --- en/components/badge.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/en/components/badge.md b/en/components/badge.md index 319abcc343..ee15af22f8 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -118,6 +118,20 @@ We can change the badge shape through the `shape` attribute setting its value to If everything's done right, you should see the demo sample shown above in your browser. +### Badge Size + +The size of the badge can be controlled using the `--size` variable. It will make sure that the badge sizes proportionally in both directions. Keep in mind, however, that badges containing text values use the `caption` typography style for its font-size and line-height. For that reason, when setting the `--size` of a badge containing text to values below 16px, you will also need to modify its typography. + +Example: +```scss +igx-badge { + --size: 12px; + + font-size: calc(var(--size) / 2); + line-height: normal; +} +``` + ### Badge Icon In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](../components/material-icons-extended.md) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it: From 68346520b9123c5d28ec3b392101b6cad3de1d56 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Tue, 29 Oct 2024 11:29:35 +0200 Subject: [PATCH 04/11] docs(carousel): update topic with new properties --- en/components/carousel.md | 39 ++++++++++++--------------------------- 1 file changed, 12 insertions(+), 27 deletions(-) diff --git a/en/components/carousel.md b/en/components/carousel.md index b416e814b7..1168bb4715 100644 --- a/en/components/carousel.md +++ b/en/components/carousel.md @@ -121,19 +121,7 @@ export class HomeComponent { By default, the Carousel in Angular has its **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** input property set to `true` ( *looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action* ). The looping behavior can be disabled by setting the value of the `loop` input to `false`. -To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by adding an empty template. - -The carousel template may look like this: - -```html -
- - ... - - - -
-``` +To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by setting the `indicators` input property to `false`. ### Custom indicators
@@ -279,12 +267,13 @@ The carousel [animations](carousel.md#angular-carousel-animations) are fully sup ### Keyboard navigation
-* To navigate to the **next**/**previous** slide, you have to use, respectfully: - * `Arrow Right` key for the next slide - * `Arrow Left` key for the previous slide -* To navigate to the **end**/**start** slide you have to use, respectfully: - * `End` key for the end slide - * `Home` key for the start slide +* Navigation buttons + * `Space`/`Enter` key - navigates to the next/previous slide. +* Indicators + * `Arrow Left` key - navigates to the previous (next in Right-to-Left mode) slide. + * `Arrow Right` key - navigates to the next (previous in Right-to-Left mode) slide. + * `Home` key - navigates to the first (last in Right-to-Left mode) slide. + * `End` key - navigates to the last (first in Right-to-Left mode) slide. ### Automatic transitioning
@@ -312,14 +301,10 @@ Our carousel will look like this in the template: ```html ...
- -
- - - -
- - + + + +
... From 8c72f23a4b0bd9b06b97662e9b0b7ab9fd448e60 Mon Sep 17 00:00:00 2001 From: sivanova Date: Mon, 4 Nov 2024 16:23:04 +0200 Subject: [PATCH 05/11] docs(toast/snackbar): remove overlaySettings sections --- en/components/snackbar.md | 39 ++++++++++++++++++++------------------- en/components/toast.md | 29 +---------------------------- 2 files changed, 21 insertions(+), 47 deletions(-) diff --git a/en/components/snackbar.md b/en/components/snackbar.md index 387ceba8a0..16fa17728e 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -254,29 +254,30 @@ public restore() { iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4" > -### Overlay Settings -The [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) uses [Overlay Settings]({environment:angularApiUrl}/interfaces/overlaysettings.html) to control the position of its container. The default settings can be changed by defining Custom OverlaySettings and passing them to the snackbar `open()` method: +### Positioning +Use [`positionSettings`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#positionSettings) property to configure where the snackbar appears. By default, it is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position. -```typescript -public customSettings: OverlaySettings = { - positionStrategy: new GlobalPositionStrategy( - { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top - }), - modal: true, - closeOnOutsideClick: true, -}; - -snackbar.open(customSettings); +```html + +
+ + Notification displayed +
``` -Users can also provide a specific outlet where the snackbar will be placed in the DOM when it is visible: - -```html - -
+```typescript +// sample.component.ts +import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular'; +// import { VerticalAlignment, HorizontalAlignment } from '@infragistics/igniteui-angular'; for licensed package +... +public open(snackbar) { + snackbar.positionSettings.verticalDirection = VerticalAlignment.Top; + snackbar.positionSettings.horizontalDirection = HorizontalAlignment.Right; + snackbar.open(); +} +... ``` + ## Styling To get started with styling the snackbar, we need to import the index file, where all the theme functions and component mixins live: diff --git a/en/components/toast.md b/en/components/toast.md index a1fb181e6a..6b3c94eda7 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -110,9 +110,6 @@ public showMessage() { } ``` -> [!WARNING] -> The igx-toast component `show` and `hide` methods have been deprecated. `open` and `close` should be used instead. - ## Examples ### Hide/Auto Hide @@ -178,30 +175,6 @@ public open(toast) { iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5" > -### Overlay Settings -The [`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html) uses [Overlay Settings]({environment:angularApiUrl}/interfaces/overlaysettings.html) to control the position of its container. The default settings can be changed by defining Custom OverlaySettings and passing them to the toast `open()` method: - -```typescript -public customSettings: OverlaySettings = { - positionStrategy: new GlobalPositionStrategy( - { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top - }), - modal: true, - closeOnOutsideClick: true, -}; - -toast.open(customSettings); -``` - -Users can also provide a specific outlet where the toast will be placed in the DOM when it is visible: - -```html - -
-``` -
## Styling @@ -215,7 +188,7 @@ To get started with styling the toast, we need to import the index file, where a // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and accepts the `$shadow`, `$background`, `$text-color` and the `$border-radius` parameters. +Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and accepts the `$background`, `$text-color` and `$border-radius` parameters. ```scss $custom-toast-theme: toast-theme( From 387b20ecf03f5b1a1485ce1dd683be341a1b0601 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Mon, 4 Nov 2024 16:54:45 +0200 Subject: [PATCH 06/11] Update en/components/snackbar.md Co-authored-by: Riva Ivanova <49126110+RivaIvanova@users.noreply.github.com> --- en/components/snackbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/snackbar.md b/en/components/snackbar.md index 16fa17728e..e854fb5a1a 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -255,7 +255,7 @@ public restore() { ### Positioning -Use [`positionSettings`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#positionSettings) property to configure where the snackbar appears. By default, it is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position. +Use [`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#positionSettings) property to configure where the snackbar appears. By default, it is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position. ```html From 5b398dcd515c7e2f73454ab8e89d4c72536007fc Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Wed, 6 Nov 2024 15:12:18 +0200 Subject: [PATCH 07/11] docs(*): Update JA for #5983 --- jp/components/carousel.md | 39 ++++++++++++--------------------------- 1 file changed, 12 insertions(+), 27 deletions(-) diff --git a/jp/components/carousel.md b/jp/components/carousel.md index 028a55d180..4e08f374bd 100644 --- a/jp/components/carousel.md +++ b/jp/components/carousel.md @@ -122,19 +122,7 @@ export class HomeComponent { デフォルトでは、Angular のカルーセルの **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** 入力プロパティは `true` に設定されています (ループは、Next 動作でナビゲートするときに最初のスライドが最後のスライドの後に来るか、Previous 動作を使用して最後のスライドが最初のスライドの後に来るときに起こります)。ループ動作を無効にするには、`loop` 入力の値を `false` に設定します。 -各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの `bottom` に配置されるインジケーターがあります。この動作を変更するには、[indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) プロパティを使用して、`top` に割り当てる必要があります。空のテンプレートを追加すると、インジケーターを無効にできます。 - -カルーセル テンプレートは以下のようになります。 - -```html -
- - ... - - - -
-``` +各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの `bottom` に配置されるインジケーターがあります。この動作を変更するには、[indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) プロパティを使用して、`top` に割り当てる必要があります。インジケーターは、`indicators` 入力プロパティを `false` に設定することで無効にできます。 ### カスタム インジケーター
@@ -280,12 +268,13 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ ### キーボード ナビゲーション
-* **次へ**/**前へ**のスライドに移動するには、それぞれ以下を使用する必要があります。 - * `右矢印` キー - 次のスライド - * `左矢印` キー - 前のスライド -* **最後**/**最初**のスライドに移動するには、それぞれ以下を使用する必要があります。 - * `End` キー - 最後のスライド - * `Home` キー - 最初のスライド +* ナビゲーション ボタン + * `Space`/`Enter` キー - 次のスライド/前のスライドに移動します。 +* インジケーター + * `左矢印` キー - 前のスライド (右から左モードでは次) に移動します。 + * `右矢印` キー - 次のスライド (右から左モードでは前へ) に移動します。 + * `Home` キー - 最初のスライド (右から左モードでは最後) に移動します。 + * `End` キー - 最後のスライド (右から左モードでは最初) に移動します。 ### 自動的なトランジション
@@ -313,14 +302,10 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ ```html ...
- -
- - - -
- - + + + +
... From 2da760fcdef6b61642c5048c5704618b7092ecb6 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 12 Nov 2024 13:49:48 +0200 Subject: [PATCH 08/11] Update en/components/snackbar.md --- en/components/snackbar.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/en/components/snackbar.md b/en/components/snackbar.md index e854fb5a1a..d97a77aa8b 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -259,10 +259,8 @@ Use [`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponen ```html -
- - Notification displayed -
+ +Notification displayed ``` ```typescript From 90a087c853db3465fea2b6eb9e6928ddba92b310 Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Tue, 19 Nov 2024 14:21:20 +0200 Subject: [PATCH 09/11] docs(*): Updating Snackbar and Toast topics - #5990. --- jp/components/snackbar.md | 40 +++++++++++++++++++-------------------- jp/components/toast.md | 29 +--------------------------- 2 files changed, 20 insertions(+), 49 deletions(-) diff --git a/jp/components/snackbar.md b/jp/components/snackbar.md index 5420cb2d7a..a3d0021cc5 100644 --- a/jp/components/snackbar.md +++ b/jp/components/snackbar.md @@ -5,7 +5,7 @@ _keywords: Angular Snackbar コンポーネント, Angular Snackbar コントロ _language: ja --- # Angular Snackbar (スナックバー) コンポーネントの概要 -

Ignite UI for Angular Snackbar コンポーネントは、アクションを含むことができる単一行のメッセージで操作のフィードバックを提供します。SnackBar メッセージがその他の画面要素の上に表示され、画面の中央下に配置されます。

+

Ignite UI for Angular Snackbar コンポーネントは、アクションを含むことができる単一行のメッセージで操作のフィードバックを提供します。Snackbar メッセージがその他の画面要素の上に表示され、画面の中央下に配置されます。

## Angular Snackbar の例 @@ -255,31 +255,29 @@ public restore() { iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4" > -### オーバーレイ設定 -[`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) は、[オーバーレイ設定]({environment:angularApiUrl}/interfaces/overlaysettings.html)を使用してコンテナーの位置を制御します。デフォルト設定は、カスタム オーバーレイ設定を定義し、それらをスナックバーの `open()` メソッドに渡すことで変更できます。 +### 配置 +[`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#positionSettings) プロパティを使用すると、Snackbar の表示位置を構成します。デフォルトで、ページの下に表示されます。以下のサンプルで、通知が上位置に表示されます。 -```typescript -public customSettings: OverlaySettings = { - positionStrategy: new GlobalPositionStrategy( - { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top - }), - modal: true, - closeOnOutsideClick: true, -}; - -snackbar.open(customSettings); +```html + + +Notification displayed ``` -ユーザーは、スナックバーが表示されたときに DOM に配置される特定のアウトレットを提供することもできます。 - -```html - -
+```typescript +// sample.component.ts +import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular'; +// import { VerticalAlignment, HorizontalAlignment } from '@infragistics/igniteui-angular'; for licensed package +... +public open(snackbar) { + snackbar.positionSettings.verticalDirection = VerticalAlignment.Top; + snackbar.positionSettings.horizontalDirection = HorizontalAlignment.Right; + snackbar.open(); +} +... ``` -## スタイル設定 +## スタイル設定 スナックバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。 ```scss diff --git a/jp/components/toast.md b/jp/components/toast.md index aba997a849..3ecfffa0d7 100644 --- a/jp/components/toast.md +++ b/jp/components/toast.md @@ -111,9 +111,6 @@ public showMessage() { } ``` -> [!WARNING] -> igx-toast コンポーネントの `show` メソッドと `hide` メソッドは非推奨になりました。代わりに `open` と `close` を使用する必要があります。 - ## 例 ### 非表示/自動的に隠す @@ -179,30 +176,6 @@ public open(toast) { iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5" > -### オーバーレイ設定 -[`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html) は、[オーバーレイ設定]({environment:angularApiUrl}/interfaces/overlaysettings.html)を使用してコンテナーの位置を制御します。デフォルト設定は、カスタム オーバーレイ設定を定義し、それらをトーストの `open()` メソッドに渡すことで変更できます。 - -```typescript -public customSettings: OverlaySettings = { - positionStrategy: new GlobalPositionStrategy( - { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top - }), - modal: true, - closeOnOutsideClick: true, -}; - -toast.open(customSettings); -``` - -ユーザーは、トーストが表示されたときに DOM に配置される特定のアウトレットを提供することもできます。 - -```html - -
-``` -
## スタイル設定 @@ -216,7 +189,7 @@ Toast のスタイル設定を始めるには、すべてのテーマ関数と // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) を拡張する新しいテーマを作成し、`$shadow`、`$background`、`$text-color` と `$border-radius` パラメーターを受け取る方法です。 +最も簡単な方法は、[`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) を拡張する新しいテーマを作成し、`$background`、`$text-color` と `$border-radius` パラメーターを受け取る方法です。 ```scss $custom-toast-theme: toast-theme( From a45acf984d1c1ca372324160edab09ab4ee8beb8 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Tue, 26 Nov 2024 09:38:08 +0200 Subject: [PATCH 10/11] docs(combo): update single selection code snippet --- en/components/combo.md | 2 +- jp/components/combo.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/en/components/combo.md b/en/components/combo.md index 251b821a5a..4a10851ae4 100644 --- a/en/components/combo.md +++ b/en/components/combo.md @@ -231,7 +231,7 @@ By default, the combo control provides multiple selection. The snippet below dem ```typescript public singleSelection(event: IComboSelectionChangeEventArgs) { if (event.added.length) { - event.newSelection = event.added; + event.newValue = event.added; } } ``` diff --git a/jp/components/combo.md b/jp/components/combo.md index f69617a17c..f321f462ca 100644 --- a/jp/components/combo.md +++ b/jp/components/combo.md @@ -232,7 +232,7 @@ export class MyExampleCombo { ```typescript public singleSelection(event: IComboSelectionChangeEventArgs) { if (event.added.length) { - event.newSelection = event.added; + event.newValue = event.added; } } ``` From fffc53b18ccdf1eaf3ca9814957a6eb03eb9c5b7 Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Wed, 8 Jan 2025 02:05:36 +0200 Subject: [PATCH 11/11] Adding changes from build igniteui-xplat-docs-make-pr_2025.1.8.1 --- .../charts/features/chart-navigation.md | 2 +- en/components/dashboard-tile.md | 132 ++++++++++++++++++ en/components/general-changelog-dv.md | 14 ++ en/components/inputs/color-editor.md | 88 ++++++++++++ en/components/menus/toolbar.md | 35 +++++ en/images/color-editor.png | Bin 0 -> 17382 bytes en/images/dashboard-tile-toolbar.png | Bin 0 -> 23088 bytes 7 files changed, 270 insertions(+), 1 deletion(-) create mode 100644 en/components/dashboard-tile.md create mode 100644 en/components/inputs/color-editor.md create mode 100644 en/images/color-editor.png create mode 100644 en/images/dashboard-tile-toolbar.png diff --git a/en/components/charts/features/chart-navigation.md b/en/components/charts/features/chart-navigation.md index 3144397849..61d4bf560f 100644 --- a/en/components/charts/features/chart-navigation.md +++ b/en/components/charts/features/chart-navigation.md @@ -27,7 +27,7 @@ Like this sample? Get access to our complete Angular toolkit and start building ## Chart Navigation with User Interactions -Zooming is on by default on the chart. In order to disable navigation in the UI, you need to set either the [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) and/or the [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) properties of the chart to false, depending on the direction that you wish to disable zooming. +Whether or not zooming is on by default depends on the chart you are using. If you are using [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), it is on by default, but it is not in the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). In order to enable or disable navigation in the UI, you need to set either the [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) and/or the [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) properties of the chart, depending on the direction that you wish to enable or disable zooming. It is also possible to zoom or pan simply by clicking the mouse or using touch. The [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property can also be set to either `DragPan` to allow panning or `None` to prevent these operations. diff --git a/en/components/dashboard-tile.md b/en/components/dashboard-tile.md new file mode 100644 index 0000000000..b2c130099a --- /dev/null +++ b/en/components/dashboard-tile.md @@ -0,0 +1,132 @@ +--- +title: Angular Dashboard Tile Component | Ignite UI for Angular +_description: See how you can easily get started with Angular Dashboard Tile Component. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Dashboard components, Angular Dashboard Tile controls +mentionedTypes: ["Toolbar", "CategoryChart", "XamDataChart", "XamRadialGauge", "XamLinearGauge", "XamGeographicMap"] +--- + +# Angular Dashboard Tile Overview + +The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) that let you alter the visualization that is presented in a variety of ways. + +A wide variety of visualizations may be selected for display depending on the shape of the provided data including, but not limited to: Category Charts, Radial and Polar Charts, Scatter Charts, Geographic Maps, Radial and Linear Gauges, Financial Charts and Stacked Charts. + +Interacting with the chart type menu in the toolbar will allow for selecting a different visualization among the list of likely candidates. + +## Angular Dashboard Tile Example + + + + + + + +## Dependencies + + + +Install the following packages in the Ignite UI for Angular toolset: + +```cmd +npm install igniteui-angular-charts +npm install igniteui-angular-core +npm install igniteui-angular-dashboards +npm install igniteui-angular-gauges +npm install igniteui-angular-grids +npm install igniteui-angular-inputs +npm install igniteui-angular-layouts +npm install igniteui-angular-maps +``` + +The following modules are suggested when using the Dashboard Tile component: + +```ts +import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule, + IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule, + IgxPieChartDashboardTileModule } from "igniteui-angular-dashboards"; + +@NgModule({ + imports: [ + IgxDataChartDashboardTileModule, + IgxRadialGaugeDashboardTileModule, + IgxLinearGaugeDashboardTileModule, + IgxGeographicMapDashboardTileModule, + IgxPieChartDashboardTileModule, + IgxDashboardTileModule + ] +}) +export class AppModule {} +``` + + + +## Usage + +Depending on what you bind the Dashboard Tile's `DataSource` property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for Angular toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following: + +* [IgxCategoryChart](charts/chart-overview.md) +* [IgxDataChart](charts/chart-overview.md) +* [IgxDataPieChart](charts/types/data-pie-chart.md) +* [IgxGeographicMap](geo-map.md) +* [IgxLinear Gauge](linear-gauge.md) +* [IgxRadialGauge](radial-gauge.md) + +The data visualization that is chosen by default is mainly dependent on the schema and the count of the `DataSource` that you have bound. For example, if you bind a single numeric value, you will get a [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html), but if you bind a collection of value-label pairs that are easy to distinguish from each other, you will likely get a `XamDataPieChart`. If you bind an `DataSource` that has more value paths, you will receive a [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with multiple column series or line series, depending mainly on the count of the collection bound. You can also bind to a `ShapeDataSource` or data the appears to contain geographic points to receive a [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html). + +You are not locked into a single visualization when you bind the `DataSource`, and you can tell the control that you want to see a particular visualization by setting its `VisualizationType` property. For example, if you specifically wanted to see a line chart, you could define the Dashboard Tile like so: + + + + + + + +The visualization or properties of the visualization are also configurable using the [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) at the top of the control. This [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: + + + +From left to right: + +* The first tool will show a data grid with the `DataSource` provided to the control. This is a toggle tool, so if you click it again after showing the grid, it will revert to the visualization. +* The second tool allows you to configure the settings of the current data visualization. +* The third tool allows you to change the current visualization, allowing you to plot a different series type or show a different type of visualization altogether. This can be set on the control by setting the `VisualizationType` property, mentioned above. +* The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) or [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) collection on the control. + +This demo demonstrates dashboard tile integration with the Angular Pie Chart. The toolbar options at the top right provides access to styling and changing the data visualization. + + + + + +This demo demonstrates dashboard tile integration with the Angular Geographic Map. The toolbar options at the top right provides access to styling and changing the data visualization. + + + + + +## API References + +* [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) +* [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +* [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) +* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +* [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) +* [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) + +## Additional Resources + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/general-changelog-dv.md b/en/components/general-changelog-dv.md index cece5d69cb..b6ecc87f50 100644 --- a/en/components/general-changelog-dv.md +++ b/en/components/general-changelog-dv.md @@ -16,6 +16,20 @@ All notable changes for each version of Ignite UI for Angular are documented on * [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master) +## **18.2.0 (December 2024)** + +### igniteui-angular-charts (Charts) + +DashboardTile (Beta) + +* New [Dashboard Tile](dashboard-tile.md) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](menus/toolbar.md) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code. + +### igniteui-angular-charts (Inputs) + +* New ColorEditor (Beta) & Toolbar ToolAction (Beta) + +This new [Color Editor](inputs/color-editor.md) can be used as a standalone color picker and is now integrated into the [Toolbar](menus/toolbar.md) component to update visualizations at runtime. + ## **18.1.0 (September 2024)** * [Data Pie Chart](charts/types/data-pie-chart.md) - The [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) is a new component that renders a pie chart. This component works similarly to the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component. diff --git a/en/components/inputs/color-editor.md b/en/components/inputs/color-editor.md new file mode 100644 index 0000000000..af96b21d09 --- /dev/null +++ b/en/components/inputs/color-editor.md @@ -0,0 +1,88 @@ +--- +title: Angular Color Editor | Color Editor | Infragistics +_description: Color Editor component provides an easily configurable option to change colors for any desirable component or aspect of your application. +_keywords: Angular Color Editor, Ignite UI for Angular, Infragistics +mentionedTypes: ["ColorEditor"] +namespace: Infragistics.Controls +--- + +# Angular Color Editor Overview (preview) + +The Ignite UI for Angular Color Editor is a lightweight color picker component. The Color Editor can pop open by clicking the brush icon. Both the rgba and hex values can be obtained from the desired color along the bottom. These values will update when the three sliders are modified. The center box is designed for adjusting the saturation and brightness along with two adjacent sliders for adjusting the rgb and luminance values. Rgb registers between (1-255). The lightness registers between(0-1). + +## Angular Color Editor Example + + + + + +
+ +## Dependencies + + + +First, you need to install the Ignite UI for Angular by running the following command: + +```cmd +npm install igniteui-angular-core +npm install igniteui-angular-inputs +``` + +Before using the `ColorEditor`, you need to register the following modules as follows: + + + +## Usage + +The simplest way to start using the `ColorEditor` is as follows: + + + +```html + + + +``` + + + +## Binding to events + +The Color Editor component raises the following events: + +* valueChanged +* valueChanging + + + +```ts +@ViewChild("colorEditor", { static: true } ) +private colorEditor: IgxColorEditorComponent +public ngAfterViewInit(): void +{ + this.colorEditor.valueChanged.subscribe(this.onValueChanged); +} + +public onValueChanged = (e: any) => { + console.log("test"); +} +``` + + + +
+ +## API References + +* `ColorEditor` + +## Additional Resources + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/menus/toolbar.md b/en/components/menus/toolbar.md index 9e3d1adbba..5d6c99dbcf 100644 --- a/en/components/menus/toolbar.md +++ b/en/components/menus/toolbar.md @@ -194,6 +194,41 @@ The following example demonstrates the vertical orientation of the Angular Toolb +### Color Editor + +You can add a custom color editor tool to the the Angular Toolbar, which will also work with the Command event to perform custom styling to your application. + +```html + + + + +``` + +```ts + + + + +``` + +The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool. + + +