diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index b18fb053f3..6c2b4fa610 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -16,15 +16,16 @@ jobs: strategy: matrix: - node-version: [16.x, 18.x] + node-version: [20.x, 22.x] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} - run: npm ci - run: dotnet tool restore + - run: npm run verify - run: npm run build-gh-actions \ No newline at end of file diff --git a/.markdownlint-README.md b/.markdownlint-README.md new file mode 100644 index 0000000000..8db1b5e1f8 --- /dev/null +++ b/.markdownlint-README.md @@ -0,0 +1,120 @@ +# Markdown Linting Configuration + +## Overview +This directory contains markdown linting configuration for the Ignite UI for Angular documentation. + +## Rules Configuration + +The `.markdownlint.json` file configures markdown-lint with relaxed rules suitable for technical documentation: + +### Enabled Rules +- **MD001**: Heading levels should only increment by one level at a time +- **MD003**: Heading style (ATX style with #) +- **MD004**: Unordered list style (dash) +- **MD007**: Unordered list indentation (2 spaces) +- **MD009**: Trailing spaces (allow 2 for line breaks) +- **MD010**: Hard tabs +- **MD012**: Multiple consecutive blank lines (max 2) +- **MD014**: Dollar signs used before commands without showing output +- **MD018**: No space after hash on atx style heading +- **MD019**: Multiple spaces after hash on atx style heading +- **MD022**: Headings should be surrounded by blank lines +- **MD023**: Headings must start at the beginning of the line +- **MD024**: Multiple headings with the same content (siblings only) +- **MD025**: Multiple top-level headings in the same document +- **MD026**: Trailing punctuation in heading +- **MD027**: Multiple spaces after blockquote symbol +- **MD028**: Blank line inside blockquote +- **MD029**: Ordered list item prefix (ordered style) +- **MD030**: Spaces after list markers +- **MD031**: Fenced code blocks should be surrounded by blank lines +- **MD032**: Lists should be surrounded by blank lines +- **MD035**: Horizontal rule style (---) +- **MD037**: Spaces inside emphasis markers +- **MD038**: Spaces inside code span elements +- **MD039**: Spaces inside link text +- **MD042**: No empty links +- **MD045**: Images should have alternate text (alt text) +- **MD046**: Code block style (fenced) +- **MD047**: Files should end with a single newline character +- **MD048**: Code fence style (backtick) +- **MD049**: Emphasis style (underscore) +- **MD050**: Strong style (asterisk) + +### Disabled Rules +- **MD013**: Line length (disabled for technical docs with long URLs/code) +- **MD033**: Inline HTML (allowed for component demos) +- **MD034**: Bare URLs (allowed as we use many reference links) +- **MD036**: Emphasis used instead of heading (allowed for styling) +- **MD040**: Fenced code blocks should have a language specified (would be noisy) +- **MD041**: First line in a file should be a top-level heading (not always applicable) +- **MD043**: Required heading structure (too restrictive) +- **MD044**: Proper names should have the correct capitalization (would require extensive config) + +## Usage + +### Run linting on all component docs +```bash +npx markdownlint "en/components/**/*.md" +``` + +### Run linting on specific file +```bash +npx markdownlint en/components/grid/grid.md +``` + +### Fix auto-fixable issues +```bash +npx markdownlint --fix "en/components/**/*.md" +``` + +### Run with custom config +```bash +npx markdownlint --config .markdownlint.json "en/components/**/*.md" +``` + +## Common Issues and Fixes + +### MD001 - Heading increment +**Issue**: Jumping from `##` to `####` +**Fix**: Use `###` instead + +### MD009 - Trailing spaces +**Issue**: Unnecessary trailing spaces at end of line +**Fix**: Remove trailing spaces (except when intentional for line breaks) + +### MD022 - Headings surrounded by blank lines +**Issue**: No blank line before/after heading +**Fix**: Add blank lines around headings + +### MD031 - Code blocks surrounded by blank lines +**Issue**: No blank line before/after code fence +**Fix**: Add blank lines around code blocks + +### MD047 - File should end with newline +**Issue**: No newline at end of file +**Fix**: Add single newline at end of file + +## Integration with CI/CD + +Add to package.json scripts: +```json +{ + "scripts": { + "lint:md": "markdownlint 'en/components/**/*.md'", + "lint:md:fix": "markdownlint --fix 'en/components/**/*.md'" + } +} +``` + +## VS Code Integration + +Install the "markdownlint" extension by David Anson for real-time linting in VS Code: +- Extension ID: `DavidAnson.vscode-markdownlint` +- The `.markdownlint.json` file will be automatically detected + +## Related Tools + +- **cspell**: Spell checking (configured in `cspell.json`) +- **prettier**: Code formatting (if configured) +- **remark-lint**: Alternative markdown linter with different rule set diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000000..6e11c1a77b --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,44 @@ +{ + "default": true, + "MD001": true, + "MD003": { "style": "atx" }, + "MD004": { "style": "dash" }, + "MD007": { "indent": 2 }, + "MD009": { "br_spaces": 2 }, + "MD010": true, + "MD012": { "maximum": 2 }, + "MD013": false, + "MD014": true, + "MD018": true, + "MD019": true, + "MD022": true, + "MD023": true, + "MD024": { "siblings_only": true }, + "MD025": { "front_matter_title": "" }, + "MD026": { "punctuation": ".,;:" }, + "MD027": true, + "MD028": true, + "MD029": { "style": "ordered" }, + "MD030": true, + "MD031": true, + "MD032": true, + "MD033": false, + "MD034": false, + "MD035": { "style": "---" }, + "MD036": false, + "MD037": true, + "MD038": true, + "MD039": true, + "MD040": false, + "MD041": false, + "MD042": true, + "MD043": false, + "MD044": false, + "MD045": true, + "MD046": { "style": "fenced" }, + "MD047": true, + "MD048": { "style": "backtick" }, + "MD049": { "style": "underscore" }, + "MD050": { "style": "asterisk" }, + "MD055": { "style": "leading_and_trailing" } +} diff --git a/cspell.json b/cspell.json new file mode 100644 index 0000000000..5a85b6ee41 --- /dev/null +++ b/cspell.json @@ -0,0 +1,241 @@ +{ + "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json", + "version": "0.2", + "language": "en", + "useGitignore": true, + "ignorePaths": [ + "**/bin/**", + "**/obj/**", + "**/node_modules/**", + "**/dist/**", + "**/.git/**", + "**/*.svg", + "**/*.png", + "**/*.jpg", + "en/components/geo-map-resources-world-locations.md" + ], + "dictionaries": ["softwareTerms", "typescript", "node", "en_US"], + "enableFiletypes": ["markdown"], + "overrides": [ + { + "filename": "**/*.md", + "caseSensitive": false, + "language": "en", + "ignoreRegExpList": [ + "/https?:\\/\\/[^\\s)]+/", + "/`[^`]*`/", + "/```[\\s\\S]*?```/", + "/~~~[\\s\\S]*?~~~/" + ] + } + ], + "words": [ + "IgniteUI", + "Ignite", + "DocFX", + "Infragistics", + "infragistics", + "StackBlitz", + "NuGet", + "Igx", + "IgxAccordion", + "IgxAction", + "IgxAutocomplete", + "IgxAvatar", + "IgxBadge", + "IgxBanner", + "IgxButton", + "IgxCalendar", + "IgxCard", + "IgxCarousel", + "IgxCheckbox", + "IgxChip", + "IgxCombo", + "IgxDate", + "IgxDialog", + "IgxDivider", + "IgxDock", + "IgxDrop", + "IgxExcel", + "IgxExpansion", + "IgxForOf", + "IgxGrid", + "IgxHierarchicalGrid", + "IgxIcon", + "IgxInput", + "IgxLabel", + "IgxLayout", + "IgxLinear", + "IgxList", + "IgxMask", + "IgxNavbar", + "IgxNavDrawer", + "IgxOverlay", + "IgxPaginator", + "IgxPie", + "IgxQueryBuilder", + "IgxRadio", + "IgxRating", + "IgxRipple", + "IgxSelect", + "IgxSimple", + "IgxSlider", + "IgxSnackbar", + "IgxSparkline", + "IgxSplitter", + "IgxSpreadsheet", + "IgxStepper", + "IgxSwitch", + "IgxTab", + "IgxTabs", + "IgxText", + "IgxTheme", + "IgxTile", + "IgxTime", + "IgxToast", + "IgxToggle", + "IgxTooltip", + "IgxTransaction", + "IgxTree", + "IgxTreeGrid", + "GeoMap", + "OpenStreetMap", + "OSM", + "BingMaps", + "ESRI", + "ArcGIS", + "arcgisonline", + "bingmapsportal", + "basemap", + "Polyline", + "Polylines", + "Polygons", + "PolylineShape", + "PolylineSeries", + "PolylineFragment", + "PolylineStyle", + "PolylineObjects", + "PolylinePaths", + "shapefile", + "shapefiles", + "Shapefile", + "Shapefiles", + "workbooks", + "workbook", + "workheets", + "workitems", + "workitem", + "workgroup", + "workbook's", + "ColorScale", + "Stackblitz", + "NavDrawer", + "datepicker", + "datepicker's", + "autocomplete", + "materialicons", + "webfont", + "transpiled", + "async", + "readonly", + "Treemap", + "backcolor", + "gridlines", + "trendlines", + "crosshairs", + "tickmarks", + "flexbox", + "Blazor", + "WCAG", + "ZHHANS", + "ZHHANT", + "Consolas", + "codesandbox", + "treeshaken", + "Configurator", + "configurator", + "Autosizing", + "groupable", + "groupby", + "hgrid", + "childdatakey", + "primaryforeignkey", + "noscroll", + "zoomable", + "lazyload", + "fontset", + "Tabbar", + "tabbar", + "monthpicker", + "timepicker", + "zoomslider", + "sparkline", + "sparklines", + "Sparkline", + "Northwind", + "changei18n", + "Titillium", + "finjs", + "trendline", + "Treemaps", + "treemaps", + "OHLC", + "toggleable", + "templatable", + "fintech", + "daterangepicker", + "DateRangePicker", + "ungroup", + "ungroups", + "ungrouping", + "lastname", + "firstname", + "interactable", + "gifs", + "Gantt", + "gantt", + "virtualizes", + "retemplate", + "retemplated", + "Geospatial", + "COUNTIF", + "SUMIF", + "AVERAGEIF", + "Contentful", + "wrappanel", + "stackpanel", + "Squarified", + "squarified", + "ngswitch", + "ngSwitch", + "navigations", + "Grayscale", + "appbuilder", + "AppBuilder", + "Zoombar", + "webcomponents", + "unfocusable", + "unclickable", + "toolsets", + "SignalR", + "signalr", + "retheming", + "multiview", + "gridline", + "choropleth", + "Bollinger", + "artboard", + "antumbra", + "NOAA", + "coalescences", + "Lambo", + "valuekey", + "CSISS", + "NORTAD", + "Cruzin", + "INPC", + "batchediting", + "updateparameters", + "alldata" + ] +} diff --git a/en/components/accordion.md b/en/components/accordion.md index cb4f8da542..3d0215942e 100644 --- a/en/components/accordion.md +++ b/en/components/accordion.md @@ -6,19 +6,20 @@ _keywords: angular accordion, angular accordion component, angular accordion exa # Angular Accordion Component Overview -## What is Angular Accordion? +## What is Angular Accordion? -The Angular Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state. +The Angular Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state. -Users are enabled to interact and navigate among a list of items, such as thumbnails or labels. Each one of those items can be toggled (expanded or collapsed) in order to reveal the containing information. Depending on the configuration, there can be a single or multiple expanded items at a time. +Users are enabled to interact and navigate among a list of items, such as thumbnails or labels. Each one of those items can be toggled (expanded or collapsed) in order to reveal the containing information. Depending on the configuration, there can be a single or multiple expanded items at a time. ## Angular Accordion Example -The following is a basic Angular Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time. + +The following is a basic Angular Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time. In it, you can see how to define an `igx-accrodion` and its [expansion panels]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html). The sample also demonstrates the two types of expansion behavior. The switch button sets the [singleBranchExpand]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#singleBranchExpand) property to toggle between single and multiple branches to be expanded at a time. - @@ -31,9 +32,10 @@ To get started with the Ignite UI for Angular Accordion component, first you nee ```cmd ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. -The next step is to import the `IgxAccordionModule` in your **app.module.ts** file. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxAccordionModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -86,7 +88,7 @@ Now that you have the Ignite UI for Angular Accordion module or directives impor ## Using the Angular Accordion Component Each section in the [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) is defined using an [expansion panel]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html). -Panels provide [disabled]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#disabled), [collapsed]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#collapsed) and [animationSettings]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#animationSettings) properties, which give you the ability to configure the states of the panel as per your requirement. +Panels provide [disabled]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#disabled), [collapsed]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#collapsed) and [animationSettings]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#animationSettings) properties, which give you the ability to configure the states of the panel as per your requirement. ### Declaring an accordion @@ -124,9 +126,9 @@ this.accordion.panels; As demonstrated above, the [singleBranchExpand]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#singleBranchExpand) property gives you the ability to set whether single or multiple panels can be expanded at a time. -### Angular Accordion Animations +### Angular Accordion Animations -Angular Accordion supports animations for both expanding and collapsing actions of the panels. Animation behavior can be customized. Normally, animations can be set for each expansion panel individually. However, it could also be applied to all panels at once on [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) level. This gives users the ability to disable animations for all sections at once via the animations property of the [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html). +Angular Accordion supports animations for both expanding and collapsing actions of the panels. Animation behavior can be customized. Normally, animations can be set for each expansion panel individually. However, it could also be applied to all panels at once on [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) level. This gives users the ability to disable animations for all sections at once via the animations property of the [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html). With regards to animation, you have two options. First, you could set the `animationSettings` property on the accordion component: @@ -192,23 +194,26 @@ Alternatively, you have the ability to set every single [expansion panel]({envir ``` + Using the [collapseAll]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#collapseAll) and [expandAll]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#expandAll) methods you can respectively collapse and expand all [IgxExpansionPanels]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) of the [IgxAccordion]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) programmatically. >[!NOTE] -> If [singleBranchExpand]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#singleBranchExpand) property is set to *true* calling [expandAll]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#expandAll) method would expand only the last [panel]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html). +> If [singleBranchExpand]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#singleBranchExpand) property is set to _true_ calling [expandAll]({environment:angularApiUrl}/classes/igxaccordioncomponent.html#expandAll) method would expand only the last [panel]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html). ### Angular Accordion Templating Example -With the Angular [Accordion component]({environment:angularApiUrl}/classes/igxaccordioncomponent.html), you can customize the header and content panel`s appearance. + +With the Angular [Accordion component]({environment:angularApiUrl}/classes/igxaccordioncomponent.html), you can customize the header and content panel`s appearance. The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the [IgxExpansionPanel]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html). - +
### Nested Angular Accordions Scenario + In the following Angular accordion example, we are going to create a complex FAQ section in order to illustrate how you can go about this common application scenario. In the sample nested [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) is achieved by adding an [accordion]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) inside the body of an [expansion panel]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html). ```html @@ -237,29 +242,30 @@ In the following Angular accordion example, we are going to create a complex FAQ You can see the result below. -
## Keyboard Navigation + Keyboard navigation in the Ignite UI for Angular Accordion provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the panels. The [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) navigation is compliant with W3C accessibility standards and convenient to use. **Key Combinations** - - Tab - moves the focus to the first(if the focus is before accordion)/next panel - - Shift + Tab - moves the focus to the last(if the focus is after accordion)/previous panel - - Arrow Down - moves the focus to the panel below - - Arrow Up - moves the focus to the panel above - - Alt + Arrow Down - expands the focused panel in the accordion - - Alt + Arrow Up - collapses the focused panel in the accordion - - Shift + Alt + Arrow Down - expands all enabled panels(if singleBranchExpand is set to true expands the last enabled panel) - - Shift + Alt + Arrow Up - collapses all enabled panels - - Home - navigates to the FIRST enabled panel in the accordion - - End - navigates to the LAST enabled panel in the accordion +- Tab - moves the focus to the first(if the focus is before accordion)/next panel +- Shift + Tab - moves the focus to the last(if the focus is after accordion)/previous panel +- Arrow Down - moves the focus to the panel below +- Arrow Up - moves the focus to the panel above +- Alt + Arrow Down - expands the focused panel in the accordion +- Alt + Arrow Up - collapses the focused panel in the accordion +- Shift + Alt + Arrow Down - expands all enabled panels(if singleBranchExpand is set to true expands the last enabled panel) +- Shift + Alt + Arrow Up - collapses all enabled panels +- Home - navigates to the FIRST enabled panel in the accordion +- End - navigates to the LAST enabled panel in the accordion ## Styling @@ -273,7 +279,7 @@ In order to take advantage of the functions exposed by the theming engine, we ha // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`expansion-panel-theme`]({environment:sassApiUrl}/themes#function-expansion-panel-theme) and accepts a `$header-background`, `$body-color` and `$expanded-margin` parameters. The theme automatically assigns foreground colors, either black or white, based on which provides better contrast with the specified backgrounds. @@ -286,27 +292,30 @@ $custom-panel-theme: expansion-panel-theme( ``` The last step is to include the component's theme. + ```scss @include css-vars($custom-panel-theme); ``` ### Demo - ## API Reference -* [IgxAccordion API]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) -* [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) -* [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html) -* [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html) -* [IgxExpansionPanel Styles]({environment:sassApiUrl}/themes#mixin-igx-expansion-panel) + +- [IgxAccordion API]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) +- [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) +- [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html) +- [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html) +- [IgxExpansionPanel Styles]({environment:sassApiUrl}/themes#mixin-igx-expansion-panel) ## Additional Resources + Our community is active and always welcoming new ideas. -* [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) +- [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/action-strip.md b/en/components/action-strip.md index cc979b4233..91c97c3ee5 100644 --- a/en/components/action-strip.md +++ b/en/components/action-strip.md @@ -12,8 +12,8 @@ The Ignite UI for Angular Action Strip component provides an overlay area contai ## Angular Action Strip Example - @@ -27,7 +27,7 @@ To get started with the Ignite UI for Angular Action Strip component, first you ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxActionStripModule` in your **app.module.ts** file. @@ -112,8 +112,8 @@ For scenarios where more than three action items will be shown, it is best to us ``` - @@ -147,17 +147,16 @@ This can be utilized via grid action components and we are providing two default > [!NOTE] > These components inherit [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. - > [!NOTE] > When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. - > [!NOTE] -> More information about how to use ActionStrip in the grid component could be found [here](/components/grid/row-actions.html). +> More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](/components/grid/row-actions.html). ## Styling @@ -186,9 +185,9 @@ The last step is to include the newly created component theme in our application @include css-vars($custom-strip); ``` - @@ -196,32 +195,32 @@ The last step is to include the newly created component theme in our application For more detailed information regarding the Action Strip API, refer to the following links: -* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html) +- [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html) The following built-in CSS styles helped us achieve this Action Strip layout: -* [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/themes#function-action-strip-theme) +- [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/themes#function-action-strip-theme) Additional components and/or directives that can be used within the Action Strip: -* [`IgxGridActionsBaseDirective `]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) -* [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) -* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) -* [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html) +- [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) +- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) +- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) +- [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
## Theming Dependencies -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. -* [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) +- [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/angular-reactive-form-validation.md b/en/components/angular-reactive-form-validation.md index 51563b6d44..62a83839cf 100644 --- a/en/components/angular-reactive-form-validation.md +++ b/en/components/angular-reactive-form-validation.md @@ -4,13 +4,13 @@ _description: Angular form validation is a process of verifying if inputs entere _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 Combo components, Angular Reactive Forms, Angular Forms --- -# Angular reactive form validation  +# Angular reactive form validation ## What are reactive forms in Angular? -Reactive forms in Angular provide a direct access to the underlying form object model, offering an immutable and explicit approach to handling form inputs. As the values of those inputs change in time, the state of the form is managed by reactive forms, relying on fixed or inflexible methods.  +Reactive forms in Angular provide a direct access to the underlying form object model, offering an immutable and explicit approach to handling form inputs. As the values of those inputs change in time, the state of the form is managed by reactive forms, relying on fixed or inflexible methods. -Which means that, each time a change is triggered to the data model, the so-called observable operators return a new data model, instead of updating the already existing one again and again. And that keeps the state of a form clean.  +Which means that, each time a change is triggered to the data model, the so-called observable operators return a new data model, instead of updating the already existing one again and again. And that keeps the state of a form clean. Angular reactive forms are considered extremely scalable, reusable, and robust due to their: @@ -31,20 +31,23 @@ Reactive forms are built around observable streams which track every unique chan The data flow in Angular reactive forms is well-structured because the form logic is led by the component class. This enables you to add validator functions directly to the FormControl instance in the component class. Whenever a change occurs, Angular calls these functions. -## What is angular form validation?  -Angular form validation is an integral technical process that verifies if any input provided by a user into a web-form is correct and complete. You can manage validation in a template-driven approach or with Angular reactive forms. Based on what is entered, the form will either allow users to proceed or will display a specific error message to help the user know where they went wrong with their data input.  +## What is angular form validation? + +Angular form validation is an integral technical process that verifies if any input provided by a user into a web-form is correct and complete. You can manage validation in a template-driven approach or with Angular reactive forms. Based on what is entered, the form will either allow users to proceed or will display a specific error message to help the user know where they went wrong with their data input. Depending on which validator failed, the on-screen error message gives feedback, indicating what is wrong and what exactly needs to be filled in or re-entered as data. In general, apps use forms to allow users to perform data-entry tasks like signing up, logging in, updating online profiles, submitting sensitive information, and more.   Angular runs form validation every time the value of a form input is changed and to confirm if data inputs filled in a web-form by a user are accurate and complete. To do that properly, Angular calls a list of validators which are run on every change that occurs.   Validation of user-input from the UI can be done either with template-driven forms or with Angular reactive forms. Both of these forms are built on the following base classes: -* FormControl -* FormGroup -* FormArray   -* ControlValueAccessor + +- FormControl +- FormGroup +- FormArray   +- ControlValueAccessor ## Angular reactive form validation + Reactive forms deliver a model-driven approach to managing form inputs, the values of which change with respect to time. Because reactive forms are built on a component class, Angular reactive form validation happens by adding validator functions directly to the form control model in the component class.   When the value is valid, validators return `null`. If the value is invalid, validators generate a set of errors, and you can display a specific error message on the screen. @@ -52,6 +55,7 @@ When the value is valid, validators return `null`. If the value is invalid, There are built-in validators such as `required`, `minlength`, `maxlength` etc. However, you can also create your own validators. A simple custom reactive form validator can look like this: + ```typescript import { Directive, OnInit } from '@angular/core'; import { Validator, NG_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms'; @@ -77,6 +81,7 @@ export class DateValueValidatorDirective implements Validator { ``` Also a validator can be asynchronous: + ```typescript import { Directive, OnInit } from '@angular/core'; import { AsyncValidator, NG_ASYNC_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms'; @@ -103,6 +108,7 @@ export class DateValueAsyncValidatorDirective implements AsyncValidator { ``` ## Angular Reactive form validation example + Let’s see how you can set up reactive form validation in practice with this Angular form validation example. It is a quick demo of a pretty standard booking form for a movie. It shows what happens if one or several of the form inputs are incomplete and you can see how the specific error message is visualized. @@ -120,9 +126,11 @@ So, if you enter values for movie title, full name, phone, and email, they will
## Angular form group validation -Form groups are basically a group of multiple related `FormControlls` that enable you to access the state of the encapsulated controls. Angular from group validation helps you track the value of group controls or a form as well as to track validation of the state of the form control. `FormGroup` is used with `FormControl`.  + +Form groups are basically a group of multiple related `FormControlls` that enable you to access the state of the encapsulated controls. Angular from group validation helps you track the value of group controls or a form as well as to track validation of the state of the form control. `FormGroup` is used with `FormControl`. ## Why would you need Angular form custom validation? + With custom validators you can address different functionality and ensure the values in a form meet certain criteria, which sometimes isn’t possible to do when using built-in validators only. If you want to validate a phone number or a specific password pattern, it’s best to create custom validator and rely on Angular form custom validation. With reactive forms, generating such is just as easy as writing a new function. And for model-driven forms (such is the reactive form in Angular) we create custom validation functions and send them to the `FormControl` constructor. @@ -168,16 +176,18 @@ export class MyComponent implements OnInit { ``` ## Additional Resources +
Related topics: -* [Combo](combo.md) -* [Select](select.md) -* [Input Group](input-group.md) -* [Date Picker](date-picker.md) -* [Time Picker](time-picker.md) + +- [Combo](combo.md) +- [Select](select.md) +- [Input Group](input-group.md) +- [Date Picker](date-picker.md) +- [Time Picker](time-picker.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/autocomplete.md b/en/components/autocomplete.md index 0d5072d30c..9cebf2fdef 100644 --- a/en/components/autocomplete.md +++ b/en/components/autocomplete.md @@ -5,6 +5,7 @@ _keywords: Angular Autocomplete component, Angular Autocomplete directive, Angul --- # Angular Autocomplete Directive Overview + Angular Autocomplete is a search box directive that enables users to easily find, filter and select an item from a list of suggestions while they type. Feature-rich, it supports seamless data binding, filtering, grouping, UI customization options, and other built-in functionalities so developers can create intuitive autocomplete search experience.

@@ -14,10 +15,10 @@ The [`igxAutocomplete`]({environment:angularApiUrl}/classes/igxautocompletedirec ## Angular Autocomplete Example -The Angular Autocomplete example below generates a dropdown suggestion list as users start typing the name of a town in the input textbox. +The Angular Autocomplete example below generates a dropdown suggestion list as users start typing the name of a town in the input textbox. - @@ -31,7 +32,7 @@ To get started with the Ignite UI for Angular for [Angular Components](https://w ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule** in our **app.module**. If [`igxAutocomplete`]({environment:angularApiUrl}/classes/igxautocompletedirective.html) is applied on an [igxInput]({environment:angularApiUrl}/classes/igxinputdirective.html), the **igxInputGroupModule** is also required: @@ -92,6 +93,7 @@ export class HomeComponent {} Now that you have the Ignite UI for Angular Action Strip module or directive imported, you can start with a basic configuration of the `igxAutocomplete` component. ## Using the Angular Autocomplete + In order to apply the autocomplete functionality to an input, add the `igxAutocomplete` directive, referencing the dropdown: ```html @@ -136,6 +138,7 @@ export class AutocompletePipeStartsWith implements PipeTransform { >The [`igxAutocomplete`]({environment:angularApiUrl}/classes/igxautocompletedirective.html) uses the [`igxDropDown`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) as a provider for the available options, which means that all capabilities of the dropdown component can be used in the autocomplete. ### Disable Angular Autocomplete + You can disable the Angular autocomplete by using the [`IgxAutocompleteDisabled`]({environment:angularApiUrl}/classes/igxautocompletedirective.html#disabled) input: ```html @@ -148,6 +151,7 @@ You can disable the Angular autocomplete by using the [`IgxAutocompleteDisabled` ``` ### Autocomplete Settings + The `igx-autocomplete` dropdown positioning, scrolling strategy, and outlet can be configured using the [`IgxAutocompleteSettings`]({environment:angularApiUrl}/classes/igxautocompletedirective.html#autocompleteSettings). In the following Angular Autocomplete example we will position the dropdown above the input and disable the opening and closing animations. We're using the `ConnectedPositioningStrategy` for this: @@ -214,8 +218,8 @@ export class AutocompleteComponent { If everything went right, you should see this in your browser: - @@ -223,36 +227,41 @@ If everything went right, you should see this in your browser:

## Keyboard Navigation +
- - ⬆ / ⬇ or typing in the input will open the dropdown, if it's closed. - - ⬇ - will move to the next dropdown item. - - ⬆ - will move to the previous dropdown item. - - ENTER will confirm the already selected item and will close the dropdown. - - ESC will close the dropdown. +- ⬆ / ⬇ or typing in the input will open the dropdown, if it's closed. +- ⬇ - will move to the next dropdown item. +- ⬆ - will move to the previous dropdown item. +- ENTER will confirm the already selected item and will close the dropdown. +- ESC will close the dropdown. >[!NOTE] >When the Angular autocomplete opens, then the first item on the list is automatically selected. The same is valid when the list is filtered. -You can also see how our [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) streamlines the entire design-to-code story by 80% using real Angular components. +You can also see how our [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) streamlines the entire design-to-code story by 80% using real Angular components. ## Compatibility support + Applying the `igxAutocomplete` directive will decorate the element with the following ARIA attributes: - - role="combobox" - role of the element, where the directive is applied. - - aria-autocomplete="list" - indicates that input completion suggestions are provided in the form of list - - aria-haspopup="listbox" attribute to indicate that `igxAutocomplete` can pop-up a container to suggest values. - - aria-expanded="true"/"false" - value depending on the collapsed state of the dropdown. - - aria-owns="dropDownID" - id of the dropdown used for displaying suggestions. - - aria-activedescendant="listItemId" - value is set to the id of the current active list element. + +- role="combobox" - role of the element, where the directive is applied. +- aria-autocomplete="list" - indicates that input completion suggestions are provided in the form of list +- aria-haspopup="listbox" attribute to indicate that `igxAutocomplete` can pop-up a container to suggest values. +- aria-expanded="true"/"false" - value depending on the collapsed state of the dropdown. +- aria-owns="dropDownID" - id of the dropdown used for displaying suggestions. +- aria-activedescendant="listItemId" - value is set to the id of the current active list element. The `drop-down` component, used as provider for suggestions, will expose the following ARIA attributes: - - role="listbox" - applied on the `igx-drop-down` component container - - role="group" - applied on the `igx-drop-down-item-group` component container - - role="option" - applied on the `igx-drop-down-item` component container - - aria-disabled="true"/"false" applied on `igx-drop-down-item`, `igx-drop-down-item-group` component containers when they are disabled. + +- role="listbox" - applied on the `igx-drop-down` component container +- role="group" - applied on the `igx-drop-down-item-group` component container +- role="option" - applied on the `igx-drop-down-item` component container +- aria-disabled="true"/"false" applied on `igx-drop-down-item`, `igx-drop-down-item-group` component containers when they are disabled. ## Styling + Every component has its own theme. To get the `igxAutocomplete` styled, you have to style its containing components. In our case, these are the [input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme) and the [drop-down-theme]({environment:sassApiUrl}/themes#function-drop-down-theme). @@ -260,25 +269,28 @@ To get the `igxAutocomplete` styled, you have to style its containing components Take a look at the [`igxInputGroup`](input-group.md#styling) and the [`igxDropdown`](drop-down.md#styling) styling sections to get a better understanding of how to style those two components. ## API Reference +
-* [IgxAutocompleteDirective]({environment:angularApiUrl}/classes/igxautocompletedirective.html) -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxAutocompleteDirective]({environment:angularApiUrl}/classes/igxautocompletedirective.html) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) + +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) ## Additional Resources +
-* [IgxDropDown](drop-down.md) -* [IgxInputGroup](input-group.md) -* [Template Driven Forms Integration](input-group.md) +- [IgxDropDown](drop-down.md) +- [IgxInputGroup](input-group.md) +- [Template Driven Forms Integration](input-group.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/avatar.md b/en/components/avatar.md index 42cf4e1f9a..168a88441a 100644 --- a/en/components/avatar.md +++ b/en/components/avatar.md @@ -5,13 +5,14 @@ _keywords: Angular Avatar component, Angular Avatar control, Ignite UI for Angul --- # Angular Avatar Component Overview +

Angular Avatar component helps adding initials, images, or material icons to your application.

## Angular Avatar Example - @@ -24,9 +25,10 @@ To get started with the Ignite UI for Angular Avatar component, first you need t ```cmd ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. -The next step is to import the `IgxAvatarModule` in your **app.module.ts** file. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxAvatarModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -69,6 +71,7 @@ Now that you have the Ignite UI for Angular Avatar module or component imported, The Ignite UI for Angular Avatar component comes in three shapes (square, rounded, and circle) and three size options (small, medium, and large). It can be used for displaying initials, images or icons. ### Avatar Shape + We can change the avatar shape through the `shape` attribute setting its value to `square`, `rounded` or `circle`. By default, the shape of the avatar is `square`. ```html @@ -76,17 +79,20 @@ We can change the avatar shape through the `shape` attribute setting its value t ``` ### Avatar displaying initials + To get a simple avatar with [`initials`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#initials) (i.e. JS for 'Jack Sock'), add the following code inside the component template: ```html ``` -Let's enhance our avatar by making it circular and bigger in size. + +Let's enhance our avatar by making it circular and bigger in size. ```html ``` -We can also change the background through the `background` property or set a color on the initials through the `color` property. + +We can also change the background through the `background` property or set a color on the initials through the `color` property. ```scss // avatar.component.scss @@ -108,6 +114,7 @@ If all went well, you should see something like the following in the browser: ### Avatar displaying image + To get an avatar that displays an image, all you have to do is set the image source via the `src` property. ```html @@ -124,6 +131,7 @@ If all went well, you should see something like the following in the browser: ### Avatar displaying icon + Analogically, the avatar can display an icon via the [`icon`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#icon) property. Currently all icons from the material icon set are supported. ```html @@ -141,6 +149,32 @@ You should see something like this: ## Styling +### Avatar Theme Property Map + +Changing the `$background` property automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background$colorThe text color used for the avatar.
$icon-colorThe icon color used for the avatar.
+ To get started with styling the avatar, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -148,7 +182,7 @@ To get started with styling the avatar, we need to import the `index` file, wher // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`avatar-theme`]({environment:sassApiUrl}/themes#function-avatar-theme) providing values for the `$background` and `$border-radius` parameters. The `$color` (or `$icon-color`) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the `$border-radius` property only takes effect when the avatar's `shape` is set to `rounded`. @@ -180,12 +214,51 @@ The last step is to pass the custom avatar theme: If all went well, you should see something like the following in the browser: - +### Styling with Tailwind + +You can style the `avatar` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-avatar`, `dark-avatar`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [avatar-theme]({environment:sassApiUrl}/themes#function-avatar-theme). The syntax is as follows: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your avatar should look like this: + +
+ +
+ ### Custom sizing You can either use the `--size` variable, targeting the `igx-avatar` directly: @@ -203,6 +276,7 @@ Or you can use the universal `--igx-avatar-size` variable to target all instance ``` + ```scss .my-app { --igx-avatar-size: 200px; @@ -222,18 +296,22 @@ Learn more about it in the [Size](display-density.md) article.
## API References +
-* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) ## Theming Dependencies -* [IgxAvatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) + +- [IgxAvatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) + +- [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/badge.md b/en/components/badge.md index de190c7852..d7255489af 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -5,12 +5,13 @@ _keywords: Angular Badge component, Angular Badge control, Ignite UI for Angular --- # Angular Badge Component Overview +

Angular Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors.

## Angular Badge Example - @@ -23,9 +24,10 @@ To get started with the Ignite UI for Angular Badge component, first you need to ```cmd ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. -The next step is to import the `IgxBadgeModule` in your **app.module.ts** file. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxBadgeModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -64,6 +66,7 @@ export class HomeComponent {} Now that you have the Ignite UI for Angular Badge module or component imported, you can start with a basic configuration of the `igx-badge` component. ## Using the Angular Badge Component + Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, we need to import the `IgxAvatarModule`, along with the `IgxBadgeModule`: ```typescript @@ -81,7 +84,7 @@ import { IgxBadgeModule, IgxAvatarModule } from 'igniteui-angular'; export class AppModule {} ``` -*Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` and `IgxAvatarComponent` as standalone dependencies.* +_Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` and `IgxAvatarComponent` as standalone dependencies._ Next, we will add those components to our template: @@ -122,6 +125,7 @@ If everything's done right, you should see the demo sample shown above in your b 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; @@ -133,7 +137,7 @@ igx-badge { ### 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: +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: ```ts export class BadgeIconComponent implements OnInit { @@ -145,14 +149,14 @@ export class BadgeIconComponent implements OnInit { } ``` -Then, just specify the icon name and family as follows: +Then, just specify the icon name and family as follows: -```html +```html ``` - @@ -183,7 +187,7 @@ export class AppModule {} >[!NOTE] >The [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) has [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`]({environment:angularApiUrl}/enums/type.html#default), [`info`]({environment:angularApiUrl}/enums/type.html#info), [`success`]({environment:angularApiUrl}/enums/type.html#success), [`warning`]({environment:angularApiUrl}/enums/type.html#warning), or [`error`]({environment:angularApiUrl}/enums/type.html#error). Depending on the type, a specific background color is applied. -In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named *icon* and *type*. +In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named _icon_ and _type_. Next, we're adding the contacts in our template: @@ -281,13 +285,39 @@ Position the badge in its parent container: If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge, showing its current state. - ## Styling +### Badge Theme Property Map + +Changing the `$background-color` property automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background-color$icon-colorThe color used for icons in the badge.
$text-colorThe color used for text in the badge.
+ To get started with styling the badges, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -295,7 +325,7 @@ To get started with styling the badges, we need to import the `index` file, wher // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`badge-theme`]({environment:sassApiUrl}/themes#function-badge-theme) and accepts some parameters that style the badge's items. When you set the `$background-color`, the `$icon-color` and `$text-color` are automatically assigned based on which offers better contrast—black or white. Note that the `$border-radius` property only takes effect when the badge's `shape` is set to `square`. @@ -314,29 +344,69 @@ To include the new theme we use the `css-vars` mixin: ### Demo - +### Styling with Tailwind + +You can style the `badge` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-badge`, `dark-badge`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [badge-theme]({environment:sassApiUrl}/themes#function-badge-theme). The syntax is as follows: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your badges should look like this: + +
+ +
## API References +
-* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxBadgeComponent]({environment:angularApiUrl}/classes/igxbadgecomponent.html) -* [IgxBadgeComponent Styles]({environment:sassApiUrl}/themes#function-badge-theme) -* [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) -* [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) -* [IgxBadgeType]({environment:angularApiUrl}/index.html#IgxBadgeType) +- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxBadgeComponent]({environment:angularApiUrl}/classes/igxbadgecomponent.html) +- [IgxBadgeComponent Styles]({environment:sassApiUrl}/themes#function-badge-theme) +- [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) +- [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) +- [IgxBadgeType]({environment:angularApiUrl}/index.html#IgxBadgeType) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) + +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) + +- [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/banner.md b/en/components/banner.md index 1c0fe47bd8..de2c95f8db 100644 --- a/en/components/banner.md +++ b/en/components/banner.md @@ -4,12 +4,13 @@ _description: Easily integrate a short, non-intrusive message (along with option _keywords: Angular Banner component, Angular Banner control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Angular UI Components --- # Angular Banner Component Overview +

Angular Banner Component provides a way to easily display a prominent message to your application's users in a way that is less transient than a snackbar and less obtrusive than a dialog. The Banner can also be configured to display custom action buttons and an icon.

## Angular Banner Example - @@ -23,9 +24,9 @@ To get started with the Ignite UI for Angular Banner component, first you need t ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. -The next step is to import the `IgxBannerModule` in your **app.module.ts** file. +The next step is to import the `IgxBannerModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -148,8 +149,8 @@ The `IgxBannerModule` exposes a directive for templating the banner buttons - [` ``` - @@ -183,14 +184,15 @@ export class MyBannerComponent { ``` - ### Binding to events -The banner component emits events when changing its state - [`opening`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opening) and [`opened`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opened) are called when the banner is shown (before and after, resp.), while [`closing`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closing) and [`closed`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closed) are emitted when the banner is closed. The *ing* events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown. + +The banner component emits events when changing its state - [`opening`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opening) and [`opened`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opened) are called when the banner is shown (before and after, resp.), while [`closing`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closing) and [`closed`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closed) are emitted when the banner is closed. The _ing_ events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown. To cancel an event, bind it to the emitted object and set its `cancel` property to `true`. @@ -200,6 +202,7 @@ To cancel an event, bind it to the emitted object and set its `cancel` property ... ``` + ```typescript // banner.component.ts ... @@ -210,6 +213,7 @@ export class MyBannerComponent { } } ``` + > [!NOTE] > If the changes above are applied, the banner will never open, as the opening event is always cancelled. @@ -248,22 +252,22 @@ The banner will also have a WiFi icon in the navbar. As the subscription fires o Finally, we will add a `toast`, displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below: - ## Styling -First, in order to use the functions exposed by the theme engine, we need to import the index file in our style file: +First, in order to use the functions exposed by the theme engine, we need to import the index file in our style file: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`banner-theme`]({environment:sassApiUrl}/themes#function-banner-theme) and specifying just the `$banner-background`. Based on this value, the `$banner-message-color` and `$banner-illustration-color` are automatically set to black or white, depending on which provides better contrast with the background. @@ -282,9 +286,9 @@ The last step is to pass the custom banner theme: @include css-vars($custom-banner-theme); ``` - @@ -292,29 +296,33 @@ The last step is to pass the custom banner theme:
## API Reference +
-* [IgxBannerComponent]({environment:angularApiUrl}/classes/igxbannercomponent.html) -* [IgxBannerActionsDirective]({environment:angularApiUrl}/classes/igxbanneractionsdirective.html) -* [IgxBannerComponent Styles]({environment:sassApiUrl}/themes#function-banner-theme) +- [IgxBannerComponent]({environment:angularApiUrl}/classes/igxbannercomponent.html) +- [IgxBannerActionsDirective]({environment:angularApiUrl}/classes/igxbanneractionsdirective.html) +- [IgxBannerComponent Styles]({environment:sassApiUrl}/themes#function-banner-theme) Additional components and/or directives with relative APIs that were used: -* [IgxCardComponent]({environment:angularApiUrl}/classes/igxcardcomponent.html) -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) -* [IgxToastComponent]({environment:angularApiUrl}/classes/igxtoastcomponent.html) +- [IgxCardComponent]({environment:angularApiUrl}/classes/igxcardcomponent.html) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) +- [IgxToastComponent]({environment:angularApiUrl}/classes/igxtoastcomponent.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) -* [IgxExpansionPanel Theme]({environment:sassApiUrl}/themes#function-expansion-panel-theme) + +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxExpansionPanel Theme]({environment:sassApiUrl}/themes#function-expansion-panel-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) + +- [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/bullet-graph.md b/en/components/bullet-graph.md index 4ed22467c0..6c37621598 100644 --- a/en/components/bullet-graph.md +++ b/en/components/bullet-graph.md @@ -192,8 +192,8 @@ The ranges are visual elements that highlight a specified range of values on a s The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. -* Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties. -* Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. +- Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties. +- Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. ```html @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Button Group component, first you ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxButtonGroupModule` in your **app.module.ts** file. @@ -131,8 +131,8 @@ public alignment = ButtonGroupAlignment.vertical; ``` - @@ -148,8 +148,8 @@ In order to configure the `igx-buttongroup` selection, you could use its [select The sample below demonstrates the exposed `igx-buttongroup` selection modes: - @@ -169,8 +169,8 @@ igx-buttongroup { ``` - @@ -241,13 +241,166 @@ public ngOnInit() { ``` - ## Styling +### Button Group Theme Property Map + +When you set a value for the `$item-background` property, all related dependent properties listed in the table below are automatically updated to maintain visual consistency. The table shows which properties are affected when you customize the primary property. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
+
$item-background
+ 		$item-hover-backgroundThe hover background color for items.
$item-selected-backgroundThe selected item background color.
$item-focused-backgroundThe focused item background color.
$disabled-background-colorThe disabled item background color.
$item-border-colorThe border color for items.
$item-text-colorThe text color for items.
$idle-shadow-colorThe idle shadow color for items.
+
$item-hover-background
+ 		$item-selected-hover-backgroundThe selected item hover background color.
$item-focused-hover-backgroundThe focused hover background color.
$item-hover-text-colorThe text color for hovered items.
$item-hover-icon-colorThe icon color for hovered items.
+
$item-selected-background
+ 		$item-selected-focus-backgroundThe selected item focus background color.
$disabled-selected-backgroundThe disabled selected background color.
$item-selected-text-colorThe text color for selected items.
$item-selected-icon-colorThe icon color for selected items.
$item-selected-hover-text-colorThe text color for selected hover items.
$item-selected-hover-icon-colorThe icon color for selected hover items.
+
$item-border-color
+ 		$item-hover-border-colorThe border color for hovered items.
$item-focused-border-colorThe border color for focused items.
$item-selected-border-colorThe border color for selected items.
$item-selected-hover-border-colorThe border color for selected hover items.
$item-disabled-borderThe border color for disabled items.
$disabled-selected-border-colorThe border color for disabled selected items.
+ To get started with styling the button group, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -275,26 +428,65 @@ The last step is to include the component's theme. ### Demo - +### Styling with Tailwind + +You can style the `button-group` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-button-group`, `dark-button-group`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [button-group-theme]({environment:sassApiUrl}/themes#function-button-group-theme). The syntax is as follows: + +```html + +... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your button group should look like this: + +
+ +
+ ## API References
-* [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) -* [IgxButtonGroup Styles]({environment:sassApiUrl}/themes#function-button-group-theme) -* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) +- [IgxButtonGroup Styles]({environment:sassApiUrl}/themes#function-button-group-theme) +- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) +- [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) ## Additional Resources @@ -302,5 +494,5 @@ The last step is to include the component's theme. Our community is active and always welcoming to new ideas. -* [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) +- [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/button.md b/en/components/button.md index 9860d16a01..41cd487d07 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -31,7 +31,7 @@ To get started with the Ignite UI for Angular Button directive, first you need t ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxButtonModule` in your **app.module.ts** file. @@ -110,7 +110,7 @@ Analogically, we can switch to outlined type: ### Icon Button -As of version `17.1.0` the IgniteUI for Angular exposes a new `igxIconButton` directive intended to turn icons into fully functional buttons. You can read more about the [*Icon Button here*](icon-button.md). +As of version `17.1.0` the IgniteUI for Angular exposes a new `igxIconButton` directive intended to turn icons into fully functional buttons. You can read more about the [_Icon Button here_](icon-button.md). ```html + +
+ +
+
+ +
+
+ +
+ +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your buttons should look like this: + +
+ +
### Custom sizing @@ -387,11 +1586,11 @@ Learn more about it in the [Size](display-density.md) article.
-* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) -* [IgxIconButtonDirective]({environment:angularApiUrl}/classes/igxiconbuttondirective.html) -* [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) +- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) +- [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) +- [IgxIconButtonDirective]({environment:angularApiUrl}/classes/igxiconbuttondirective.html) +- [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) ## Additional Resources @@ -399,5 +1598,5 @@ Learn more about it in the [Size](display-density.md) article. Our community is active and always welcoming to new ideas. -* [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) +- [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/calendar.md b/en/components/calendar.md index e728e7dae0..0c77d35f35 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -15,12 +15,12 @@ The Ignite UI for Angular Calendar component, developed as a native [Angular com ## Angular Calendar Example -We created the following Angular Calendar example using the Ignite UI for Angular Calendar package. It quickly shows how a basic calendar looks and feels like, how users can choose and highlight a single date, and how to move back and forth to a specific date. +We created the following Angular Calendar example using the Ignite UI for Angular Calendar package. It quickly shows how a basic calendar looks and feels like, how users can choose and highlight a single date, and how to move back and forth to a specific date.
- @@ -33,7 +33,7 @@ To get started with the Ignite UI for Angular Calendar component, first you need ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxCalendarModule` in your **app.module.ts** file. @@ -106,8 +106,8 @@ We can easily change the default mode using the [`selection`]({environment:angul ``` - @@ -123,8 +123,8 @@ Following the same approach, we can switch to range selection mode: ``` - @@ -153,7 +153,8 @@ Let's go ahead and try those along with other customizations from the `IgxCalend [formatViews]="formatViews"> ``` -All property values should be set in the AppCоmponent file: + +All property values should be set in the AppComponent file: ```typescript // app.component.ts @@ -173,13 +174,14 @@ public ngOnInit() { If everything went well, we should now have a calendar with customized dates display, that also changes the locale representation, based on the user location. Let's have a look at it: - -### How to Disable Dates In Angular Calendar +### How to Disable Dates In Angular Calendar + This section demonstrates the usage of [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disabledDates) functionality. For this purpose, different single dates or ranges can be added to an array and then passed to the `disabledDates` descriptor. The [`DateRangeType`]({environment:angularApiUrl}/enums/daterangetype.html) is used to specify a range that is going to be disabled. @@ -204,13 +206,14 @@ export class CalendarSample6Component { These configurations should have the following result: - ### Special dates + The [`specialDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialDates) feature is using almost the same configuration principles as the `disabledDates`. The ability to select and focus `specialDates` is what differs them from the `disabled` ones. Let's add some `specialDates` to our `igxCalendar`. In order to do this, we have to create a [`DateRangeDescriptor`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) item of type [`DateRangeType.Specific`]({environment:angularApiUrl}/enums/daterangetype.html#specific) and pass an array of dates as a [`dateRange`]({environment:angularApiUrl}/interfaces/daterangedescriptor.html#dateRange): @@ -255,8 +258,8 @@ export class CalendarSample7Component { The following demo illustrates a calendar with a vacation request option: - @@ -270,17 +273,20 @@ You can now use [`showWeekNumbers`]({environment:angularApiUrl}/classes/igxcalen ``` + The following demo illustrates a calendar with enabled week numbers: - ## Calendar Events + Let's explore the events emitted by the calendar: + - [`selected`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selected) - emitted when selecting date(s) in the calendar. - [`viewDateChanged`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#viewDateChanged) - emitted every time when the presented month/year is changed - for example after navigating to the `next` or `previous` month. - [`activeViewChanged`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#activeViewChanged) - emitted after the active view is changed - for example after the user has clicked on the `month` or `year` section in the header. @@ -293,6 +299,7 @@ Let's explore the events emitted by the calendar: (activeViewChanged)="activeViewChanged($event)"> ``` + The [`selected`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selected) event is suitable to build input validation logic. Use the code from below to alert the user if selection exceeds 5 days, and then reset the selection: ```typescript @@ -316,20 +323,21 @@ public activeViewChanged(event: CalendarView) { Use the demo below to play around (change selection, navigate through months and years) and see the events logged real time: - +## Angular Calendar Views -## Angular Calendar Views There are separate views provided by the `IgxCalendarModule` that can be used independently: -- Angular Calendar Days View - [`igx-days-view`]({environment:angularApiUrl}/classes/igxdaysviewcomponent.html) + +- Angular Calendar Days View - [`igx-days-view`]({environment:angularApiUrl}/classes/igxdaysviewcomponent.html) - @@ -337,8 +345,8 @@ There are separate views provided by the `IgxCalendarModule` that can be used in - Angular Calendar Month View - [`igx-months-view`]({environment:angularApiUrl}/classes/igxmonthsviewcomponent.html) - @@ -346,26 +354,29 @@ There are separate views provided by the `IgxCalendarModule` that can be used in - Angular Calendar Year View - [`igx-years-view`]({environment:angularApiUrl}/classes/igxyearsviewcomponent.html) - ## Keyboard navigation -If you traverse the page using *Tab key* you should keep in mind that based on [W3 accessibility recommendations](https://www.w3.org/TR/wai-aria-practices/#layoutGrid) the *igxCalendarComponent* now introduces the following tab stops: + +If you traverse the page using _Tab key_ you should keep in mind that based on [W3 accessibility recommendations](https://www.w3.org/TR/wai-aria-practices/#layoutGrid) the _igxCalendarComponent_ now introduces the following tab stops: + - Previous month button - Month selection button - Year selection button - Next month button - Selected date, Current date, First focusable (not disabled) date in the days view -In an Angular Calendar that contains more than one selected dates, only the first date will be introduced as a tab stop. For example, when an Angular Calendar multi-select is enabled and you have selected the dates: *13/10/2020*, *17/10/2020* and *21/10/2020* only *13/10/2020* will be accessible during tab navigation; in an Angular Calendar Range Picker, only the first date of the selected range will be part of the *page tab sequence*. +In an Angular Calendar that contains more than one selected dates, only the first date will be introduced as a tab stop. For example, when an Angular Calendar multi-select is enabled and you have selected the dates: _13/10/2020_, _17/10/2020_ and _21/10/2020_ only _13/10/2020_ will be accessible during tab navigation; in an Angular Calendar Range Picker, only the first date of the selected range will be part of the _page tab sequence_. >[!NOTE] -> Behavioral change, from *v10.2.0* - Tab key navigation in the *days view* is no longer available. In order to navigate between the dates in the *date view* you should use the *arrow keys*. +> Behavioral change, from _v10.2.0_ - Tab key navigation in the _days view_ is no longer available. In order to navigate between the dates in the _date view_ you should use the _arrow keys_. When the `igxCalendar` component is focused, use: + - PageUp key to move to the previous month, - PageDown key to move to the next month, - Shift + PageUp keys to move to the previous year, @@ -374,27 +385,33 @@ When the `igxCalendar` component is focused, use: - End key to focus the last day of the current month or last month in view When the `prev` or the `next` month buttons (in the subheader) are focused, use: + - Space or Enter key to scroll into view the next or previous month. When the `months` button (in the subheader) is focused, use: + - Space or Enter key to open the months view. When the `year` button (in the subheader) is focused, use: + - Space or Enter key to open the decade view. When a `day` inside the current month is focused: -- Use *Arrow keys* to navigate through the days. Note: The disabled dates will be skipped. + +- Use _Arrow keys_ to navigate through the days. Note: The disabled dates will be skipped. - Focus will be persisted on the current month that is in the view, while navigation **from**/**to** the **last day**/**first day** of the month. - THe kb navigation would be continuous, which means that it will go through all months while navigating with the arrows. - Use Enter key to select the currently focused day. When a `month` inside the months view is focused, use: + - Arrow keys to navigate through the months. - Home key to focus the first month inside the months view. - End key to focus the last month inside the months view. - Enter key to select the currently focused month and close the view. When an `year` inside the decade view is focused, use: + - Arrow up and Arrow down keys to navigate through the years, - Enter key to select the currently focused year and close the view. @@ -402,23 +419,25 @@ When an `year` inside the decade view is focused, use: >Following version 8.2.0, keyboard navigation will not focus days that are outside of current month, but will rather change the month in view. ## Multi View Calendar + Multi-view calendar supports all three types of selection. Use the [`monthsViewNumber`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#monthsViewNumber) input to set the number of displayed months, which will be shown horizontally in a flex container. There is no limit on the max value set. While using a multi view calendar, you may want to hide the days that do not belong to the current month. You are able to do it with the [`hideOutsideDays`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#hideOutsideDays) property. Keyboard navigation moves to next/previous months when those are in view. - ## Calendar Orientation + The orientation settings allows users to choose how the header and the view of the calendar are displayed. -#### Header Orientation Options: +### Header Orientation Options You can change the header orientation to place the header of the calendar to be either horizontal(above the calendar view) or vertical(on the side of the calendar view). To do that, use the `[headerOrientation]` property, setting it respectively to `horizontal` or `vertical` -#### View Orientation Options: +### View Orientation Options You can set the view orientation to place the months in the calendar either horizontally(side by side) or vertically(above one another). To do that, use the `[orientation]` property, setting it respectively to `horizontal` or `vertical`. @@ -449,13 +468,315 @@ export class CalendarSample9Component { } ``` - ## Styling +### Calendar Theme Property Map + +When you modify the `$header-background` and `$content-background` properties, all related theme properties are automatically adjusted to ensure your calendar component is styled consistently. See the tables below for a detailed overview of which theme properties are affected. + +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Primary PropertyDependent PropertyDescription
$header-background
$header-foregroundText color for the calendar header
$picker-hover-foregroundPicker hover foreground
$picker-focus-foregroundPicker focus foreground
$navigation-hover-colorHover color for navigation
$navigation-focus-colorFocus color for navigation
$date-selected-backgroundBackground for selected dates
$date-selected-current-backgroundSelected current date background
$date-selected-foregroundForeground for selected dates
$date-selected-current-foregroundForeground for selected current date
$date-selected-current-border-colorBorder color for selected current date
$date-selected-special-border-colorBorder color for selected special dates
$ym-selected-backgroundYear/month selected background
$ym-selected-hover-backgroundHover background for year/month selected date
$ym-selected-current-backgroundCurrent selected year/month background
$ym-selected-current-hover-backgroundHover background for current selected year/month
$ym-selected-foregroundForeground for selected year/month
$ym-selected-hover-foregroundHover foreground for selected year/month
$ym-selected-current-foregroundForeground for current selected year/month
$ym-selected-current-hover-foregroundHover foreground for current selected year/month
$content-background
$content-foregroundText and icon color inside calendar content area
$weekend-colorColor for weekend dates
$inactive-colorColor for dates outside active range
$weekday-colorColor for weekday labels
$picker-backgroundPicker background
$date-hover-backgroundBackground for hovered dates
$date-hover-foregroundForeground for hovered dates
$date-focus-backgroundBackground for focused dates
$date-focus-foregroundForeground for focused dates
$date-current-backgroundBackground for the current date
$date-current-foregroundForeground for the current date
$date-current-border-colorBorder color for the current date
$ym-current-backgroundYear/month current background
$ym-current-hover-backgroundHover background for current year/month
$ym-current-foregroundForeground for current year/month
$ym-current-hover-foregroundHover foreground for current year/month
$date-selected-range-backgroundSelected range background
$date-selected-range-foregroundForeground for selected date ranges
$date-selected-current-range-backgroundBackground for selected current date ranges
$date-selected-current-range-hover-backgroundHover background for selected current date ranges
$date-selected-current-range-focus-backgroundFocus background for selected current date ranges
$date-selected-current-range-foregroundForeground for selected current date ranges
$date-special-foregroundForeground for special dates
$date-special-border-colorBorder color for special dates
$date-special-hover-border-colorHover border color for special dates
$date-special-focus-foregroundFocus foreground for special dates
$date-special-range-foregroundForeground for special date ranges
$date-special-range-border-colorBorder color for special date ranges
$date-special-range-hover-backgroundHover background for special date ranges
$date-selected-special-border-colorBorder color for selected special dates
$date-selected-special-hover-border-colorHover border color for selected special dates
$date-selected-special-focus-border-colorFocus border color for selected special dates
$date-disabled-foregroundForeground for disabled dates
$date-disabled-range-foregroundForeground for disabled ranges
$date-border-radius
$date-range-border-radiusControls the border radius for date ranges.
$date-current-border-radiusControls the border radius for the current date.
$date-special-border-radiusControls the border radius for special dates.
$date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$header-background
$header-foregroundText color for the calendar header
$picker-hover-foregroundPicker hover foreground
$picker-focus-foregroundPicker focus foreground
$date-current-backgroundBackground for the current date
$date-current-hover-foregroundHover foreground for the current date
$date-current-focus-foregroundFocus foreground for the current date
$date-selected-current-foregroundForeground for the currently selected date
$date-selected-current-hover-foregroundHover foreground for the currently selected date
$date-selected-current-focus-foregroundFocus foreground for the currently selected date
$date-special-border-colorBorder color for special dates
$date-special-hover-foregroundHover foreground for special dates
$content-background
$content-foregroundText and icon color inside calendar content area
$weekend-colorColor for weekend dates
$inactive-colorColor for dates outside active range
$weekday-colorColor for weekday labels
$picker-backgroundPicker background
$date-hover-backgroundBackground for hovered dates
$date-hover-foregroundForeground for hovered dates
$date-focus-backgroundBackground for focused dates
$date-focus-foregroundForeground for focused dates
$date-selected-backgroundBackground for selected dates
$date-selected-hover-backgroundHover background for selected dates
$date-selected-focus-backgroundFocus background for selected dates
$date-selected-foregroundForeground for selected dates
$date-selected-hover-foregroundHover foreground for selected dates
$date-selected-focus-foregroundFocus foreground for selected dates
$date-selected-range-backgroundBackground for selected date ranges
$date-selected-range-foregroundForeground for selected date ranges
$date-disabled-foregroundForeground for disabled dates
$date-disabled-range-foregroundForeground for disabled ranges
$date-border-radius
$date-range-border-radiusControls the border radius for date ranges.
$date-current-border-radiusControls the border radius for the current date.
$date-special-border-radiusControls the border radius for special dates.
$date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$header-background
$header-foregroundText color for the calendar header
$picker-backgroundPicker background
$picker-hover-foregroundPicker hover foreground
$weekday-colorColor for weekday labels
$picker-focus-foregroundPicker focus foreground
$date-special-border-colorBorder color for special dates
$date-special-focus-foregroundFocus foreground for special dates
$content-background
$content-foregroundText and icon color inside calendar content area
$weekend-colorColor for weekend dates
$inactive-colorColor for dates outside active range
$weekday-colorColor for weekday labels
$date-hover-backgroundBackground for hovered dates
$date-hover-foregroundForeground for hovered dates
$date-focus-backgroundBackground for focused dates
$date-focus-foregroundForeground for focused dates
$date-current-backgroundBackground for the current date
$date-current-foregroundForeground for the current date
$date-current-border-colorBorder color for the current date
$date-selected-backgroundBackground for selected dates
$date-selected-current-backgroundBackground for the currently selected date
$date-selected-foregroundForeground for selected dates
$date-selected-current-foregroundForeground for the currently selected date
$date-selected-special-border-colorBorder color for selected special dates
$date-selected-special-hover-border-colorHover border color for selected special dates
$date-selected-special-focus-border-colorFocus border color for selected special dates
$date-selected-range-backgroundBackground for selected date ranges
$date-selected-range-foregroundForeground for selected date ranges
$date-disabled-foregroundForeground for disabled dates
$date-disabled-range-foregroundForeground for disabled ranges
$date-border-radius
$date-range-border-radiusControls the border radius for date ranges.
$date-current-border-radiusControls the border radius for the current date.
$date-special-border-radiusControls the border radius for special dates.
$date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$header-background
$header-foregroundText color for the calendar header
$picker-backgroundPicker background
$picker-hover-foregroundPicker hover foreground
$picker-focus-foregroundPicker focus foreground
$navigation-hover-colorNavigation hover color
$navigation-focus-colorNavigation focus color
$date-current-backgroundBackground for the current date
$date-current-border-colorBorder color for the current date
$date-current-hover-backgroundBackground for hovered current date
$date-current-hover-border-colorBorder color for hovered current date
$date-current-focus-backgroundBackground for focused current date
$date-current-focus-border-colorBorder color for focused current date
$date-current-foregroundForeground for the current date
$date-current-hover-foregroundForeground for hovered current date
$date-current-focus-foregroundForeground for focused current date
$date-selected-current-border-colorBorder color for the currently selected date
$content-background
$content-foregroundText and icon color inside calendar content area
$weekend-colorColor for weekend dates
$inactive-colorColor for dates outside active range
$weekday-colorColor for weekday labels
$date-hover-backgroundBackground for hovered dates
$date-hover-foregroundForeground for hovered dates
$date-focus-backgroundBackground for focused dates
$date-focus-foregroundForeground for focused dates
$date-selected-backgroundBackground for selected dates
$date-selected-current-backgroundBackground for the currently selected date
$date-selected-foregroundForeground for selected dates
$date-selected-current-foregroundForeground for the currently selected date
$date-selected-current-border-colorBorder color for the currently selected date
$date-selected-range-backgroundBackground for selected date ranges
$date-selected-range-foregroundForeground for selected date ranges
$date-selected-current-range-backgroundBackground for the current date in a selected range
$date-selected-current-range-hover-backgroundHover background for the current date in a selected range
$date-selected-current-range-foregroundForeground for the current date in a selected range
$date-disabled-foregroundForeground for disabled dates
$date-disabled-range-foregroundForeground for disabled ranges
$date-border-radius
$date-range-border-radiusControls the border radius for date ranges.
$date-current-border-radiusControls the border radius for the current date.
$date-special-border-radiusControls the border radius for special dates.
$date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
+
+
+
+ To get started with styling the calendar, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -463,7 +784,7 @@ To get started with styling the calendar, we need to import the `index` file, wh // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme) and by specifying just the `$header-background` and `$content-background` parameters, the theme will automatically compute appropriate state colors and contrast foregrounds. Of course, you're still free to override any of the theme parameters with custom values if needed. @@ -480,26 +801,66 @@ The last step is to pass the custom calendar theme: @include css-vars($custom-calendar-theme); ``` -In the sample below, you can see how using the calendar with customized CSS variables allows you to create a design that visually resembles the calendar used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.ui.unified.Calendar/sample/sap.ui.unified.sample.CalendarSingleDaySelection) design system. - - +### Styling with Tailwind + +You can style the `calendar` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-calendar`, `dark-calendar`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme). The syntax is as follows: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your calendar should look like this: + +
+ +
+ ## API References +
-* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) -* [DateRangeType]({environment:angularApiUrl}/enums/daterangetype.html) -* [DateRangeDescriptor]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) +- [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) +- [DateRangeType]({environment:angularApiUrl}/enums/daterangetype.html) +- [DateRangeDescriptor]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) +- [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/card.md b/en/components/card.md index 9dd85f1537..4e5a0ad9d8 100644 --- a/en/components/card.md +++ b/en/components/card.md @@ -5,6 +5,7 @@ _keywords: Angular Card component, Angular Card control, Ignite UI for Angular, --- # Angular Card Component Overview +

Angular Card represents a flexible container that has different elements like title text, descriptions, image styles, call to action buttons, links and others. In order to represent a given scenario/content in the best possible way, it offers various display options, headers, footers, as well as background colors, animations, and more. @@ -12,10 +13,11 @@ This lightweight Angular Card component is used for creating all sorts of cards,

## Angular Card Example -Below you can see a basic sample of a well-crafted Ignite UI for Angular Card with main card sections like image, title, subtitle, primary card content, container for a button. - @@ -29,7 +31,7 @@ To get started with the Ignite UI for Angular Card component, first you need to ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxCardModule` inside your **app.module.ts** file. @@ -104,6 +106,7 @@ export class HomeComponent {} Now that you have the Ignite UI for Angular Card module or directives imported, you can start using the `igx-card` component. ## Using the Angular Card Component + Then to represent the demo card template we can add the following code. ```html @@ -144,6 +147,7 @@ You can place anything inside the `igx-card-content` tags. Usually text goes the Finally, the `igx-card-actions` is where you'd place any actionable items, like buttons. If you use the `igxButton` directive on an element, it will automatically be placed correctly according to the material design spec inside the area. ### Media, Thumbs, and Avatars + If you want to show an image or icon in the card header next to the title and subtitle, you can do it by using the `igxCardThumbnail` directive. Taking the card above as an example, we can edit the contents of the `igx-card-header` and add a `igxCardThumbnail` container to hold an icon: @@ -188,6 +192,7 @@ or, even this: ``` ### Outlined cards + The card has a `type` attribute you can set to either `default` (set automatically if omitted), or `outlined`. The `outlined` type removes any shadows from the card, replacing them with a thin border to separate the card from the background. ### Angular Card Horizontal Layout @@ -222,7 +227,7 @@ Here's an example of an outlined horizontal card: ``` -We are using the `.h-sample-column` class to bundle the `igx-card-header` and `igx-card-content` together, keeping them aligned vertically, while other sections in the card align horizontally. +We are using the `.h-sample-column` class to bundle the `igx-card-header` and `igx-card-content` together, keeping them aligned vertically, while other sections in the card align horizontally. The styles that `.h-sample-column` class applies are: @@ -241,7 +246,7 @@ The styles that `.h-sample-column` class applies are: Notice how the buttons in the `igx-card-actions` have now switched to a `vertical` layout. The `igx-card-actions` has an `inverse` layout relationship with its parent. So whenever the card's `horizontal` attribute is set to `true` the actions `vertical` property will be set to `true` and vice versa. -You can set the `vertical` attribute of he actions area explicitly, thus overriding this default behavior. +You can set the `vertical` attribute of he actions area explicitly, thus overriding this default behavior. ```html @@ -250,11 +255,12 @@ You can set the `vertical` attribute of he actions area explicitly, thus overrid ``` + If everything went well, our card should look like this: - @@ -292,8 +298,8 @@ Below is an example showing how you can create a semi-horizontal card, where we ``` - @@ -329,31 +335,51 @@ You can justify the buttons so that they are laid out across the entire axis, no ## Styling -Following the simplest approach, you can use CSS variables to customize the appearance of the card: - -```css -igx-card { - --border-radius: 8px; - --outline-color: #f0f0f0; - --background: #bfbfbf; - --header-text-color: #000; -} -``` - -By changing the values of these CSS variables, you can alter the entire look of the card component. - -
- -Another way to style the card is by using **Sass**, along with our [`card-theme`]({environment:sassApiUrl}/index.html#function-card-theme) function. - -To start styling the card using **Sass**, first import the `index` file, which includes all theme functions and component mixins: +### Card Theme Property Map + +Changing the `$background` property automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background$header-text-colorThe text color of the card title.
$subtitle-text-colorThe text color of the card subtitle.
$content-text-colorThe text color of the card content.
$actions-text-colorThe text color of the card buttons.
+ +To get started with styling the card, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`card-theme`]({environment:sassApiUrl}/themes#function-card-theme) and providing just a few styling parameters. If you only specify the `$background` parameter, the appropriate foreground colors will be automatically chosen, either black or white, based on which offers better contrast with the background. @@ -364,58 +390,104 @@ $custom-card-theme: card-theme( ); ``` +As seen, the `card-theme` exposes some useful parameters for basic styling of its items. + Finally, **include** the custom theme in your application: ```scss @include css-vars($custom-card-theme); ``` -In the sample below, you can see how using the card component with customized CSS variables allows you to create a design that visually resembles the card used in the [`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) design system. +In the sample below, you can see how using the card component with customized CSS variables allows you to create a design that visually resembles the card used in the [`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) design system. + - +### Styling with Tailwind + +You can style the `card` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-card`, `dark-card`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [card-theme]({environment:sassApiUrl}/themes#function-card-theme). The syntax is as follows: + +```html + +... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your card should look like this: + +
+ +
+ ### Summary -In this article we covered a lot of ground with the card component. First, we created a very simple card with text content only. Then added some images to make the card a bit more appealing. We used some additional Ignite UI for Angular components inside our card, avatar, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's theme by setting some exposed theme colors, creating custom palettes and extending schemas. +In this article we covered a lot of ground with the card component. First, we created a very simple card with text content only. Then added some images to make the card a bit more appealing. We used some additional Ignite UI for Angular components inside our card, avatar, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's theme by setting some exposed theme colors, creating custom palettes and extending schemas. The card component is capable of displaying more different layouts worth exploring in the Card Demo in the beginning of this article. ## API and Style References For more detailed information regarding the card's API, refer to the following links: -* [`IgxCardComponent API`]({environment:angularApiUrl}/classes/igxcardcomponent.html) + +- [`IgxCardComponent API`]({environment:angularApiUrl}/classes/igxcardcomponent.html) The following built-in CSS styles helped us achieve this card layout: -* [`IgxCardComponent Styles`]({environment:sassApiUrl}/themes#function-card-theme) +- [`IgxCardComponent Styles`]({environment:sassApiUrl}/themes#function-card-theme) Additional components and/or directives that were used: -* [`IgxAvatarComponent`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [`IgxIconComponent`]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [`IgxButtonDirective`]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html) +- [`IgxAvatarComponent`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [`IgxIconComponent`]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [`IgxButtonDirective`]({environment:angularApiUrl}/classes/igxbuttondirective.html) +- [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html) Styles: -* [`IgxAvatarComponent Styles`]({environment:sassApiUrl}/themes#function-avatar-theme) -* [`IgxIconComponent Styles`]({environment:sassApiUrl}/themes#function-icon-theme) -* [`IgxButtonDirective Styles`]({environment:sassApiUrl}/themes#function-button-theme) +- [`IgxAvatarComponent Styles`]({environment:sassApiUrl}/themes#function-avatar-theme) +- [`IgxIconComponent Styles`]({environment:sassApiUrl}/themes#function-icon-theme) +- [`IgxButtonDirective Styles`]({environment:sassApiUrl}/themes#function-button-theme)
## Theming Dependencies -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxAvatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) -* [IgxIconTheme]({environment:sassApiUrl}/themes#function-icon-theme) + +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxAvatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) +- [IgxIconTheme]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. -* [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) +- [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/carousel.md b/en/components/carousel.md index 09f97e5d4e..643361e992 100644 --- a/en/components/carousel.md +++ b/en/components/carousel.md @@ -5,30 +5,33 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Carousel Component Overview -

Ignite UI for Angular Carousel is a responsive, lightweight component that provides the most flexible way to create slideshow-like web experience for users who navigate back and forth through a collection of images with text slides, links, and other html elements. + +

Ignite UI for Angular Carousel is a responsive, lightweight component that provides the most flexible way to create slideshow-like web experience for users who navigate back and forth through a collection of images with text slides, links, and other html elements. The Angular Carousel component allows you to use animations, slide transitions, and customization so you can easily tweak the interface and build Angular custom carousel.

## Angular Carousel Example + The Angular Carousel demo you see below shows slides containing only images. We’ve enabled navigation buttons allowing users to easily move from one slide to another – going back and forth. -
## Getting Started with Ignite UI for Angular Carousel + To get started with the Ignite UI for Angular Carousel component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: ```cmd ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the **IgxCarouselModule** in our **app.module.ts** file: @@ -81,14 +84,16 @@ export class HomeComponent {} Now that you have the Ignite UI for Angular Carousel module or directives imported, you can start using the `igx-carousel` component. ## Using the Angular Carousel Component + The Ignite UI for Angular Carousel component can be used as a full-screen element or situated inside another component. Also, the slides may feature any valid html content inside, including other Angular components. In this section we will go through the setup of the above defined **demo**. ### Adding slides with *ngFor +
-If we have slides with the same type of content, the easiest approach is to use *\*ngFor* to add them in the template. +If we have slides with the same type of content, the easiest approach is to use _\*ngFor_ to add them in the template. Since our slides are going to contain only images, we are going to create an array of objects in the **ts** file and use it to populate the **igx-carousel** with slides: @@ -114,12 +119,14 @@ export class HomeComponent { ``` + ## Angular Carousel Custom Examples ### Configuring IgxCarousel +
-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`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop) input to `false`. +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`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop) input to `false`. ```html @@ -152,6 +159,7 @@ The [`IgxCarousel`]({environment:angularApiUrl}/classes/igxcarouselcomponent.htm ``` ### Custom indicators +
To add Angular custom carousel indicators we will have to use the [IgxCarouselIndicatorDirective]({environment:angularApiUrl}/classes/igxcarouselindicatordirective.html), like this: @@ -185,9 +193,11 @@ To achieve this we will use the [IgxCarouselPrevButtonDirective]({environment:an ``` ### Slide containing other components +
This carousel is going to contain slides with forms and images: + ```html ...
@@ -242,13 +252,12 @@ This carousel is going to contain slides with forms and images: #### Demo - - ## Angular Carousel Animations Animated slide transitions provide the end-users a nice experience when interacting with the carousel. @@ -263,6 +272,7 @@ The animations are configured through the [animationType]({environment:angularAp ``` + Setting `none` to the `animationType` input disables carousel's animations. @@ -271,14 +281,14 @@ Setting `none` to the `animationType` input disables carousel's animations. The demo below demonstrates the different types of animations, which the carousel supports. - - ## Navigation +
Transition and navigation are the most important carousel features. @@ -286,6 +296,7 @@ Transition and navigation are the most important carousel features. The navigation in the carousel can be handled by the user through navigation buttons, keyboard navigation and pan interaction on mobile devices. ### Pan gestures +
By default, the carousel can be used on any touch-enabled device. This is optional and can be changed by setting the [gesturesSupport]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#gesturesSupport) property to `false`. @@ -293,17 +304,19 @@ By default, the carousel can be used on any touch-enabled device. This is option The carousel [animations](carousel.md#angular-carousel-animations) are fully supported on touch devices, which makes the carousel consistent with any platform and great when used in progressive web applications ([PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)). ### Keyboard navigation +
-* 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. +- 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 +
The **IgxCarousel** can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the [interval]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#interval) property, which determines the amount of time in milliseconds between slides transition. @@ -312,17 +325,19 @@ The **IgxCarousel** can be easily configured to change the slides automatically, >The automatic slide transitioning is not entirely user-independent by default. Positioning the mouse pointer over a slide will interrupt the current slide transition until the mouse pointer leaves the slide area. This can be prevented by setting [pause]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#pause) property to `false`. ## Advanced Example +
Let's create a fully automated carousel with looping enabled. Each slide will be synced with a [list item]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) in a list. Clicking on a list item will trigger a slide change. To achieve this goal, we have to do the following configurations to the carousel: - - disable `gesturesSupport` - - disable the `navigation` buttons - - disable the carousel `indicators` - - disable the `pause` on user interaction with the slide - - add transition `interval` + +- disable `gesturesSupport` +- disable the `navigation` buttons +- disable the carousel `indicators` +- disable the `pause` on user interaction with the slide +- add transition `interval` Our carousel will look like this in the template: @@ -337,9 +352,11 @@ Our carousel will look like this in the template:
... ``` + We are ready with the carousel configuration. Now we need only to add a [list](list.md) component and sync the both components: adding [IgxList]({environment:angularApiUrl}/classes/igxlistcomponent.html): + ```html ...
@@ -352,6 +369,7 @@ adding [IgxList]({environment:angularApiUrl}/classes/igxlistcomponent.html):
... ``` + syncing the components by hooking up on carousel's [`slideChanged`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#slideChanged) and list's [itemClicked]({environment:angularApiUrl}/classes/igxlistcomponent.html#itemClicked) events: >[!NOTE] @@ -369,10 +387,11 @@ syncing the components by hooking up on carousel's [`slideChanged`]({environment }); } ``` -These configurions will have the following result: - @@ -653,9 +672,9 @@ When you modify a primary property, all related dependent properties are automat -Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the `carousel` appearance. +Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the `carousel` appearance. -First, in order to use the functions exposed by the theme engine, we need to import the `index` file in our style file: +First, in order to use the functions exposed by the theme engine, we need to import the `index` file in our style file: ```scss @use "igniteui-angular/theming" as *; @@ -683,8 +702,8 @@ The last step is to include the component's theme. The sample below demonstrates a simple styling applied through the [Ignite UI for Angular Theming](themes/index.md). - @@ -701,6 +720,7 @@ Along with the tailwind import in your global stylesheet, you can apply the desi ``` The utility file includes both `light` and `dark` theme variants. + - Use `light-*` classes for the light theme. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-carousel`, `dark-carousel`. @@ -728,52 +748,63 @@ At the end your carousel should look like this: ## Accessibility + ### WAI-ARIA Roles, States, and Properties - * The Carousel base element role is [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) - section containing content that is relevant to specific purpose and users will likely want to be able to navigate easily. - * Carousel indicators are with role [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) - grouping label providing a mechanism for selecting the tab content that is to be rendered to the user - * The element that serves as the container for the set of tabs (carousel indicators) role is set to [`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tab). - * Each slide element is set with role [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel). - * The element that serves as the container for the set of igx-slides is set with [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live)="polite". Both options are - - **off**: if the carousel is automatically rotating. - - **polite**: if the carousel is NOT automatically rotating. + +- The Carousel base element role is [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) - section containing content that is relevant to specific purpose and users will likely want to be able to navigate easily. +- Carousel indicators are with role [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) - grouping label providing a mechanism for selecting the tab content that is to be rendered to the user +- The element that serves as the container for the set of tabs (carousel indicators) role is set to [`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tab). +- Each slide element is set with role [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel). +- The element that serves as the container for the set of igx-slides is set with [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live)="polite". Both options are + - **off**: if the carousel is automatically rotating. + - **polite**: if the carousel is NOT automatically rotating. ### ARIA support + #### **Carousel component** -##### **Attributes**: - * [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) set to 'carousel'. - * [aria-selected](https://www.w3.org/TR/wai-aria/states_and_properties#aria-selected)- set to *true* or *false* based on the active slide. - * [aria-controls](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) - set a slide index whose content is controlled by the current element. - * [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live) - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: **off** and **polite**. The default setting is **polite**. When the [interval]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#interval) option set, the **aria-live** attribute would be set to **off**. - * [aria-label](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) slide based. - * aria-label (buttons) - - aria-label - for previous slide. - - aria-label - for next slide. +##### **Attributes** + +- [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) set to 'carousel'. +- [aria-selected](https://www.w3.org/TR/wai-aria/states_and_properties#aria-selected)- set to _true_ or _false_ based on the active slide. +- [aria-controls](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) - set a slide index whose content is controlled by the current element. +- [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live) - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: **off** and **polite**. The default setting is **polite**. When the [interval]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#interval) option set, the **aria-live** attribute would be set to **off**. +- [aria-label](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) slide based. +- aria-label (buttons) + - aria-label - for previous slide. + - aria-label - for next slide. #### **Slide component** -##### **Roles**: - * [attr.role="tabpanel"](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) - container for the resources associated with a tab, where each tab is contained in a tablist. -##### **Attributes**: - * id - follows the pattern "panel-${this.index}" - * [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) follows the pattern "tab-${this.index}-${this.total}" - * [aria-selected](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) set **active** slide. Indicates the current **selected** state of a particular slide element. +##### **Roles** + +- [attr.role="tabpanel"](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) - container for the resources associated with a tab, where each tab is contained in a tablist. + +##### **Attributes** + +- id - follows the pattern "panel-${this.index}" +- [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) follows the pattern "tab-${this.index}-${this.total}" +- [aria-selected](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) set **active** slide. Indicates the current **selected** state of a particular slide element. ## API References +
-* [IgxCarouselComponent]({environment:angularApiUrl}/classes/igxcarouselcomponent.html) -* [IgxCarouselComponent Styles]({environment:sassApiUrl}/themes#function-carousel-theme) -* [IgxSlideComponent]({environment:angularApiUrl}/classes/igxslidecomponent.html) -* [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) -* [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) +- [IgxCarouselComponent]({environment:angularApiUrl}/classes/igxcarouselcomponent.html) +- [IgxCarouselComponent Styles]({environment:sassApiUrl}/themes#function-carousel-theme) +- [IgxSlideComponent]({environment:angularApiUrl}/classes/igxslidecomponent.html) +- [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) +- [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) + +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) + +- [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/charts/chart-api.md b/en/components/charts/chart-api.md index c4631f676f..1c8798d1c2 100644 --- a/en/components/charts/chart-api.md +++ b/en/components/charts/chart-api.md @@ -52,68 +52,68 @@ The Angular [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite The Angular [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) has the following API members: -* [`includedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedColumns) -* [`excludedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedColumns) -* [`includedSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedSeries) -* [`excludedSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedSeries) -* [`valueFormatAbbreviation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatAbbreviation) -* [`valueFormatMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMode) -* [`valueFormatCulture`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatCulture) -* [`valueFormatMinFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMinFractions) -* [`valueFormatMaxFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMaxFractions) -* [`valueTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueTextColor) -* [`titleTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#titleTextColor) -* [`labelTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#labelTextColor) -* [`unitsTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#unitsTextColor) -* [`summaryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#summaryType) -* [`headerTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerTextColor) -* [`badgeShape`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#badgeShape) +- [`includedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedColumns) +- [`excludedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedColumns) +- [`includedSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedSeries) +- [`excludedSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedSeries) +- [`valueFormatAbbreviation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatAbbreviation) +- [`valueFormatMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMode) +- [`valueFormatCulture`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatCulture) +- [`valueFormatMinFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMinFractions) +- [`valueFormatMaxFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMaxFractions) +- [`valueTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueTextColor) +- [`titleTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#titleTextColor) +- [`labelTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#labelTextColor) +- [`unitsTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#unitsTextColor) +- [`summaryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#summaryType) +- [`headerTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerTextColor) +- [`badgeShape`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#badgeShape) ## Angular Donut Chart API The Angular [`IgxDoughnutChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html) has the following API members: -* [`allowSliceExplosion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceExplosion) -* [`allowSliceSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceSelection) -* [`innerExtent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#innerExtent) +- [`allowSliceExplosion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceExplosion) +- [`allowSliceSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceSelection) +- [`innerExtent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#innerExtent) ## Angular Data Pie Chart API The Angular [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) has the following API members: -* [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#chartType) -* [`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) -* [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) -* [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) -* [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) -* [`selectionBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) +- [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#chartType) +- [`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) +- [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) +- [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) +- [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) +- [`selectionBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) ## Angular Pie Chart API The Angular [`IgxPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html) has the following API members: -* [`legendItemBadgeTemplate`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemBadgeTemplate) -* [`legendItemTemplate`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemTemplate) -* [`legendLabelMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendLabelMemberPath) -* [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) -* [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) -* [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) +- [`legendItemBadgeTemplate`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemBadgeTemplate) +- [`legendItemTemplate`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemTemplate) +- [`legendLabelMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendLabelMemberPath) +- [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) +- [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) +- [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) ## Angular Sparkline Chart API The Angular [`IgxSparklineComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html) has the following API members: -* [`displayNormalRangeInFront`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayNormalRangeInFront) -* [`displayType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayType) -* [`lowMarkerBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerBrush) -* [`lowMarkerSize`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerSize) -* [`lowMarkerVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerVisibility) -* [`normalRangeFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#normalRangeFill) -* [`unknownValuePlotting`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#unknownValuePlotting) +- [`displayNormalRangeInFront`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayNormalRangeInFront) +- [`displayType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayType) +- [`lowMarkerBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerBrush) +- [`lowMarkerSize`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerSize) +- [`lowMarkerVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerVisibility) +- [`normalRangeFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#normalRangeFill) +- [`unknownValuePlotting`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#unknownValuePlotting) ## Additional Resources You can find more information about charts in these topics: -* [Chart Overview](chart-overview.md) -* [Chart Features](chart-features.md) +- [Chart Overview](chart-overview.md) +- [Chart Features](chart-features.md) diff --git a/en/components/charts/chart-features.md b/en/components/charts/chart-features.md index f2855e5610..0ddb5651f6 100644 --- a/en/components/charts/chart-features.md +++ b/en/components/charts/chart-features.md @@ -143,6 +143,6 @@ Use trendlines to identify a trend or find patterns in your data. There are many ## API References -* [`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) -* [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.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) +- [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) diff --git a/en/components/charts/chart-overview.md b/en/components/charts/chart-overview.md index fdd0b6b580..b66f99ddd0 100644 --- a/en/components/charts/chart-overview.md +++ b/en/components/charts/chart-overview.md @@ -11,14 +11,14 @@ Ignite UI for Angular Charts & Graphs is an extensive library of data visualizat The Ignite UI for Angular Charts support over 65 types of series and combinations that let you visualize any type of data, including Category Series, Financial Series, Polar Series, Radial Series, Range Series, Scatter Series, Shape Series, and Geospatial Series. No matter the type of comparison you are doing, or what type of data story you are trying to tell, you can represent your data in any of these ways: -* Change Over Time -* Comparison -* Correlation -* Distribution -* Geospatial -* Overview + Detail -* Part to Whole -* Ranking +- Change Over Time +- Comparison +- Correlation +- Distribution +- Geospatial +- Overview + Detail +- Part to Whole +- Ranking Power your most demanding visualizations with Infragistics Angular charting! @@ -26,13 +26,13 @@ Power your most demanding visualizations with Infragistics Angular charting! The Angular product has over 65 different chart and graph types for any scenario – from a single chart display to an interactive dashboard. You can create Angular charts like Pie, Bar, Area, Line, Point, Stacked, Donut, Scatter, Gauge, Polar, Treemap, Stock, Financial, Geospatial Maps and more for your mobile or web apps. The benefit of our Angular chart vs. others is full support for features like: -* Responsive Web Design built in -* Interactive Panning and Zooming with Mouse, Keyboard and Touch -* Full Control of Chart Animation -* Chart Drill-Down Events -* Real-Time Streaming Support -* High-Volume (Millions of Data Points) Support -* Trends Lines and other Data Analysis features +- Responsive Web Design built in +- Interactive Panning and Zooming with Mouse, Keyboard and Touch +- Full Control of Chart Animation +- Chart Drill-Down Events +- Real-Time Streaming Support +- High-Volume (Millions of Data Points) Support +- Trends Lines and other Data Analysis features Built with a modular design of axis, markers, series, legend, and annotation layers, the Angular chart makes it easy to design a render any type of data story. Build a simple chart with a single data series, or build more complex data stories with multiple series of data, with multiple axis in composite views. @@ -332,17 +332,17 @@ alt="Angular Charts Markers, Tooltips, and Templates"/> If you are considering any other Angular Charts on the market, here are a few things to think about: -* We include over 65 Angular chart types and combination charts, with the simplest configuration on the market with our smart data adapter. -* Our charts are optimized on all platforms including Angular, Blazor, jQuery / JavaScript, React, UNO, UWP, WPF, Windows Forms, WebComponents, WinUI, and Xamarin. They support the same API and same features on every platform. -* Our stock chart and financial charting gives you everything you need for a Yahoo Finance or Google Finance-like experience – all with a single line of code. -* We test against everyone elses performance. Everyone says they are fast and can handle lots of data, but we can prove it. See for yourself how we handle high-volume data and real-time data streaming. -* We are here 24x5. Infragistics has global support that is always online. For North America, Asia Pacific, Middle East, and Europe, we are on the clock when you are! -* We have many more UI controls in Angular besides the Charts. We offer a complete Angular solution to build your applications! +- We include over 65 Angular chart types and combination charts, with the simplest configuration on the market with our smart data adapter. +- Our charts are optimized on all platforms including Angular, Blazor, jQuery / JavaScript, React, UNO, UWP, WPF, Windows Forms, WebComponents, WinUI, and Xamarin. They support the same API and same features on every platform. +- Our stock chart and financial charting gives you everything you need for a Yahoo Finance or Google Finance-like experience – all with a single line of code. +- We test against everyone elses performance. Everyone says they are fast and can handle lots of data, but we can prove it. See for yourself how we handle high-volume data and real-time data streaming. +- We are here 24x5. Infragistics has global support that is always online. For North America, Asia Pacific, Middle East, and Europe, we are on the clock when you are! +- We have many more UI controls in Angular besides the Charts. We offer a complete Angular solution to build your applications! -* Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular. -* We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Sketch designs. With Indigo.Design, everything you craft in Sketch from our Indigo Design System matches to our Ignite UI for Angular controls. +- Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular. +- We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Sketch designs. With Indigo.Design, everything you craft in Sketch from our Indigo Design System matches to our Ignite UI for Angular controls. @@ -350,7 +350,7 @@ If you are considering any other Angular Charts on the market, here are a few th All types of chart types mentioned in this topic are implemented in these API components: -* [`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) -* [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) -* [`IgxTreemapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.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) +- [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) +- [`IgxTreemapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html) diff --git a/en/components/charts/features/chart-animations.md b/en/components/charts/features/chart-animations.md index aa75083480..435d6ed9e6 100644 --- a/en/components/charts/features/chart-animations.md +++ b/en/components/charts/features/chart-animations.md @@ -29,15 +29,15 @@ The following example depicts a [Line Chart](../types/line-chart.md) with an ani You can find more information about related chart features in these topics: -* [Chart Annotations](chart-annotations.md) -* [Chart Highlighting](chart-highlighting.md) -* [Chart Tooltips](chart-tooltips.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Tooltips](chart-tooltips.md) ## API References The following is a list of API members mentioned in the above sections: -* [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) -* [`isTransitionInEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isTransitionInEnabled) -* [`transitionInDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInDuration) -* [`transitionInMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) +- [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`isTransitionInEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isTransitionInEnabled) +- [`transitionInDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInDuration) +- [`transitionInMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) diff --git a/en/components/charts/features/chart-annotations.md b/en/components/charts/features/chart-annotations.md index 9f9d184961..f22b4caf74 100644 --- a/en/components/charts/features/chart-annotations.md +++ b/en/components/charts/features/chart-annotations.md @@ -31,9 +31,9 @@ The [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite- Crosshair types include: -* Horizontal -* Vertical -* Both +- Horizontal +- Vertical +- Both The chart's crosshairs can also be configured to snap to data points by setting the [`crosshairsSnapToData`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsSnapToData) property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis. @@ -60,9 +60,9 @@ You can configure this annotation to target a specific series if you want to hav You can also customize this annotation by setting the following properties: -* [`axisAnnotationBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationBackground): This property is used to choose the brush for the annotation's background color. The default is to use the series brush. -* [`axisAnnotationTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationTextColor): This property is used to choose the brush for the annotation's text color. -* [`axisAnnotationOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationOutline): This property is used to choose the brush for the annotation's outline color. +- [`axisAnnotationBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationBackground): This property is used to choose the brush for the annotation's background color. The default is to use the series brush. +- [`axisAnnotationTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationTextColor): This property is used to choose the brush for the annotation's text color. +- [`axisAnnotationOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationOutline): This property is used to choose the brush for the annotation's outline color. The following example demonstrates how to style the final value layer annotation by setting the properties listed above. @@ -92,13 +92,13 @@ You can configure the callouts to target a specific series if you want to have m You can also customize this annotation by setting the following properties: -* [`calloutLeaderBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutLeaderBrush): This property is used to choose the brush for the leader lines for the callouts for the layer. -* [`calloutOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutOutline): This property is used to choose the brush for the annotation's outline color. -* [`calloutBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutBackground): This property is used to choose the brush for the annotation's background color. The default is to use the series brush. -* [`calloutTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutTextColor): This property is used to choose the brush for the annotation's text color. -* [`calloutStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutStrokeThickness): This property is used to choose the thickness for the callout backing. -* [`calloutCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutCornerRadius): This property is used to curve the corners of the callouts. -* [`allowedPositions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#allowedPositions): This property is used to choose which positions that the callout layer is allowed to use. eg. top, bottom +- [`calloutLeaderBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutLeaderBrush): This property is used to choose the brush for the leader lines for the callouts for the layer. +- [`calloutOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutOutline): This property is used to choose the brush for the annotation's outline color. +- [`calloutBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutBackground): This property is used to choose the brush for the annotation's background color. The default is to use the series brush. +- [`calloutTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutTextColor): This property is used to choose the brush for the annotation's text color. +- [`calloutStrokeThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutStrokeThickness): This property is used to choose the thickness for the callout backing. +- [`calloutCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutCornerRadius): This property is used to curve the corners of the callouts. +- [`allowedPositions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#allowedPositions): This property is used to choose which positions that the callout layer is allowed to use. eg. top, bottom The following example demonstrates how to style the callout layer annotations by setting the properties listed above: @@ -126,5 +126,5 @@ The following example demonstrates how to style the callout layer annotations by The following is a list of API members mentioned in the above sections: -* [`crosshairsSnapToData`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsSnapToData) -* [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`crosshairsSnapToData`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsSnapToData) +- [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) diff --git a/en/components/charts/features/chart-axis-gridlines.md b/en/components/charts/features/chart-axis-gridlines.md index c8e4ddb3a5..11162a4d05 100644 --- a/en/components/charts/features/chart-axis-gridlines.md +++ b/en/components/charts/features/chart-axis-gridlines.md @@ -110,8 +110,8 @@ You can customize how the axis tickmarks are displayed in our Angular chats by s You can find more information about related chart features in these topics: -* [Axis Layout](chart-axis-layouts.md) -* [Axis Options](chart-axis-options.md) +- [Axis Layout](chart-axis-layouts.md) +- [Axis Options](chart-axis-options.md) ## API References diff --git a/en/components/charts/features/chart-axis-layouts.md b/en/components/charts/features/chart-axis-layouts.md index e0cd976d5a..355a92da1c 100644 --- a/en/components/charts/features/chart-axis-layouts.md +++ b/en/components/charts/features/chart-axis-layouts.md @@ -69,8 +69,8 @@ The following example shows a Sin and Cos wave represented by a [Scatter Spline You can find more information about related chart features in these topics: -* [Axis Gridlines](chart-axis-gridlines.md) -* [Axis Options](chart-axis-options.md) +- [Axis Gridlines](chart-axis-gridlines.md) +- [Axis Options](chart-axis-options.md) ## API References diff --git a/en/components/charts/features/chart-axis-options.md b/en/components/charts/features/chart-axis-options.md index 4bfa088b6f..f0564466c1 100644 --- a/en/components/charts/features/chart-axis-options.md +++ b/en/components/charts/features/chart-axis-options.md @@ -48,7 +48,7 @@ After setting the [`autoMarginAndAngleUpdateMode`]({environment:dvApiBaseUrl}/pr Custom label formats such as [`IgxNumberFormatSpecifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxnumberformatspecifier.html) and [`IgxDateTimeFormatSpecifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxdatetimeformatspecifier.html) can be added to each axis via the `XAxisLabelFormatSpecifier` and `YAxisLabelFormatSpecifier` collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the [`yAxisLabelFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelFormat) or [`xAxisLabelFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelFormat) need to be set to data item's property name on the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), eg. `{Date}`. For the [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`. -The following example formats the yAxis with a [`IgxNumberFormatSpecifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxnumberformatspecifier.html) to reprerent $USD prices for top box office movies in the United States. +The following example formats the yAxis with a [`IgxNumberFormatSpecifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxnumberformatspecifier.html) to represent $USD prices for top box office movies in the United States. \[!Note] > Chart Aggregation will not work when using [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) | [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties). These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. diff --git a/en/components/charts/features/chart-data-annotations.md b/en/components/charts/features/chart-data-annotations.md index 761b210b79..5183591bb2 100644 --- a/en/components/charts/features/chart-data-annotations.md +++ b/en/components/charts/features/chart-data-annotations.md @@ -100,13 +100,13 @@ For example, you can use DataAnnotationBandLayer to annotate range of growth in The following is a list of API members mentioned in the above sections: -* `TargetAxis`: This property specifies which axis should have an enabled DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. -* `DataSource`: This property binds data to the annotation layer to provide the precise shape. -* `StartValueXMemberPath`: This property is a mapping to the name of the data column with x-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. -* `StartValueYMemberPath`: This property is a mapping to the name of data column with y-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. -* `EndValueXMemberPath`: This property is a mapping to the data column with x-positions for the end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. -* `EndValueYMemberPath`: This property is a mapping to the data column with y-positions for end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. -* `StartLabelXMemberPath`: This property is a mapping to the data column representing the overlay label for the starting position of the xAxis along the axis. -* `StartLabelXDisplayMode` | `StartLabelYDisplayMode` | `EndLabelXDisplayMode` | `EndLabelYDisplayMode` | `CenterLabelXDisplayMode`: These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label. -* `StartLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the starting position of [`IgxDataAnnotationBandLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html), [`IgxDataAnnotationLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html), [`IgxDataAnnotationRectLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) on the y-axis. -* `EndLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the ending position of [`IgxDataAnnotationBandLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html), [`IgxDataAnnotationLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html), [`IgxDataAnnotationRectLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) on the y-axis. +- `TargetAxis`: This property specifies which axis should have an enabled DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `DataSource`: This property binds data to the annotation layer to provide the precise shape. +- `StartValueXMemberPath`: This property is a mapping to the name of the data column with x-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `StartValueYMemberPath`: This property is a mapping to the name of data column with y-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `EndValueXMemberPath`: This property is a mapping to the data column with x-positions for the end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `EndValueYMemberPath`: This property is a mapping to the data column with y-positions for end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `StartLabelXMemberPath`: This property is a mapping to the data column representing the overlay label for the starting position of the xAxis along the axis. +- `StartLabelXDisplayMode` | `StartLabelYDisplayMode` | `EndLabelXDisplayMode` | `EndLabelYDisplayMode` | `CenterLabelXDisplayMode`: These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label. +- `StartLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the starting position of [`IgxDataAnnotationBandLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html), [`IgxDataAnnotationLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html), [`IgxDataAnnotationRectLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) on the y-axis. +- `EndLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the ending position of [`IgxDataAnnotationBandLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html), [`IgxDataAnnotationLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html), [`IgxDataAnnotationRectLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) on the y-axis. diff --git a/en/components/charts/features/chart-data-filtering.md b/en/components/charts/features/chart-data-filtering.md index 4c04e44e75..7be6ab3e82 100644 --- a/en/components/charts/features/chart-data-filtering.md +++ b/en/components/charts/features/chart-data-filtering.md @@ -29,7 +29,7 @@ The following example depicts a [Column Chart](../types/column-chart.md) of annu
-The [`initialFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialFilter) property is a string that requires the following syntax in order to filter properly. The value requires sets of parenthesesthat include both the filter expression definition, column and value associated with the record(s) filtering in. +The [`initialFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialFilter) property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in. eg. To show all countries that start with the letter B: @@ -43,15 +43,15 @@ eg. Concatenating more than one expression: You can find more information about related chart features in these topics: -* [Chart Annotations](chart-annotations.md) -* [Chart Highlighting](chart-highlighting.md) -* [Chart Tooltips](chart-tooltips.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Tooltips](chart-tooltips.md) ## API References The following is a list of API members mentioned in the above sections: -* [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) -* [`isTransitionInEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isTransitionInEnabled) -* [`transitionInDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInDuration) -* [`transitionInMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) +- [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`isTransitionInEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isTransitionInEnabled) +- [`transitionInDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInDuration) +- [`transitionInMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) diff --git a/en/components/charts/features/chart-data-legend.md b/en/components/charts/features/chart-data-legend.md index 41e8c8b78d..79f072b275 100644 --- a/en/components/charts/features/chart-data-legend.md +++ b/en/components/charts/features/chart-data-legend.md @@ -94,7 +94,7 @@ Legend items can be positioned in a vertical or table structure via the [`layout eg. - +Layout Mode ## Angular Data Legend Styling @@ -146,34 +146,34 @@ By default, DataLegend will hide names of groups, but you can display group name Several properties are exposed including grouping portions of the legend. -* `GroupRowMargin` -* `GroupTextMargin` -* [`groupTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#groupTextColor) -* `GroupTextFontSize` -* `GroupTextFontFamily` -* `GroupTextFontStyle` -* `GroupTextFontStretch` -* `GroupTextFontWeight` -* `HeaderTextMargin` -* [`headerTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerTextColor) -* `HeaderTextFontSize` -* `HeaderTextFontFamily` -* `HeaderTextFontStyle` -* `HeaderTextFontStretch` -* `HeaderTextFontWeight` +- `GroupRowMargin` +- `GroupTextMargin` +- [`groupTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#groupTextColor) +- `GroupTextFontSize` +- `GroupTextFontFamily` +- `GroupTextFontStyle` +- `GroupTextFontStretch` +- `GroupTextFontWeight` +- `HeaderTextMargin` +- [`headerTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerTextColor) +- `HeaderTextFontSize` +- `HeaderTextFontFamily` +- `HeaderTextFontStyle` +- `HeaderTextFontStretch` +- `HeaderTextFontWeight` The [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) has several events that fire when rendering their corresponding row, even during mouse interactions where the values are updating. These events are listed below with a description of what they are designed to be used for: -* `StyleGroupRow`: This event fires for each group to style text displayed in group rows. -* `StyleHeaderRow`: This event fires when rendering the header row. -* `StyleSeriesRow`: This event fires once for each series row, which allows conditional styling of the values of the series. -* `StyleSeriesColumn`: This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart. -* `StyleSummaryRow`: This event fires once when rendering the summary row. -* `StyleSummaryColumn`: This event fires once when rendering the summary column. +- `StyleGroupRow`: This event fires for each group to style text displayed in group rows. +- `StyleHeaderRow`: This event fires when rendering the header row. +- `StyleSeriesRow`: This event fires once for each series row, which allows conditional styling of the values of the series. +- `StyleSeriesColumn`: This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart. +- `StyleSummaryRow`: This event fires once when rendering the summary row. +- `StyleSummaryColumn`: This event fires once when rendering the summary column. Some of the events exposes a [`IgxDataLegendStylingRowEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendstylingroweventargs.html) parameter as its arguments, which lets you customize each item's text, text color, and the overall visibility of the row. The event arguments also expose event-specific properties. For example, since the `StyleSeriesRow` event fires for each series, the event arguments will return the series index and series title for the row that represents the series. -`StyleSummaryColumn` and `SeriesStyleColumn` events expose a [`IgxDataLegendStylingColumnEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendstylingcolumneventargs.html) parameter as its arguments, for customizing each field in the series. The event arguments also expose event-specific properties such as column index and value member related properies about the columns. +`StyleSummaryColumn` and `SeriesStyleColumn` events expose a [`IgxDataLegendStylingColumnEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendstylingcolumneventargs.html) parameter as its arguments, for customizing each field in the series. The event arguments also expose event-specific properties such as column index and value member related properties about the columns. +Layout Mode ## Angular Data Tooltip Styling @@ -150,41 +150,41 @@ The following example demonstrates usage of the styling properties mentioned abo Several properties are exposed including grouping portions of the tooltip. -* `GroupTextMargin` -* [`groupTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#groupTextColor) -* `GroupTextFontSize` -* `GroupTextFontFamily` -* `GroupTextFontStyle` -* `GroupTextFontStretch` -* `GroupTextFontWeight` -* `HeaderTextMargin` -* [`headerTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerTextColor) -* `HeaderTextFontSize` -* `HeaderTextFontFamily` -* `HeaderTextFontStyle` -* `HeaderTextFontStretch` -* `HeaderTextFontWeight` +- `GroupTextMargin` +- [`groupTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#groupTextColor) +- `GroupTextFontSize` +- `GroupTextFontFamily` +- `GroupTextFontStyle` +- `GroupTextFontStretch` +- `GroupTextFontWeight` +- `HeaderTextMargin` +- [`headerTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerTextColor) +- `HeaderTextFontSize` +- `HeaderTextFontFamily` +- `HeaderTextFontStyle` +- `HeaderTextFontStretch` +- `HeaderTextFontWeight` ## API References -* [`dataToolTipExcludedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipExcludedColumns) -* [`dataToolTipGroupedPositionModeX`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupedPositionModeX) -* [`dataToolTipGroupedPositionModeY`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupedPositionModeY) -* [`dataToolTipGroupingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupingMode) -* [`dataToolTipHeaderText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipHeaderText) -* [`dataToolTipIncludedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipIncludedColumns) -* [`dataToolTipLabelTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipLabelTextColor) -* [`IgxDataToolTipLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) -* [`dataToolTipSummaryTitleText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipSummaryTitleText) -* [`dataToolTipSummaryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipSummaryType) -* [`dataToolTipTitleTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipTitleTextColor) -* [`dataToolTipUnitsTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipUnitsTextColor) -* [`dataToolTipUnitsText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipUnitsText) -* [`dataToolTipValueFormatAbbreviation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatAbbreviation) -* [`dataToolTipValueFormatCulture`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatCulture) -* [`dataToolTipValueFormatMaxFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) -* [`dataToolTipValueFormatMaxFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) -* [`dataToolTipValueFormatMinFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMinFractions) -* [`dataToolTipValueFormatMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMode) -* [`dataToolTipValueTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueTextColor) -* `MemberAsLegendLabel` +- [`dataToolTipExcludedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipExcludedColumns) +- [`dataToolTipGroupedPositionModeX`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupedPositionModeX) +- [`dataToolTipGroupedPositionModeY`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupedPositionModeY) +- [`dataToolTipGroupingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupingMode) +- [`dataToolTipHeaderText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipHeaderText) +- [`dataToolTipIncludedColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipIncludedColumns) +- [`dataToolTipLabelTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipLabelTextColor) +- [`IgxDataToolTipLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) +- [`dataToolTipSummaryTitleText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipSummaryTitleText) +- [`dataToolTipSummaryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipSummaryType) +- [`dataToolTipTitleTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipTitleTextColor) +- [`dataToolTipUnitsTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipUnitsTextColor) +- [`dataToolTipUnitsText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipUnitsText) +- [`dataToolTipValueFormatAbbreviation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatAbbreviation) +- [`dataToolTipValueFormatCulture`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatCulture) +- [`dataToolTipValueFormatMaxFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) +- [`dataToolTipValueFormatMaxFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) +- [`dataToolTipValueFormatMinFractions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMinFractions) +- [`dataToolTipValueFormatMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMode) +- [`dataToolTipValueTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueTextColor) +- `MemberAsLegendLabel` diff --git a/en/components/charts/features/chart-highlight-filter.md b/en/components/charts/features/chart-highlight-filter.md index 24098b8db8..2a82676827 100644 --- a/en/components/charts/features/chart-highlight-filter.md +++ b/en/components/charts/features/chart-highlight-filter.md @@ -85,9 +85,9 @@ HighlightedHighMemberPath, HighlightedLowMemberPath, HighlightedOpenMemberPath, You can find more information about related chart features in these topics: -* [Chart Highlighting](chart-highlighting.md) -* [Chart Data Tooltip](chart-data-tooltip.md) -* [Chart Data Aggregations](chart-data-aggregations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Data Tooltip](chart-data-tooltip.md) +- [Chart Data Aggregations](chart-data-aggregations.md) ## API References diff --git a/en/components/charts/features/chart-highlighting.md b/en/components/charts/features/chart-highlighting.md index d3dba64af4..70efb2d57e 100644 --- a/en/components/charts/features/chart-highlighting.md +++ b/en/components/charts/features/chart-highlighting.md @@ -58,11 +58,11 @@ The following example demonstrates the legend series highlighting Angular chart. The Ignite UI for Angular [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) can enable three types of highlighting when hovering over data items. -1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the [`isSeriesHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#isSeriesHighlightingEnabled) property to true. +1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the [`isSeriesHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#isSeriesHighlightingEnabled) property to true. -2. Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the [`isItemHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isItemHighlightingEnabled) property to true. +2. Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the [`isItemHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isItemHighlightingEnabled) property to true. -3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the [`isCategoryHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isCategoryHighlightingEnabled) property to true. +3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the [`isCategoryHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isCategoryHighlightingEnabled) property to true. The following example demonstrates the different highlighting layers that are available on the Angular chart. @@ -77,20 +77,20 @@ The following example demonstrates the different highlighting layers that are av You can find more information about related chart features in these topics: -* [Chart Animations](chart-animations.md) -* [Chart Annotations](chart-annotations.md) -* [Chart Tooltips](chart-tooltips.md) +- [Chart Animations](chart-animations.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Tooltips](chart-tooltips.md) ## API References The following is a list of API members mentioned in the above sections: -* [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode) -* [`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) -* `LegendHighlightingBehavior` -* [`isCategoryHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isCategoryHighlightingEnabled) -* [`isItemHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isItemHighlightingEnabled) -* [`isSeriesHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#isSeriesHighlightingEnabled) -* [`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) -* [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) +- [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode) +- [`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) +- `LegendHighlightingBehavior` +- [`isCategoryHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isCategoryHighlightingEnabled) +- [`isItemHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isItemHighlightingEnabled) +- [`isSeriesHighlightingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#isSeriesHighlightingEnabled) +- [`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) +- [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) diff --git a/en/components/charts/features/chart-markers.md b/en/components/charts/features/chart-markers.md index 61297a9eb0..507a370323 100644 --- a/en/components/charts/features/chart-markers.md +++ b/en/components/charts/features/chart-markers.md @@ -10,7 +10,7 @@ namespace: Infragistics.Controls.Charts In Ignite UI for Angular, markers are visual elements that display the values of data points in the chart's plot area. Markers help your end-users immediately identify a data point's value even if the value falls between major or minor grid lines. -# Angular Chart Marker Example +## Angular Chart Marker Example In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the [`MarkerType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.markertype.html) property to [`Circle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.markertype.html#Circle) enum value. @@ -25,7 +25,7 @@ The colors of the markers are also managed by setting the [`markerBrushes`]({env
-# Angular Chart Marker Templates +## Angular Chart Marker Templates In addition to marker properties, you can implement your own marker by setting a function to the `MarkerTemplate` property of a series rendered in the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control as it is demonstrated in example below. @@ -42,14 +42,14 @@ In addition to marker properties, you can implement your own marker by setting a You can find more information about related chart features in these topics: -* [Chart Annotations](chart-annotations.md) -* [Chart Highlighting](chart-highlighting.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) ## API References The following is a list of API members mentioned in the above sections: -* [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) -* [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) -* [`MarkerType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.markertype.html) -* [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) +- [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) +- [`MarkerType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.markertype.html) +- [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) diff --git a/en/components/charts/features/chart-navigation.md b/en/components/charts/features/chart-navigation.md index 22d29c4d11..6f9f539ae5 100644 --- a/en/components/charts/features/chart-navigation.md +++ b/en/components/charts/features/chart-navigation.md @@ -35,11 +35,11 @@ It is also possible to zoom or pan simply by clicking the mouse or using touch. Navigation in the Angular data chart can happen with either touch, the mouse or the keyboard. The following operations can be invoked using touch, mouse or keyboard operations by default: -* **Panning**: Using 🡐 🡒 🡑 🡓 arrow keys on the keyboard or holding the SHIFT key, clicking and dragging with the mouse or pressing and moving your finger via touch. -* **Zoom In**: Using the PAGE UP key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch. -* **Zoom Out**: Using the PAGE DOWN key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch. -* **Fit to Chart Plot Area**: Using the HOME key on the keyboard. There is no mouse or touch operation for this. -* **Area Zoom**: Click and drag the mouse within the plot area with the [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property set to its default - `DragZoom`. +- **Panning**: Using 🡐 🡒 🡑 🡓 arrow keys on the keyboard or holding the SHIFT key, clicking and dragging with the mouse or pressing and moving your finger via touch. +- **Zoom In**: Using the PAGE UP key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch. +- **Zoom Out**: Using the PAGE DOWN key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch. +- **Fit to Chart Plot Area**: Using the HOME key on the keyboard. There is no mouse or touch operation for this. +- **Area Zoom**: Click and drag the mouse within the plot area with the [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property set to its default - `DragZoom`. The zoom and pan operations can also be enabled by using modifier keys by setting the [`dragModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#dragModifier) and [`panModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#panModifier) properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed: @@ -57,10 +57,10 @@ The chart can be scrolled by enabling the [`verticalViewScrollbarMode`]({environ These can be configured to the following options -* `Persistent` - The scrollbars always stay visible, as long as the chart is zoomed in, and fade away when fully zoomed out. -* `Fading` - The scrollbars disappear after use and reappear when the mouse is near their location. -* `FadeToLine` - The scrollbars are reduced to a thinner line when zooming is not in use. -* `None` - Default, no scrollbars are shown. +- `Persistent` - The scrollbars always stay visible, as long as the chart is zoomed in, and fade away when fully zoomed out. +- `Fading` - The scrollbars disappear after use and reappear when the mouse is near their location. +- `FadeToLine` - The scrollbars are reduced to a thinner line when zooming is not in use. +- `None` - Default, no scrollbars are shown. The following example demonstrates enabling scrollbars. @@ -80,28 +80,28 @@ The following example demonstrates enabling scrollbars. The Angular data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties: -* [`windowPositionHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowPositionHorizontal): A numeric value describing the X portion of the content view rectangle displayed by the data chart. -* [`windowPositionVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowPositionVertical): A numeric value describing the Y portion of the content view rectangle displayed by the data chart. -* [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect): A `Rect` object representing a rectangle that represents the portion of the chart that is currently in view. For example, a [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) of "0, 0, 1, 1" would be the entirety of the data chart. -* [`windowScaleHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#windowScaleHorizontal): A numeric value describing the width portion of the content view rectangle displayed by the data chart. -* [`windowScaleVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#windowScaleVertical): A numeric value describing the height portion of the content view rectangle displayed by the data chart. +- [`windowPositionHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowPositionHorizontal): A numeric value describing the X portion of the content view rectangle displayed by the data chart. +- [`windowPositionVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowPositionVertical): A numeric value describing the Y portion of the content view rectangle displayed by the data chart. +- [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect): A `Rect` object representing a rectangle that represents the portion of the chart that is currently in view. For example, a [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) of "0, 0, 1, 1" would be the entirety of the data chart. +- [`windowScaleHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#windowScaleHorizontal): A numeric value describing the width portion of the content view rectangle displayed by the data chart. +- [`windowScaleVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#windowScaleVertical): A numeric value describing the height portion of the content view rectangle displayed by the data chart. ## Additional Resources You can find more information about related chart features in these topics: -* [Chart Tooltips](chart-tooltips.md) -* [Chart Trendlines](chart-trendlines.md) +- [Chart Tooltips](chart-tooltips.md) +- [Chart Trendlines](chart-trendlines.md) ## API References The following is a list of API members mentioned in the above sections: -* [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) -* [`dragModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#dragModifier) -* [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) -* [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) -* [`panModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#panModifier) -* [`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) -* [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) +- [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) +- [`dragModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#dragModifier) +- [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) +- [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) +- [`panModifier`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#panModifier) +- [`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) +- [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) diff --git a/en/components/charts/features/chart-overlays.md b/en/components/charts/features/chart-overlays.md index 18304cf3f1..bdacce141b 100644 --- a/en/components/charts/features/chart-overlays.md +++ b/en/components/charts/features/chart-overlays.md @@ -43,13 +43,13 @@ Applying the [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/igni In the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), this is done by adding a [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) to the [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) collection of the chart and then setting the `ValueMode` property to one of the [`ValueLayerValueMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) enumerations. Each of these enumerations and what they mean is listed below: -* [`Auto`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Auto): The default value mode of the [`ValueLayerValueMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) enumeration. -* [`Average`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Average): Applies potentially multiple value lines to call out the average value of each series plotted in the chart. -* [`GlobalAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#GlobalAverage): Applies a single value line to call out the average of all of the series values in the chart. -* [`GlobalMaximum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#GlobalMaximum): Applies a single value line to call out the absolute maximum value of all of the series values in the chart. -* [`GlobalMinimum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#GlobalMinimum): Applies a single value line to call out the absolute minimum value of all of the series values in the chart. -* [`Maximum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Maximum): Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart. -* [`Minimum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Minimum): Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart. +- [`Auto`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Auto): The default value mode of the [`ValueLayerValueMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) enumeration. +- [`Average`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Average): Applies potentially multiple value lines to call out the average value of each series plotted in the chart. +- [`GlobalAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#GlobalAverage): Applies a single value line to call out the average of all of the series values in the chart. +- [`GlobalMaximum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#GlobalMaximum): Applies a single value line to call out the absolute maximum value of all of the series values in the chart. +- [`GlobalMinimum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#GlobalMinimum): Applies a single value line to call out the absolute minimum value of all of the series values in the chart. +- [`Maximum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Maximum): Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart. +- [`Minimum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Minimum): Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart. If you want to prevent any particular series from being taken into account when using the [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) element, you can set the [`targetSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html#targetSeries) property on the layer. This will force the layer to target the series that you define. You can have as many [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) elements within a single [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) as you want. @@ -92,30 +92,30 @@ the [`IgxDataAnnotationSliceLayerComponent`]({environment:dvApiBaseUrl}/products You can find more information about related chart types in these topics: -* [Chart Annotations](chart-annotations.md) -* [Column Chart](../types/area-chart.md) -* [Line Chart](../types/line-chart.md) -* [Stock Chart](../types/stock-chart.md) +- [Chart Annotations](chart-annotations.md) +- [Column Chart](../types/area-chart.md) +- [Line Chart](../types/line-chart.md) +- [Stock Chart](../types/stock-chart.md) ## API References The following is a list of API members mentioned in the above sections: -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) -* `ItemsSource` -* [`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html) -* [`axis`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#axis) -* [`brush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#brush) -* `IsAxisAnnotationsEnabled` -* [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) -* [`thickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#thickness) -* [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) -* [`ValueLayerValueMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) -* [`valueLines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) -* [`overlayText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayText) -* `TargetAxis` -* `OverlayTextMemberPath` -* [`overlayTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextColor) -* [`overlayTextBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextBackground) -* [`overlayTextBorderColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextBorderColor) -* [`overlayTextLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextLocation) +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- `ItemsSource` +- [`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html) +- [`axis`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#axis) +- [`brush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#brush) +- `IsAxisAnnotationsEnabled` +- [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) +- [`thickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#thickness) +- [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) +- [`ValueLayerValueMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) +- [`valueLines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) +- [`overlayText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayText) +- `TargetAxis` +- `OverlayTextMemberPath` +- [`overlayTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextColor) +- [`overlayTextBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextBackground) +- [`overlayTextBorderColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextBorderColor) +- [`overlayTextLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextLocation) diff --git a/en/components/charts/features/chart-performance.md b/en/components/charts/features/chart-performance.md index be53ac4850..79e2a654df 100644 --- a/en/components/charts/features/chart-performance.md +++ b/en/components/charts/features/chart-performance.md @@ -48,9 +48,9 @@ This section lists guidelines and chart features that add to the overhead and pr If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using Angular [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with one of the following type of series which where designed for specially for that purpose. -* [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart) instead of [Category Point Chart](../types/point-chart.md) or [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart) -* [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) instead of [Category Line Chart](../types/line-chart.md#angular-line-chart-example) or [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart) -* [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) instead of [Category Area Chart](../types/area-chart.md#angular-area-chart-example) or [Column Chart](../types/column-chart.md#angular-column-chart-example) +- [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart) instead of [Category Point Chart](../types/point-chart.md) or [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart) +- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) instead of [Category Line Chart](../types/line-chart.md#angular-line-chart-example) or [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart) +- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) instead of [Category Area Chart](../types/area-chart.md#angular-area-chart-example) or [Column Chart](../types/column-chart.md#angular-column-chart-example) ### Data Structure @@ -104,7 +104,7 @@ The following table lists chart types in order from the fastest performance to s | Chart Group | Chart Type | | ----------------|--------------------------------- | -| Pie Charts | - [Pie Chart](../types/pie-chart.md)
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart)
+| Pie Charts | - [Pie Chart](../types/pie-chart.md)
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart)
| | Line Charts | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
| | Area Charts | - [Category Area Chart](../types/area-chart.md#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.md#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.md#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
| | Column Charts | - [Column Chart](../types/column-chart.md#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.md#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#angular-range-column-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) | @@ -316,10 +316,10 @@ Setting the [`zoomSliderType`]({environment:dvApiBaseUrl}/products/ignite-ui-ang Setting the [`volumeType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType) property can have the following impact on chart performance: -* [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#None) - is the least expensive since it does not display the volume pane. -* [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Line) - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources. -* [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Area) - is more expensive to render than the [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Line) volume type. -* [`Column`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Column) - is more expensive to render than the [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Area) volume type and it is recommended when rendering volume data of 1-3 stocks. +- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#None) - is the least expensive since it does not display the volume pane. +- [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Line) - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources. +- [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Area) - is more expensive to render than the [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Line) volume type. +- [`Column`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Column) - is more expensive to render than the [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Area) volume type and it is recommended when rendering volume data of 1-3 stocks. ## Performance in Data Chart @@ -348,43 +348,43 @@ Also, adding a lot of series to the [`IgxSeriesComponent`]({environment:dvApiBas You can find more information about related chart types in these topics: -* [Area Chart](../types/area-chart.md) -* [Bar Chart](../types/bar-chart.md) -* [Bubble Chart](../types/bubble-chart.md) -* [Column Chart](../types/column-chart.md) -* [Donut Chart](../types/donut-chart.md) -* [Pie Chart](../types/pie-chart.md) -* [Point Chart](../types/point-chart.md) -* [Polar Chart](../types/polar-chart.md) -* [Radial Chart](../types/radial-chart.md) -* [Shape Chart](../types/shape-chart.md) -* [Spline Chart](../types/spline-chart.md) -* [Scatter Chart](../types/scatter-chart.md) -* [Stacked Chart](../types/stacked-chart.md) -* [Step Chart](../types/shape-chart.md) -* [Stock Chart](../types/stock-chart.md) -* [Chart Animations](chart-animations.md) -* [Chart Annotations](chart-annotations.md) -* [Chart Highlighting](chart-highlighting.md) -* [Chart Markers](chart-markers.md) -* [Chart Overlays](chart-overlays.md) -* [Chart Trendlines](chart-trendlines.md) +- [Area Chart](../types/area-chart.md) +- [Bar Chart](../types/bar-chart.md) +- [Bubble Chart](../types/bubble-chart.md) +- [Column Chart](../types/column-chart.md) +- [Donut Chart](../types/donut-chart.md) +- [Pie Chart](../types/pie-chart.md) +- [Point Chart](../types/point-chart.md) +- [Polar Chart](../types/polar-chart.md) +- [Radial Chart](../types/radial-chart.md) +- [Shape Chart](../types/shape-chart.md) +- [Spline Chart](../types/spline-chart.md) +- [Scatter Chart](../types/scatter-chart.md) +- [Stacked Chart](../types/stacked-chart.md) +- [Step Chart](../types/shape-chart.md) +- [Stock Chart](../types/stock-chart.md) +- [Chart Animations](chart-animations.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Markers](chart-markers.md) +- [Chart Overlays](chart-overlays.md) +- [Chart Trendlines](chart-trendlines.md) ## API References The following table lists API members mentioned in above sections: -* [`resolution`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#resolution) -* [`indicatorTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes) -* [`overlayTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#overlayTypes) -* [`volumeType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType) -* [`zoomSliderType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) -* [`xAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) -* [`yAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) -* [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval) -* [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) -* [`xAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval) -* [`yAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinorInterval) -* [`xAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) -* [`yAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) -* [`yAxisIsLogarithmic`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisIsLogarithmic) +- [`resolution`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#resolution) +- [`indicatorTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes) +- [`overlayTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#overlayTypes) +- [`volumeType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType) +- [`zoomSliderType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) +- [`xAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) +- [`yAxisMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) +- [`xAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval) +- [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) +- [`xAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval) +- [`yAxisMinorInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinorInterval) +- [`xAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) +- [`yAxisLabelVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) +- [`yAxisIsLogarithmic`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisIsLogarithmic) diff --git a/en/components/charts/features/chart-synchronization.md b/en/components/charts/features/chart-synchronization.md index 3bc18d5bd8..9facf6addc 100644 --- a/en/components/charts/features/chart-synchronization.md +++ b/en/components/charts/features/chart-synchronization.md @@ -35,9 +35,9 @@ Note that in order to synchronize either vertically and/or horizontally, you wil The following is a list of API members mentioned in the above sections: -* [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) -* [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) -* `SyncChannel` -* `SynchronizeHorizontally` -* `SynchronizeVertically` -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) +- [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) +- `SyncChannel` +- `SynchronizeHorizontally` +- `SynchronizeVertically` +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) diff --git a/en/components/charts/features/chart-tooltips.md b/en/components/charts/features/chart-tooltips.md index 37456e080e..417b0c3fe8 100644 --- a/en/components/charts/features/chart-tooltips.md +++ b/en/components/charts/features/chart-tooltips.md @@ -68,18 +68,18 @@ This example shows how to create custom tooltips for each series in Angular Data You can find more information about related chart features in these topics: -* [Chart Annotations](chart-annotations.md) -* [Chart Markers](chart-markers.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Markers](chart-markers.md) ## API References The [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) components share the following API properties: -* [`toolTipType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType) +- [`toolTipType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType) In the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component, you can use the following API components and properties: -* [`IgxDataToolTipLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) -* [`IgxItemToolTipLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxitemtooltiplayercomponent.html) -* [`IgxCategoryToolTipLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorytooltiplayercomponent.html) -* `ShowDefaultToolTip` +- [`IgxDataToolTipLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) +- [`IgxItemToolTipLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxitemtooltiplayercomponent.html) +- [`IgxCategoryToolTipLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorytooltiplayercomponent.html) +- `ShowDefaultToolTip` diff --git a/en/components/charts/features/chart-trendlines.md b/en/components/charts/features/chart-trendlines.md index 30398a209c..72c199ee15 100644 --- a/en/components/charts/features/chart-trendlines.md +++ b/en/components/charts/features/chart-trendlines.md @@ -14,7 +14,7 @@ Trendlines are off by default, but you can enable them by setting the [`trendLin The trendlines also have the ability to have a dash array applied to them once enabled. This is done by setting the `TrendLineDashArray` property to an array of numbers. The numeric array describes the length of the dashes of the trendline. -# Angular Chart Trendlines Example +## Angular Chart Trendlines Example The following sample depicts a [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) showing the stock trend of Microsoft between 2013 and 2017 with a **QuinticFit** trendline initially applied. There is a drop-down that will allow you to change the type of trendline that is applied, and all possible trendline types are listed within that drop-down. @@ -27,7 +27,7 @@ The following sample depicts a [`IgxFinancialChartComponent`]({environment:dvApi
-# Angular Chart Trendlines Dash Array Example +## Angular Chart Trendlines Dash Array Example The following sample depicts a [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) showing a [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html) with a **QuarticFit** dashed trendline applied via the [`trendLineDashArray`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html#trendLineDashArray) property: @@ -40,13 +40,13 @@ The following sample depicts a [`IgxDataChartComponent`]({environment:dvApiBaseU
-# Angular Chart Trendline Layer +## Angular Chart Trendline Layer The [`IgxTrendLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) is a series type that is designed to display a single trendline type for a target series. The difference between this and the existing trendline features on the existing series types is that since the [`IgxTrendLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) is a series type, you can add more than one of them to the [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) collection of the chart to have multiple trendlines attached to the same series. You can also have the trendline appear in the legend, which was not possible previously. ### Trendline Layer Usage -The [`IgxTrendLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) must be provided with a [`targetSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) and a [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#trendLineType) in order to work properly. The different trendline types that are avilable are the same as the trendlines that are available on the series. +The [`IgxTrendLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) must be provided with a [`targetSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) and a [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#trendLineType) in order to work properly. The different trendline types that are available are the same as the trendlines that are available on the series. If you would like to show the [`IgxTrendLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) in the Legend, you can do so by setting the `UseLegend` property to `true`. @@ -60,32 +60,32 @@ You can also modify the way that the [`IgxTrendLineLayerComponent`]({environment The following are the options for the `AppearanceMode` property: -* `Auto`: This will default to the DashPattern enumeration. -* `BrightnessShift`: The trendline will take the [`targetSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) brush and modify its brightness based on the provided `ShiftAmount`. -* `DashPattern`: The trendline will appear as a dashed line. The frequency of the dashes can be modified by using the `DashArray` property on the [`IgxTrendLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html). -* `OpacityShift`: The trendline will take the [`targetSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) brush and modify its opacity based on the provided `ShiftAmount`. -* `SaturationShift`: The trendline will take the [`targetSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) brush and modify its saturation based on the provided `ShiftAmount`. +- `Auto`: This will default to the DashPattern enumeration. +- `BrightnessShift`: The trendline will take the [`targetSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) brush and modify its brightness based on the provided `ShiftAmount`. +- `DashPattern`: The trendline will appear as a dashed line. The frequency of the dashes can be modified by using the `DashArray` property on the [`IgxTrendLineLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html). +- `OpacityShift`: The trendline will take the [`targetSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) brush and modify its opacity based on the provided `ShiftAmount`. +- `SaturationShift`: The trendline will take the [`targetSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) brush and modify its saturation based on the provided `ShiftAmount`. ## Additional Resources You can find more information about related chart features in these topics: -* [Chart Annotations](chart-annotations.md) -* [Chart Highlighting](chart-highlighting.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) ## API References The [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) components share the following API properties: -* [`trendLineBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineBrushes) -* [`trendLinePeriod`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLinePeriod) -* [`trendLineThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineThickness) -* [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) +- [`trendLineBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineBrushes) +- [`trendLinePeriod`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLinePeriod) +- [`trendLineThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineThickness) +- [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) In the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component, most types of series have the following API properties: -* [`trendLineBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineBrush) -* [`trendLineDashArray`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineDashArray) -* [`trendLinePeriod`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLinePeriod) -* [`trendLineThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineThickness) -* [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineType) +- [`trendLineBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineBrush) +- [`trendLineDashArray`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineDashArray) +- [`trendLinePeriod`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLinePeriod) +- [`trendLineThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineThickness) +- [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineType) diff --git a/en/components/charts/types/area-chart.md b/en/components/charts/types/area-chart.md index 392e13e065..de76beb0f8 100644 --- a/en/components/charts/types/area-chart.md +++ b/en/components/charts/types/area-chart.md @@ -29,31 +29,31 @@ You can create Angular Category Area Chart in the [`IgxCategoryChartComponent`]( There are several common use cases for choosing an Area Chart: -* Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down. -* Need to compare the trends of your data over time. -* Want to show the difference between 2 or more data series. -* Want to show cumulative part-to-whole comparisons of distinct categories. -* Need to show data trends for one or more categories for comparative analysis. -* Need to visualize details time-series data. +- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down. +- Need to compare the trends of your data over time. +- Want to show the difference between 2 or more data series. +- Want to show cumulative part-to-whole comparisons of distinct categories. +- Need to show data trends for one or more categories for comparative analysis. +- Need to visualize details time-series data. ### Area Chart Best Practices -* Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. -* Order time-series data from left to right. -* Use transparent colors to ensure that data that is plotted behind another series is not blocked. +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. +- Use transparent colors to ensure that data that is plotted behind another series is not blocked. ### When Not to Use Area Charts -* You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable. -* Time-series data has similar values (data over the same period). This makes overlapped shaded areas impossible to differentiate. +- You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable. +- Time-series data has similar values (data over the same period). This makes overlapped shaded areas impossible to differentiate. ### Area Chart Data Structure -* The data source must be an array or a list of data items (for single series). -* The data source must be an array of arrays or a list of lists (for multiple series). -* The data source should contain two or more data items in order to render a line between them. -* All data items must contain at least one data column (string or date time). -* All data items must contain at least one numeric data column. +- The data source must be an array or a list of data items (for single series). +- The data source must be an array of arrays or a list of lists (for multiple series). +- The data source should contain two or more data items in order to render a line between them. +- All data items must contain at least one data column (string or date time). +- All data items must contain at least one numeric data column. ## Angular Area Chart with Single Series @@ -83,7 +83,7 @@ Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline C ## Angular Area Chart Styling -Area charts often have semi-transparent fill for their areas, thicker lines and slightly larger markers than usual. Below is an example showing how you can style the Area Chart from earlier accordingly.  +Area charts often have semi-transparent fill for their areas, thicker lines and slightly larger markers than usual. Below is an example showing how you can style the Area Chart from earlier accordingly. -## Advanced Types of Area Charts +## Advanced Types of Step Area Charts The following sections explain more advanced types of Angular Area Charts that can be created using the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control instead of [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control with simplified API. @@ -223,12 +223,12 @@ The Angular Polar Spline Area Chart belongs to a group of [Polar Chart](polar-ch You can find more information about related chart types in these topics: -* [Bar Chart](bar-chart.md) -* [Column Chart](column-chart.md) -* [Polar Chart](polar-chart.md) -* [Radial Chart](radial-chart.md) -* [Spline Chart](spline-chart.md) -* [Stacked Chart](stacked-chart.md) +- [Bar Chart](bar-chart.md) +- [Column Chart](column-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) +- [Spline Chart](spline-chart.md) +- [Stacked Chart](stacked-chart.md) ## API References @@ -244,5 +244,5 @@ The following table lists API members mentioned in above sections: | Polar Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html) | | Stacked Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html) | | Stacked Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineareaseriescomponent.html) | -| Stacked 100% Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) +| Stacked 100% Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100AreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) | | Stacked 100% Spline Area | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100SplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineareaseriescomponent.html) | diff --git a/en/components/charts/types/bar-chart.md b/en/components/charts/types/bar-chart.md index 1c4081dad4..c1086b6f87 100644 --- a/en/components/charts/types/bar-chart.md +++ b/en/components/charts/types/bar-chart.md @@ -29,47 +29,47 @@ You can create Angular Bar Chart in the [`IgxDataChartComponent`]({environment:d Angular Bar Chart includes several variants based on your data or how you want to tell the correct story with your data. These include: -* Grouped Bar Chart -* Stacked Bar Chart -* Polar Bar Chart -* Stacked 100 Bar Chart +- Grouped Bar Chart +- Stacked Bar Chart +- Polar Bar Chart +- Stacked 100 Bar Chart ### Bar Chart Use Cases There are several common use cases for choosing a Bar Chart: -* You need to show trends over time or a numeric value change in a category of data. -* You need to compare data values of 1 or more data series. -* You want to show a part-to-whole comparison. -* You want to show top or bottom percentage of categories. -* Analyzing multiple data points grouped in sub-categories (Stacked Bar). +- You need to show trends over time or a numeric value change in a category of data. +- You need to compare data values of 1 or more data series. +- You want to show a part-to-whole comparison. +- You want to show top or bottom percentage of categories. +- Analyzing multiple data points grouped in sub-categories (Stacked Bar). These use cases are commonly used for the following scenarios: -* Sales Management. -* Inventory Management. -* Stock Charts. -* Any String Value Comparing a Numeric Value or Time-Series Value. +- Sales Management. +- Inventory Management. +- Stock Charts. +- Any String Value Comparing a Numeric Value or Time-Series Value. -### Bar Chart Best Practices: +### Bar Chart Best Practices -* Start you numeric Axis at 0. -* Use a single color for the bars. -* Be sure the space separating each bar is 1/2 the width of the bar itself. -* Be sure ranking or comparing ordered categories (items) are sorted in increasing or decreasing order. -* Right-align category values on the Y-Axis (left side labels of chart) for readability. +- Start you numeric Axis at 0. +- Use a single color for the bars. +- Be sure the space separating each bar is 1/2 the width of the bar itself. +- Be sure ranking or comparing ordered categories (items) are sorted in increasing or decreasing order. +- Right-align category values on the Y-Axis (left side labels of chart) for readability. ### When Not to Use Bar Chart -* You have too much data so the Y-Axis can't fit in the space or is not legible. -* You need a detailed Time-Series analysis - consider a [Line Chart](line-chart.md) with a Time-Series for this type of data. +- You have too much data so the Y-Axis can't fit in the space or is not legible. +- You need a detailed Time-Series analysis - consider a [Line Chart](line-chart.md) with a Time-Series for this type of data. -### Bar Chart Data Structure: +### Bar Chart Data Structure -* The data source must be an array or a list of data items. -* The data source must contain at least one data item. -* The list must contain at least one data column (string or date time). -* The list must contain at least one numeric data column. +- The data source must be an array or a list of data items. +- The data source must contain at least one data item. +- The list must contain at least one data column (string or date time). +- The list must contain at least one numeric data column.
@@ -148,20 +148,20 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: You can find more information about related chart types in these topics: -* [Area Chart](area-chart.md) -* [Column Chart](column-chart.md) -* [Line Chart](line-chart.md) -* [Spline Chart](spline-chart.md) -* [Stacked Chart](stacked-chart.md) +- [Area Chart](area-chart.md) +- [Column Chart](column-chart.md) +- [Line Chart](line-chart.md) +- [Spline Chart](spline-chart.md) +- [Stacked Chart](stacked-chart.md) ## API References The following table lists API members mentioned in the above sections: -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) -* `ItemsSource` -* [`IgxBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html) -* [`IgxCalloutLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html) -* [`IgxStackedBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) -* [`IgxStacked100BarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html) -* [`IgxStackedBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- `ItemsSource` +- [`IgxBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html) +- [`IgxCalloutLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html) +- [`IgxStackedBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) +- [`IgxStacked100BarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html) +- [`IgxStackedBarSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) diff --git a/en/components/charts/types/bubble-chart.md b/en/components/charts/types/bubble-chart.md index 6168a1bd77..7363e6189e 100644 --- a/en/components/charts/types/bubble-chart.md +++ b/en/components/charts/types/bubble-chart.md @@ -64,24 +64,24 @@ In Angular Bubble Chart, you can customize shape of bubble markers using [`marke ## Additional Resources -* [Scatter Chart](scatter-chart.md) -* [Shape Chart](shape-chart.md) +- [Scatter Chart](scatter-chart.md) +- [Shape Chart](shape-chart.md) ## API References The following table lists API members mentioned in the above sections: -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) -* [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html) -* [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) -* `ItemsSource` -* [`fillMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#fillMemberPath) -* [`fillScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#fillScale) -* [`markerType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerType) -* [`markerBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerBrush) -* [`markerOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerOutline) -* [`markerThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerThickness) -* [`radiusScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#radiusScale) -* [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#radiusMemberPath) -* [`xMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#xMemberPath) -* [`yMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#yMemberPath) +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html) +- [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) +- `ItemsSource` +- [`fillMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#fillMemberPath) +- [`fillScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#fillScale) +- [`markerType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerType) +- [`markerBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerBrush) +- [`markerOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerOutline) +- [`markerThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerThickness) +- [`radiusScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#radiusScale) +- [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#radiusMemberPath) +- [`xMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#xMemberPath) +- [`yMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#yMemberPath) diff --git a/en/components/charts/types/column-chart.md b/en/components/charts/types/column-chart.md index 6299a51a74..edefb5162a 100644 --- a/en/components/charts/types/column-chart.md +++ b/en/components/charts/types/column-chart.md @@ -29,25 +29,25 @@ You can create Angular Column Chart in the [`IgxCategoryChartComponent`]({enviro There are several uses cases for Column Charts. When you: -* Need to compare data values of related categories. -* Need to compare data over a time period. -* Need to display negative values as well as positive values in the same data set. -* Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down. +- Need to compare data values of related categories. +- Need to compare data over a time period. +- Need to display negative values as well as positive values in the same data set. +- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down. -### Column Charts Best Practices: +### Column Charts Best Practices -* Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. -* Order time-series data from left to right. +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. ### When Not to Use Column Charts -* You have many (more than 10 or 12) series of data. Your goal is to ensure the chart is readable. +- You have many (more than 10 or 12) series of data. Your goal is to ensure the chart is readable. -### Column Charts Data Structure: +### Column Charts Data Structure -* The data model must contain at least one numeric property. -* The data model may contain an options string or date-time property for labels. -* The data source should contain at least one data item. +- The data model must contain at least one numeric property. +- The data model may contain an options string or date-time property for labels. +- The data source should contain at least one data item. ## Angular Column Chart with Single Series @@ -177,10 +177,10 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: You can find more information about related chart types in these topics: -* [Bar Chart](bar-chart.md) -* [Composite Chart](composite-chart.md) -* [Radial Chart](radial-chart.md) -* [Stacked Chart](stacked-chart.md) +- [Bar Chart](bar-chart.md) +- [Composite Chart](composite-chart.md) +- [Radial Chart](radial-chart.md) +- [Stacked Chart](stacked-chart.md) ## API References diff --git a/en/components/charts/types/composite-chart.md b/en/components/charts/types/composite-chart.md index e15e6a8d8b..2ad83b5a80 100644 --- a/en/components/charts/types/composite-chart.md +++ b/en/components/charts/types/composite-chart.md @@ -25,18 +25,18 @@ The following example demonstrates how to create Composite Chart using [`IgxColu ## Additional Resources -* [Bar Chart](bar-chart.md) -* [Column Chart](column-chart.md) +- [Bar Chart](bar-chart.md) +- [Column Chart](column-chart.md) -* [Line Chart](line-chart.md) -* [Stacked Chart](stacked-chart.md) +- [Line Chart](line-chart.md) +- [Stacked Chart](stacked-chart.md) ## API References -* [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) -* [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) -* [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) -* [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) +- [`IgxColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) +- [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) +- [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) diff --git a/en/components/charts/types/data-pie-chart.md b/en/components/charts/types/data-pie-chart.md index c3f9c686d3..1ef3549264 100644 --- a/en/components/charts/types/data-pie-chart.md +++ b/en/components/charts/types/data-pie-chart.md @@ -29,30 +29,30 @@ Pie Charts are appropriate for small data sets and are easy to read at a glance. The Angular Data Pie Chart includes interactive features that give the viewer tools to analyze data, like: -* Legends -* Slice Selection -* Slice Highlighting -* Chart Animations +- Legends +- Slice Selection +- Slice Highlighting +- Chart Animations Best Practices for a Pie Chart: -* Comparing slices or segments as percentage values in proportion to a total value or whole. -* Showing how a group of categories is broken into smaller segments. -* Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data). -* Ensuring data segments add up to 100%. -* Arranging the order of data from largest (highest) to smallest (least). -* Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise. -* Ensuring the color palette is distinguishable for segments/slices of the parts. -* Considering data labels in segments vs. legends for ease of reading. -* Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension. -* Avoiding positioning multiple pie charts next to each other for comparative analysis. +- Comparing slices or segments as percentage values in proportion to a total value or whole. +- Showing how a group of categories is broken into smaller segments. +- Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data). +- Ensuring data segments add up to 100%. +- Arranging the order of data from largest (highest) to smallest (least). +- Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise. +- Ensuring the color palette is distinguishable for segments/slices of the parts. +- Considering data labels in segments vs. legends for ease of reading. +- Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension. +- Avoiding positioning multiple pie charts next to each other for comparative analysis. Do Not Use Pie Chart When: -* Comparing change over time —use a Bar, Line or Area chart. -* Requiring precise data comparison —use a Bar, Line or Area chart. -* You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story. -* It would be easier for the viewer to perceive the value difference in a Bar chart. +- Comparing change over time —use a Bar, Line or Area chart. +- Requiring precise data comparison —use a Bar, Line or Area chart. +- You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story. +- It would be easier for the viewer to perceive the value difference in a Bar chart. ## Angular Data Pie Chart Legend @@ -108,17 +108,17 @@ The main two options of the [`selectionBehavior`]({environment:dvApiBaseUrl}/pro The [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do: -* [`Brighten`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#Brighten): The selected slices will be highlighted. -* [`FadeOthers`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FadeOthers): The selected slices will remain their same color and others will fade. -* [`FocusColorFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FocusColorFill): The selected slices will change their background to the FocusBrush of the chart. -* [`FocusColorOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FocusColorOutline): The selected slices will have an outline with the color defined by the FocusBrush of the chart. -* [`FocusColorThickOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FocusColorThickOutline): The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well. -* [`GrayscaleOthers`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#GrayscaleOthers): The unselected slices will have a gray color filter applied to them. -* [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#None): There is no effect on the selected slices. -* [`SelectionColorFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#SelectionColorFill): The selected slices will change their background to the SelectionBrush of the chart. -* [`SelectionColorOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#SelectionColorOutline): The selected slices will have an outline with the color defined by the SelectionBrush of the chart. -* [`SelectionColorThickOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#SelectionColorThickOutline): The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well. -* [`ThickOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#ThickOutline): The selected slices will apply an outline with the thickness dependent on the Thickness property of the chart. +- [`Brighten`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#Brighten): The selected slices will be highlighted. +- [`FadeOthers`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FadeOthers): The selected slices will remain their same color and others will fade. +- [`FocusColorFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FocusColorFill): The selected slices will change their background to the FocusBrush of the chart. +- [`FocusColorOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FocusColorOutline): The selected slices will have an outline with the color defined by the FocusBrush of the chart. +- [`FocusColorThickOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FocusColorThickOutline): The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well. +- [`GrayscaleOthers`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#GrayscaleOthers): The unselected slices will have a gray color filter applied to them. +- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#None): There is no effect on the selected slices. +- [`SelectionColorFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#SelectionColorFill): The selected slices will change their background to the SelectionBrush of the chart. +- [`SelectionColorOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#SelectionColorOutline): The selected slices will have an outline with the color defined by the SelectionBrush of the chart. +- [`SelectionColorThickOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#SelectionColorThickOutline): The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well. +- [`ThickOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#ThickOutline): The selected slices will apply an outline with the thickness dependent on the Thickness property of the chart. When a slice is selected, its underlying data item will be added to the SelectedSeriesItems collection of the chart. As such, the XamDataPieChart exposes the SelectedSeriesItemsChanged event to detect when a slice has been selected and this collection is changed. @@ -139,18 +139,18 @@ The [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-a First, the [`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: -* [`DirectlyOver`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#DirectlyOver): The slices are only highlighted when the mouse is directly over them. -* [`NearestItems`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#NearestItems): The nearest slice to the mouse position will be highlighted. -* [`NearestItemsAndSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#NearestItemsAndSeries): The nearest slice and series to the mouse position will be highlighted. -* [`NearestItemsRetainMainShapes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#NearestItemsRetainMainShapes): The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized. +- [`DirectlyOver`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#DirectlyOver): The slices are only highlighted when the mouse is directly over them. +- [`NearestItems`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#NearestItems): The nearest slice to the mouse position will be highlighted. +- [`NearestItemsAndSeries`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#NearestItemsAndSeries): The nearest slice and series to the mouse position will be highlighted. +- [`NearestItemsRetainMainShapes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#NearestItemsRetainMainShapes): The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized. The [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode) enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do: -* [`Brighten`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#Brighten): The series will have its color brightened when the mouse position is over or near it. -* `BrightenSpecific`: The specific slice will have its color brightened when the mouse position is over or near it. -* [`FadeOthers`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FadeOthers): The series will retain its color when the mouse position is over or near it, while the others will appear faded. -* `FadeOthersSpecific`: The specific slice will retain its color when the mouse position is over or near it, while the others will appear faded. -* [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#None): The series and slices will not be highlighted. +- [`Brighten`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#Brighten): The series will have its color brightened when the mouse position is over or near it. +- `BrightenSpecific`: The specific slice will have its color brightened when the mouse position is over or near it. +- [`FadeOthers`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FadeOthers): The series will retain its color when the mouse position is over or near it, while the others will appear faded. +- `FadeOthersSpecific`: The specific slice will retain its color when the mouse position is over or near it, while the others will appear faded. +- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#None): The series and slices will not be highlighted. The following example demonstrates the mouse highlighting behaviors of the [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) component: @@ -197,19 +197,19 @@ The following sample demonstrates the usage of animation in the [`IgxDataPieChar ## Additional Resources -* [Donut Chart](donut-chart.md) -* [Polar Chart](polar-chart.md) -* [Radial Chart](radial-chart.md) +- [Donut Chart](donut-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) ## API References The following table lists API members mentioned in the above sections: -* [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#chartType) -* [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) -* [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType) -* [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) -* [`selectionBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) +- [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#chartType) +- [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) +- [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType) +- [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) +- [`selectionBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) |Chart Type | Control Name | API Members | |-----------------|----------------|------------ | diff --git a/en/components/charts/types/donut-chart.md b/en/components/charts/types/donut-chart.md index 1f2c7550f4..9e9c5c9830 100644 --- a/en/components/charts/types/donut-chart.md +++ b/en/components/charts/types/donut-chart.md @@ -29,40 +29,40 @@ You can create Donut Chart using the [`IgxDoughnutChartComponent`]({environment: Donut Charts are appropriate for small data sets and are easy to read at a glance. Donut charts are just one type of part-to-whole visualization. Others include: -* [Pie](pie-chart.md) +- [Pie](pie-chart.md) -* [Stacked Area](area-chart.md) -* [Stacked 100% Area (Stacked Percentage Area)](area-chart.md) -* [Stacked Bar](bar-chart.md) -* [Stacked 100% Bar (Stacked Percentage Bar)](bar-chart.md) -* [Treemap](treemap-chart.md) -* [Waterfall](column-chart.md) +- [Stacked Area](area-chart.md) +- [Stacked 100% Area (Stacked Percentage Area)](area-chart.md) +- [Stacked Bar](bar-chart.md) +- [Stacked 100% Bar (Stacked Percentage Bar)](bar-chart.md) +- [Treemap](treemap-chart.md) +- [Waterfall](column-chart.md) The Angular Donut Chart includes interactive features that give the viewer tools to analyze data, like: -* Legends -* Slice Explosion -* Slice Selection -* Chart Animations +- Legends +- Slice Explosion +- Slice Selection +- Chart Animations ### Best Practices for Donut Charts -* Using multiple data sets to display your data in a ring display. -* Placing the information such as values or labels, within the hole of the donut for quick explanation of data. -* Comparing slices or segments as percentage values in proportion to a total value or whole. -* Showing how a group of categories is broken into smaller segments. -* Ensuring data segments add up to 100%. -* Ensuring the color palette is distinguishable for segments/slices of the parts. +- Using multiple data sets to display your data in a ring display. +- Placing the information such as values or labels, within the hole of the donut for quick explanation of data. +- Comparing slices or segments as percentage values in proportion to a total value or whole. +- Showing how a group of categories is broken into smaller segments. +- Ensuring data segments add up to 100%. +- Ensuring the color palette is distinguishable for segments/slices of the parts. ### When not to use a Donut Chart -* Comparing change over time —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart. -* Requiring precise data comparison —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart. -* You have more than 6 or 8 segments (high data volume) — consider a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart if it works for your data story. -* It would be easier for the viewer to perceive the value difference in a [Bar](bar-chart.md) chart. -* You have negative data, as this can not be represented in a donut chart. +- Comparing change over time —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart. +- Requiring precise data comparison —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart. +- You have more than 6 or 8 segments (high data volume) — consider a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart if it works for your data story. +- It would be easier for the viewer to perceive the value difference in a [Bar](bar-chart.md) chart. +- You have negative data, as this can not be represented in a donut chart. ## Angular Donut Chart - Slice Selection @@ -94,16 +94,16 @@ It is possible to have a multiple ring display in the Angular Donut Chart, with You can find more information about related chart types in these topics: -* [Pie Chart](pie-chart.md) -* [Polar Chart](polar-chart.md) -* [Radial Chart](radial-chart.md) +- [Pie Chart](pie-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) ## API References The following table lists API members mentioned in the above sections: -* [`IgxDoughnutChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html) -* [`allowSliceExplosion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceExplosion) -* [`allowSliceSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceSelection) -* [`innerExtent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#innerExtent) -* `SliceClick` +- [`IgxDoughnutChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html) +- [`allowSliceExplosion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceExplosion) +- [`allowSliceSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceSelection) +- [`innerExtent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#innerExtent) +- `SliceClick` diff --git a/en/components/charts/types/line-chart.md b/en/components/charts/types/line-chart.md index eb588b8cdc..8358e472ec 100644 --- a/en/components/charts/types/line-chart.md +++ b/en/components/charts/types/line-chart.md @@ -27,46 +27,46 @@ You can create the Angular Line Chart in the [`IgxCategoryChartComponent`]({envi ### Are Angular Line Charts right for your project? -* Different than an [area chart](area-chart.md), the line chart does not fill the area between the X-Axis (bottom axis) and the line. -* The Angular line chart is identical to the Angular [spline chart](spline-chart.md) in all aspects except that the line connecting data points does not have spline interpolation and smoothing for improved presentation of data. +- Different than an [area chart](area-chart.md), the line chart does not fill the area between the X-Axis (bottom axis) and the line. +- The Angular line chart is identical to the Angular [spline chart](spline-chart.md) in all aspects except that the line connecting data points does not have spline interpolation and smoothing for improved presentation of data. A Line Chart includes several variants based on your data or how you want to tell the correct story with your data. These include: -* Layered Line Chart -* Stacked Line Chart -* Stepped Line Chart -* Polar Line Chart -* Stacked 100 Line Chart +- Layered Line Chart +- Stacked Line Chart +- Stepped Line Chart +- Polar Line Chart +- Stacked 100 Line Chart ### Line Chart Use Cases There are several common use cases for choosing a Line Chart: -* Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming and Drill-down. -* Need to compare the trends over time. -* Want to show the difference between 2 or more data series. -* Want to show cumulative part-to-whole comparisons of distinct categories. -* Need to show data trends for one or more categories for comparative analysis. -* Need to visualize detailed time-series data. +- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming and Drill-down. +- Need to compare the trends over time. +- Want to show the difference between 2 or more data series. +- Want to show cumulative part-to-whole comparisons of distinct categories. +- Need to show data trends for one or more categories for comparative analysis. +- Need to visualize detailed time-series data. -### Line Chart Best Practices: +### Line Chart Best Practices -* Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. -* Order time-series data from left to right. -* Use visual attributes like solid lines to show a series of data. +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. +- Use visual attributes like solid lines to show a series of data. ### When Not to Use Line Chart -* You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable. -* Time-series data has similar values (data over the same period), it makes overlapped lines impossible to differentiate. +- You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable. +- Time-series data has similar values (data over the same period), it makes overlapped lines impossible to differentiate. -### Line Chart Data Structure: +### Line Chart Data Structure -* The data source must be an array or a list of data items (for single series). -* The data source must be an array of arrays or a list of lists (for multiple series). -* The data source must contain at least one data item. -* All data items must contain at least one data column (string or date time). -* All data items must contain at least one numeric data column. +- The data source must be an array or a list of data items (for single series). +- The data source must be an array of arrays or a list of lists (for multiple series). +- The data source must contain at least one data item. +- All data items must contain at least one data column (string or date time). +- All data items must contain at least one numeric data column. ## Angular Line Chart with Single Series @@ -207,12 +207,12 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: You can find more information about related chart types in these topics: -* [Area Chart](area-chart.md) -* [Column Chart](column-chart.md) -* [Polar Chart](polar-chart.md) -* [Radial Chart](radial-chart.md) -* [Spline Chart](spline-chart.md) -* [Stacked Chart](stacked-chart.md) +- [Area Chart](area-chart.md) +- [Column Chart](column-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) +- [Spline Chart](spline-chart.md) +- [Stacked Chart](stacked-chart.md) ## API References diff --git a/en/components/charts/types/pie-chart.md b/en/components/charts/types/pie-chart.md index ad3cc0a2c4..0279951c50 100644 --- a/en/components/charts/types/pie-chart.md +++ b/en/components/charts/types/pie-chart.md @@ -27,42 +27,42 @@ You can create the Angular Pie Chart in the [`IgxPieChartComponent`]({environmen Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization. Others include: -* Pie -* Doughnut (Ring) -* Funnel -* Stacked Area -* Stacked 100% Area (Stacked Percentage Area) -* Stacked Bar -* Stacked 100% Bar (Stacked Percentage Bar) -* Treemap -* Waterfall +- Pie +- Doughnut (Ring) +- Funnel +- Stacked Area +- Stacked 100% Area (Stacked Percentage Area) +- Stacked Bar +- Stacked 100% Bar (Stacked Percentage Bar) +- Treemap +- Waterfall The Angular Pie Chart includes interactive features that give the viewer tools to analyze data, like: -* Legends -* Slice Explosion -* Slice Selection -* Chart Animations +- Legends +- Slice Explosion +- Slice Selection +- Chart Animations Best Practices for a Pie Chart: -* Comparing slices or segments as percentage values in proportion to a total value or whole. -* Showing how a group of categories is broken into smaller segments. -* Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data). -* Ensuring data segments add up to 100%. -* Arranging the order of data from largest (highest) to smallest (least). -* Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise. -* Ensuring the color palette is distinguishable for segments/slices of the parts. -* Considering data labels in segments vs. legends for ease of reading. -* Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension. -* Avoiding positioning multiple pie charts next to each other for comparative analysis. +- Comparing slices or segments as percentage values in proportion to a total value or whole. +- Showing how a group of categories is broken into smaller segments. +- Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data). +- Ensuring data segments add up to 100%. +- Arranging the order of data from largest (highest) to smallest (least). +- Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise. +- Ensuring the color palette is distinguishable for segments/slices of the parts. +- Considering data labels in segments vs. legends for ease of reading. +- Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension. +- Avoiding positioning multiple pie charts next to each other for comparative analysis. Do Not Use Pie Chart When: -* Comparing change over time —use a Bar, Line or Area chart. -* Requiring precise data comparison —use a Bar, Line or Area chart. -* You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story. -* It would be easier for the viewer to perceive the value difference in a Bar chart. +- Comparing change over time —use a Bar, Line or Area chart. +- Requiring precise data comparison —use a Bar, Line or Area chart. +- You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story. +- It would be easier for the viewer to perceive the value difference in a Bar chart. ## Angular Pie Chart Legend @@ -119,16 +119,16 @@ There is a property called [`selectionMode`]({environment:dvApiBaseUrl}/products The pie chart supports three different selection modes. -* Single - When the mode is set to single, only one slice can be selected at a time. When you select a new slice the previously selected slice will be deselected and the new one will become selected. -* Multiple - When the mode is set to Multiple, many slices can be selected at once. If you click on a slice, it will become selected and clicking on a different slice will also select that slice leaving the previous slice selected. -* Manual - When the mode is set to Manual, selection is disabled. +- Single - When the mode is set to single, only one slice can be selected at a time. When you select a new slice the previously selected slice will be deselected and the new one will become selected. +- Multiple - When the mode is set to Multiple, many slices can be selected at once. If you click on a slice, it will become selected and clicking on a different slice will also select that slice leaving the previous slice selected. +- Manual - When the mode is set to Manual, selection is disabled. The pie chart has 4 events associated with selection: -* SelectedItemChanging -* SelectedItemChanged -* SelectedItemsChanging -* SelectedItemsChanged +- SelectedItemChanging +- SelectedItemChanged +- SelectedItemsChanging +- SelectedItemsChanged The events that end in “Changing” are cancelable events which means you can stop the selection of a slice by setting the event argument property `Cancel` to true. When set to true the associated property will not update and the slice will not become selected. This is useful for scenarios where you want to keep users from being able to select certain slices based on the data inside it. @@ -186,20 +186,20 @@ The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a g ## Additional Resources -* [Donut Chart](donut-chart.md) -* [Polar Chart](polar-chart.md) -* [Radial Chart](radial-chart.md) +- [Donut Chart](donut-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) ## API References The following table lists API members mentioned in the above sections: -* [`legendItemBadgeTemplate`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemBadgeTemplate) -* [`legendItemTemplate`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemTemplate) -* [`legendLabelMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendLabelMemberPath) -* [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) -* [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) -* [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#selectionMode) +- [`legendItemBadgeTemplate`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemBadgeTemplate) +- [`legendItemTemplate`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemTemplate) +- [`legendLabelMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendLabelMemberPath) +- [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) +- [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) +- [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#selectionMode) |Chart Type | Control Name | API Members | |-----------------|----------------|------------ | diff --git a/en/components/charts/types/point-chart.md b/en/components/charts/types/point-chart.md index 810a32e9ab..f2f8b6c4c0 100644 --- a/en/components/charts/types/point-chart.md +++ b/en/components/charts/types/point-chart.md @@ -66,26 +66,26 @@ Once the Angular Point Chart is set up, we may want to make some further styling You can create more advanced types of Angular Point Charts using the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control instead of [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by following these topics: -* [Scatter Bubble Chart](bubble-chart.md) -* [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart) -* [Scatter HD Chart](scatter-chart.md#angular-scatter-high-density-chart) -* [Polar Marker Chart](polar-chart.md#angular-polar-marker-chart) +- [Scatter Bubble Chart](bubble-chart.md) +- [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart) +- [Scatter HD Chart](scatter-chart.md#angular-scatter-high-density-chart) +- [Polar Marker Chart](polar-chart.md#angular-polar-marker-chart) ## Additional Resources You can find more information about related chart features in these topics: -* [Chart Performance](../features/chart-performance.md) -* [Chart Markers](../features/chart-markers.md) +- [Chart Performance](../features/chart-performance.md) +- [Chart Markers](../features/chart-markers.md) ## API References The following table lists API members mentioned in the above sections: -* [`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) -* [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) -* [`markerTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes) -* [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) -* [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) -* [`markerThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerThickness) +- [`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) +- [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) +- [`markerTypes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes) +- [`markerOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) +- [`markerBrushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) +- [`markerThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerThickness) diff --git a/en/components/charts/types/polar-chart.md b/en/components/charts/types/polar-chart.md index 8073496d47..23df1198ca 100644 --- a/en/components/charts/types/polar-chart.md +++ b/en/components/charts/types/polar-chart.md @@ -92,26 +92,26 @@ Once our polar chart is created, we may want to make some further styling custom You can find more information about related chart types in these topics: -* [Area Chart](area-chart.md) -* [Donut Chart](donut-chart.md) -* [Line Chart](line-chart.md) -* [Pie Chart](pie-chart.md) -* [Radial Chart](radial-chart.md) -* [Scatter Chart](scatter-chart.md) -* [Spline Chart](spline-chart.md) +- [Area Chart](area-chart.md) +- [Donut Chart](donut-chart.md) +- [Line Chart](line-chart.md) +- [Pie Chart](pie-chart.md) +- [Radial Chart](radial-chart.md) +- [Scatter Chart](scatter-chart.md) +- [Spline Chart](spline-chart.md) ## API References The following table lists API members mentioned in the above sections: -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) -* [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html) -* [`IgxPolarLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html) -* [`IgxPolarSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineseriescomponent.html) -* [`IgxPolarSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html) -* [`IgxPolarScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html) -* `ItemsSource` -* [`angleMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarbasecomponent.html#angleMemberPath) -* [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarbasecomponent.html#radiusMemberPath) -* [`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) -* [`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html) +- [`IgxPolarLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html) +- [`IgxPolarSplineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineseriescomponent.html) +- [`IgxPolarSplineAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html) +- [`IgxPolarScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html) +- `ItemsSource` +- [`angleMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarbasecomponent.html#angleMemberPath) +- [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarbasecomponent.html#radiusMemberPath) +- [`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) +- [`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) diff --git a/en/components/charts/types/radial-chart.md b/en/components/charts/types/radial-chart.md index f4391ce261..767202ebe8 100644 --- a/en/components/charts/types/radial-chart.md +++ b/en/components/charts/types/radial-chart.md @@ -85,24 +85,24 @@ In addition, the labels can be configured to appear near or wide from the chart. You can find more information about related chart types in these topics: -* [Area Chart](area-chart.md) -* [Column Chart](column-chart.md) -* [Donut Chart](donut-chart.md) -* [Line Chart](line-chart.md) -* [Pie Chart](pie-chart.md) +- [Area Chart](area-chart.md) +- [Column Chart](column-chart.md) +- [Donut Chart](donut-chart.md) +- [Line Chart](line-chart.md) +- [Pie Chart](pie-chart.md) ## API References The following table lists API members mentioned in the above sections: -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) -* [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html) -* [`IgxRadialColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html) -* [`IgxRadialLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html) -* [`IgxRadialPieSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html) -* `ItemsSource` -* `AngleAxisName` -* `ValueAxisName` -* [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxanchoredradialseriescomponent.html#valueMemberPath) -* [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) -* [`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html) +- [`IgxRadialColumnSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html) +- [`IgxRadialLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html) +- [`IgxRadialPieSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html) +- `ItemsSource` +- `AngleAxisName` +- `ValueAxisName` +- [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxanchoredradialseriescomponent.html#valueMemberPath) +- [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) +- [`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) diff --git a/en/components/charts/types/scatter-chart.md b/en/components/charts/types/scatter-chart.md index c6e95fa9e8..7e0117d53f 100644 --- a/en/components/charts/types/scatter-chart.md +++ b/en/components/charts/types/scatter-chart.md @@ -92,11 +92,11 @@ Angular Scatter Contour Chart draws colored contour lines based on a triangulati You can find more information about related chart types in these topics: -* [Area Chart](area-chart.md) -* [Bubble Chart](bubble-chart.md) -* [Line Chart](line-chart.md) -* [Spline Chart](spline-chart.md) -* [Shape Chart](shape-chart.md) +- [Area Chart](area-chart.md) +- [Bubble Chart](bubble-chart.md) +- [Line Chart](line-chart.md) +- [Spline Chart](spline-chart.md) +- [Shape Chart](shape-chart.md) ## API References diff --git a/en/components/charts/types/shape-chart.md b/en/components/charts/types/shape-chart.md index b12f5f3652..7ddce2e7f8 100644 --- a/en/components/charts/types/shape-chart.md +++ b/en/components/charts/types/shape-chart.md @@ -44,20 +44,20 @@ You can create this type of chart in the [`IgxDataChartComponent`]({environment: You can find more information about related chart types in these topics: -* [Area Chart](area-chart.md) -* [Line Chart](line-chart.md) -* [Scatter Chart](scatter-chart.md) +- [Area Chart](area-chart.md) +- [Line Chart](line-chart.md) +- [Scatter Chart](scatter-chart.md) ## API References The following table lists API members mentioned in the above sections: -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) -* [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) -* [`IgxScatterPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) -* `ItemsSource` -* [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxshapeseriesbasecomponent.html#shapeMemberPath) -* [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) -* [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) -* `YAxisName` -* `XAxisName` +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) +- [`IgxScatterPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) +- `ItemsSource` +- [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxshapeseriesbasecomponent.html#shapeMemberPath) +- [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) +- [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) +- `YAxisName` +- `XAxisName` diff --git a/en/components/charts/types/sparkline-chart.md b/en/components/charts/types/sparkline-chart.md index 21744e6219..6556b98969 100644 --- a/en/components/charts/types/sparkline-chart.md +++ b/en/components/charts/types/sparkline-chart.md @@ -35,34 +35,34 @@ The Angular Sparkline has the ability to mark the data points with elliptical ic ### Sparkline Use Cases -* You have a compact space to display a chart in. -* You want to show trends in a series of values, such as weekly revenue. +- You have a compact space to display a chart in. +- You want to show trends in a series of values, such as weekly revenue. ### Sparkline Best Practices -* Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. -* Order time-series data from left to right. -* Use visual attributes like solid lines to show a series of data. +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. +- Use visual attributes like solid lines to show a series of data. ### When Not to Use Sparkline -* You need to analyze the data in detail. -* You need to display every label of the data points. It only allows showing high and low values on the Y-Axis, and first and last values on the X-Axis. +- You need to analyze the data in detail. +- You need to display every label of the data points. It only allows showing high and low values on the Y-Axis, and first and last values on the X-Axis. ### Sparkline Data Structure -* It requires one-dimensional data. -* The data set must contain at least two numeric fields. -* The text in the data source fields can be used to display the first and last label on the X-Axis. +- It requires one-dimensional data. +- The data set must contain at least two numeric fields. +- The text in the data source fields can be used to display the first and last label on the X-Axis. ## Sparkline Types The Angular Sparkline supports the following types of sparklines by setting the [`displayType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayType) property accordingly: -* [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Line): Displays the line chart type of Sparkline with numeric data, connecting the data points with line segments. At least two data points must be supplied to visualize the data in Sparkline. -* [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Area): Displays the Area chart type of Sparkline with numeric data. This is like line type with additional steps of closing the area after each line is drawn. At least two data points must be supplied to visualize the data in Sparkline. -* [`Column`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Column): Displays the Column chart type of Sparkline with numeric data. Some may refer to it as vertical bars. This type can render a single data point, but it would require specifying the minimum value range property (minimum) in Sparkline so the supplied single data point can be visible, otherwise the value will be treated as the minimum value and will not be visible. -* [`WinLoss`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#WinLoss): This type is similar in its visual appearance to Column chart type, in which the value of each column is equal to either the positive maximum (for positive values) or the negative minimum (for negative value) of the data set. The idea is to indicate a win or loss scenario. For the Win/Loss chart to display properly, the data set must have both positive and negative values. If the WinLoss sparkline is bound to the same data as the other types such as the Line type, which can be bound to a collection of numeric values, then the Angular Sparkline will select two values from the collection - the highest and the lowest - and will render the sparkline based upon those values. +- [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Line): Displays the line chart type of Sparkline with numeric data, connecting the data points with line segments. At least two data points must be supplied to visualize the data in Sparkline. +- [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Area): Displays the Area chart type of Sparkline with numeric data. This is like line type with additional steps of closing the area after each line is drawn. At least two data points must be supplied to visualize the data in Sparkline. +- [`Column`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Column): Displays the Column chart type of Sparkline with numeric data. Some may refer to it as vertical bars. This type can render a single data point, but it would require specifying the minimum value range property (minimum) in Sparkline so the supplied single data point can be visible, otherwise the value will be treated as the minimum value and will not be visible. +- [`WinLoss`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#WinLoss): This type is similar in its visual appearance to Column chart type, in which the value of each column is equal to either the positive maximum (for positive values) or the negative minimum (for negative value) of the data set. The idea is to indicate a win or loss scenario. For the Win/Loss chart to display properly, the data set must have both positive and negative values. If the WinLoss sparkline is bound to the same data as the other types such as the Line type, which can be bound to a collection of numeric values, then the Angular Sparkline will select two values from the collection - the highest and the lowest - and will render the sparkline based upon those values. Angular Checkbox is an extension of the standard HTML input type checkbox, providing similar functionality, only enhanced with things like animations and Material Design styling. It enables users to choose one or several predefined options, mostly in forms and surveys. The Ignite UI for Angular Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox. Some of the features it offers are styling options, themes, checked, unchecked, and indeterminate states, and others.

## Angular Checkbox Example + See the checkbox in action in the following Angular Checkbox example below. {{ task.description }} ``` + Add some styles: + ```scss //task.component.scss :host { @@ -115,13 +124,17 @@ igx-checkbox { margin-top: 16px; } ``` + The final result would be something like that: + ### Label Positioning + You can position the label using the checkbox's [`labelPosition`]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html#labelPosition) property: + ```html ``` @@ -152,7 +165,9 @@ All done {{ task.description }} ``` + Next, we're going to indent the subtasks, so it's more visual that they are part of the same group. + ```scss // app.component.scss :host { @@ -167,7 +182,9 @@ igx-checkbox.tasks { padding-left: 10px; } ``` + And finally, we'll create the logic of our application: + ```ts // app.component.ts public tasks = [ @@ -202,6 +219,7 @@ public toggleAll() { } } ``` + After all that is done, our application should look like this: - -Another way to style the checkbox is by using **Sass**, along with our [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) function. - -To start styling the checkbox using **Sass**, first import the `index` file, which includes all theme functions and component mixins: +### Checkbox Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
+
$empty-color +
+ 		$empty-color-hoverThe unchecked border color on hover.
$focus-outline-color (indigo variant only)The focus outline color for indigo variant.
+
$fill-color +
+ 		$fill-color-hoverThe checked border and fill colors on hover.
$tick-colorThe checked mark color.
$focus-border-colorThe focus border color.
$disabled-indeterminate-colorThe disabled border and fill colors in indeterminate state.
$focus-outline-color (bootstrap variant only)The focus outline color for bootstrap variant.
$focus-outline-color-focused (indigo variant only)The focus outline color for focused state in indigo variant.
+
$error-color +
+ 		$error-color-hoverThe border and fill colors in invalid state on hover.
$focus-outline-color-errorThe focus outline color in error state.
+ $label-color + $label-color-hoverThe text color for the label on hover.
+ +> **Note:** The actual results may vary depending on the theme variant. + +To get started with styling the checkbox, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; @@ -261,7 +345,7 @@ Finally, **include** the custom theme in your application: @include css-vars($custom-checkbox-theme); ``` -In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) design system. +In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) design system. -> [!NOTE] -> The sample uses the [Fluent Light](themes/sass/schemas.md#predefined-schemas) schema. +### Styling with Tailwind + +You can style the `checkbox` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-checkbox`, `dark-checkbox`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [checkbox-theme]({environment:sassApiUrl}/themes#function-checkbox-theme). The syntax is as follows: + +```html + + Styled checkbox + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your checkbox should look like this: + +
+ +
## API References +
-* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) -* [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme) -* [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html) +- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) +- [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme) +- [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html) ## Theming Dependencies -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-riple-theme) + +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-riple-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) +- [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/chip.md b/en/components/chip.md index ef05a3d7df..23c6f733cf 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -6,12 +6,12 @@ _keywords: Angular Chip, Angular Chip Component, Angular Chip Area, Angular Chip # Angular Chip Component Overview -[`The Angular Chip component`]({environment:angularApiUrl}/classes/igxchipcomponent.html) is a visual element that displays information in an oval container. The component has various properties - it can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other, using the chip area as a container. +[`The Angular Chip component`]({environment:angularApiUrl}/classes/igxchipcomponent.html) is a visual element that displays information in an oval container. The component has various properties - it can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other, using the chip area as a container. ## Angular Chip Example - @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Chip component, first you need to ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the **IgxChipsModule** in the **app.module.ts** file: @@ -87,7 +87,7 @@ The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.ht ### Selection - +Selecting Default Selection can be enabled by setting the [`selectable`]({environment:angularApiUrl}/classes/igxchipcomponent.html#selectable) input property to `true`. When selecting a chip, the [`selectedChanging`]({environment:angularApiUrl}/classes/igxchipcomponent.html#selectedChanging) event is fired. It provides the new [`selected`]({environment:angularApiUrl}/interfaces/ichipselecteventargs.html#selected) value so you can get the new state and the original event in [`originalEvent`]({environment:angularApiUrl}/interfaces/ichipselecteventargs.html#originalEvent) that triggered the selection change. If this is not done through user interaction but instead is done by setting the [`selected`]({environment:angularApiUrl}/interfaces/ichipselecteventargs.html#selected) property programmatically, the [`originalEvent`]({environment:angularApiUrl}/interfaces/ichipselecteventargs.html#originalEvent) argument has a value of `null`. @@ -100,7 +100,7 @@ Selection can be enabled by setting the [`selectable`]({environment:angularApiUr ### Removing - +Removing Default Removing can be enabled by setting the [`removable`]({environment:angularApiUrl}/classes/igxchipcomponent.html#removable) input to `true`. When enabled, a remove button is rendered at the end of the chip. When removing a chip, the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) event is emitted. @@ -188,8 +188,8 @@ public chipRemoved(event: IBaseChipEventArgs) { If everything went well, you should see this in your browser: - @@ -199,7 +199,7 @@ All of the [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcompo You can template the `prefix` and the `suffix` of the chip, using the `IgxPrefix` and the `IgxSuffix` directives: - +Chip Prefix and Suffix ```html @@ -211,7 +211,7 @@ You can template the `prefix` and the `suffix` of the chip, using the `IgxPrefix You can customize the size of the chip, using the [`--ig-size`] CSS variable. By default it is set to `var(--ig-size-large)`. It can also be set to `var(--ig-size-medium)` or `var(--ig-size-small)`, while everything inside the chip retains its relative positioning: - +Chip Density ```html Hi! My name is Chip! @@ -228,7 +228,7 @@ You can customize the size of the chip, using the [`--ig-size`] CSS variable. By You can customize the `select icon`, using the [`selectIcon`]({environment:angularApiUrl}/classes/igxchipcomponent.html#selecticon) input. It accepts values of type `TemplateRef` and overrides the default icon while retaining the same functionality. - +Selecting Custom ```html @@ -243,7 +243,7 @@ You can customize the `select icon`, using the [`selectIcon`]({environment:angul You can customize the `remove icon`, using the [`removeIcon`]({environment:angularApiUrl}/classes/igxchipcomponent.html#removeIcon) input. It takes a value of type `TemplateRef` and renders it instead of the default remove icon. - +Remove Icons ```html @@ -313,11 +313,12 @@ public chipRemoved(event: IBaseChipEventArgs) { this.changeDetectionRef.detectChanges(); } ``` + If everything went well, you should see this in your browser: - @@ -327,7 +328,7 @@ The [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareaco ### Reorder Chips - +Dragging The chip can be dragged by the end-user in order to change its position. The dragging is disabled by default but can be enabled using the [`draggable`]({environment:angularApiUrl}/classes/igxchipcomponent.html#draggable) input property. You need to handle the actual chip reordering manually. This is where the chip area comes in handy since it provides the [`reorder`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html#reorder) event that returns the new order when a chip is dragged over another chip. @@ -361,15 +362,15 @@ The chip can be focused using the `Tab` key or by clicking on it. When the chips - LEFT - Moves the focus to the chip on the left. - + Arrow Left Key - RIGHT - Moves the focus to the chip on the right. - + Arrow Right Key - SPACE - Toggles chip selection if it is selectable. - + Space Key - DELETE - Triggers the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) event for the [`igxChip`]({environment:angularApiUrl}/classes/igxchipcomponent.html) so the chip deletion can be handled manually. - SHIFT + LEFT - Triggers [`reorder`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html#reorder) event for the [`igxChipArea`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) when the currently focused chip should move position to the left. @@ -473,30 +474,133 @@ If everything's set up correctly, you should see this in your browser: ### Demo - ## Styling -Following the simplest approach, you can use CSS variables to customize the appearance of the chip: - -```css -igx-chip { - --background: #cd201f; - --hover-background: #cd201f; - --focus-background: #9f1717; - --text-color: #fff; -} -``` -By changing the values of these CSS variables, you can alter the entire look of the chip component. - -
- -Another way to style the chip is by using **Sass**, along with our [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) function. - -To start styling the chip using **Sass**, first import the `index` file, which includes all theme functions and component mixins: +### Chip Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$text-colorThe chip text color.
$border-colorThe chip border color.
$hover-backgroundThe chip hover background color.
$hover-border-colorThe chip hover border color.
$hover-text-colorThe chip hover text color.
$focus-backgroundThe chip focus background color.
$selected-backgroundThe chip selected background color.
$focus-background
$focus-text-colorThe chip text focus color.
$focus-border-colorThe chip focus border color.
$focus-outline-color (bootstrap & indigo variants only)The chip focus outline color.
$selected-background
$selected-text-colorThe selected chip text color.
$selected-border-colorThe selected chip border color.
$hover-selected-backgroundThe selected chip hover background color.
$hover-selected-background
$hover-selected-text-colorThe selected chip hover text color.
$hover-selected-border-colorThe selected chip hover border color.
$focus-selected-backgroundThe selected chip focus background color.
$focus-selected-background
$focus-selected-text-colorThe selected chip text focus color.
$focus-selected-border-colorThe selected chip focus border color.
$focus-selected-outline-color (bootstrap & indigo variants only)The chip focus outline color in selected state.
+ +To get started with styling the chip, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; @@ -522,14 +626,56 @@ Finally, **include** the custom theme in your application: @include css-vars($custom-chip-theme); ``` -In the sample below, you can see how using the chip component with customized CSS variables allows you to create a design that visually resembles the chip used in the [`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) design system. +In the sample below, you can see how using the chip component with customized CSS variables allows you to create a design that visually resembles the chip used in the [`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) design system. - +### Styling with Tailwind + +You can style the chip using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-chip`, `dark-chip`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [chip-theme]({environment:sassApiUrl}/themes#function-chip-theme). The syntax is as follows: + +```html + + {{chip.text}} + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your chips should look like this: + +
+ +
+ ### Custom sizing You can either use the `--size` variable, targeting the `igx-chip` directly: @@ -566,18 +712,18 @@ Learn more about it in the [Size](display-density.md) article. ## API -* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) -* [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme) -* [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) +- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) +- [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme) +- [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) ## References
Our community is active and always welcoming to new ideas. -* [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) +- [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/circular-progress.md b/en/components/circular-progress.md index d5c633b5db..994a74d76e 100644 --- a/en/components/circular-progress.md +++ b/en/components/circular-progress.md @@ -10,8 +10,8 @@ _keywords: Angular Circular Progress component, Angular Circular Progress contro ## Angular Circular Progress Example - @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Circular Progress component, first ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxProgressBarModule` in the **app.module.ts** file: @@ -83,7 +83,6 @@ After that, we should have the demo sample in your browser. > [!NOTE] > The **igx-circular-bar** emits [`onProgressChanged`]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html#onProgressChanged) event that outputs an object like this `{currentValue: 65, previousValue: 64}` on each step. - > [!NOTE] > The default progress increments by **1% of the [`max`]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html#max) value** per update cycle, this happens if the [`step`]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html#step) value is not defined. To change the update rate, the [`step`]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html#step) value should be defined.``` @@ -100,8 +99,8 @@ If you want to track a process that is not determined precisely, you can set the The final result should be: - @@ -220,8 +219,8 @@ To provide a gradient that has more than 2 color stops, we have to use the direc After reproducing the steps above, you should get this as a result: - @@ -257,9 +256,9 @@ The last step is to **include** the component theme in our application.
- @@ -267,5 +266,5 @@ The last step is to **include** the component theme in our application.
-* [IgxCircularProgressBarComponent]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html) -* [IgxCircularProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-circular-theme) +- [IgxCircularProgressBarComponent]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html) +- [IgxCircularProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-circular-theme) diff --git a/en/components/combo-features.md b/en/components/combo-features.md index 4374667c8d..e1dbcdb99e 100644 --- a/en/components/combo-features.md +++ b/en/components/combo-features.md @@ -5,11 +5,13 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # ComboBox Features +

The Ignite UI for Angular ComboBox control exposes several features including data and value binding, custom values, filtering, grouping, etc.

## Angular ComboBox Features Example + The following demo demonstrates some of the combobox features that are enabled/disabled at runtime: @@ -23,6 +25,7 @@ The following demo demonstrates some of the combobox features that are enabled/d ## Usage ### First Steps + To get started with the combobox component, first you need to import the `IgxComboModule` in your **app.module.ts** file. Our sample also uses the [igx-switch]({environment:angularApiUrl}/classes/igxswitchcomponent.html) component to toggle combobox properties' values, so we will need the `IgxSwitchModule` as well: ```typescript @@ -61,6 +64,7 @@ export class AppModule {} ``` ### Component Definition + Note that grouping is enabled/disabled by setting the [groupKey]({environment:angularApiUrl}/classes/IgxComboComponent.html#groupKey) property to a corresponding data source entity or setting it to an empty string. ```typescript @@ -79,6 +83,7 @@ Note that grouping is enabled/disabled by setting the [groupKey]({environment:an ## Features ### Data Binding + The following code snippet illustrates a basic usage of the [igx-combo]({environment:angularApiUrl}/classes/igxcombocomponent.html) bound to a local data source. The [valueKey]({environment:angularApiUrl}/classes/IgxComboComponent.html#valueKey) specifies which property of the data entries will be stored for the combobox's selection and the [displayKey]({environment:angularApiUrl}/classes/IgxComboComponent.html#displayKey) specifies which property will be used for the combobox text: ```html @@ -103,6 +108,7 @@ export class ComboDemo implements OnInit { Follow the [ComboBox Remote Binding topic](combo-remote.md) for more details about binding the combobox component with remote data. ### Custom Overlay Settings + The combobox component allows users to change the way a list of items is shown. This can be done by defining [Custom OverlaySettings]({environment:angularApiUrl}/interfaces/overlaysettings.html) and passing them to the [ComboBox's OverlaySettings]({environment:angularApiUrl}/classes/IgxComboComponent.html#overlaySettings) input: ```typescript @@ -139,6 +145,7 @@ If everything is set up correctly, the combobox's list will display centered, us > The combobox component uses the [AutoPositionStrategy]({environment:angularApiUrl}/classes/autopositionstrategy.html) as a default position strategy. ### Filtering + By default, filtering in the combobox is enabled. It can be disabled by setting the [disableFiltering]({environment:angularApiUrl}/classes/igxcombocomponent.html#disableFiltering) property to true. Filtering options can be further enhanced by enabling the search case sensitivity. To display the case-sensitive icon in the search input, set the [showSearchCaseIcon]({environment:angularApiUrl}/classes/IgxComboComponent.html#showSearchCaseIcon) property to true: @@ -150,6 +157,7 @@ Filtering options can be further enhanced by enabling the search case sensitivit
### Custom Values + The [allowCustomValues]({environment:angularApiUrl}/classes/IgxComboComponent.html#allowCustomValues) property controls whether custom values can be added to the collection. If it is enabled, a missing item could be included using the UI of the combobox. ```html @@ -159,6 +167,7 @@ The [allowCustomValues]({environment:angularApiUrl}/classes/IgxComboComponent.ht
### Search Input Focus + The combobox's [autoFocusSearch]({environment:angularApiUrl}/classes/IgxComboComponent.html#autoFocusSearch) property controls if the search input should receive focus when a combobox's dropdown list is opened. By default, the property is set to `true`. When set to `false`, the focus goes to the combobox's items container. For mobile devices, this can be used to prevent the software keyboard from popping up when opening the combobox's dropdown list. ```html @@ -168,6 +177,7 @@ The combobox's [autoFocusSearch]({environment:angularApiUrl}/classes/IgxComboCom
### Disable ComboBox + You can disable a combobox using the following code: ```html @@ -177,6 +187,7 @@ You can disable a combobox using the following code:
### Grouping + Defining a combobox's `groupKey` option will group the items, according to the provided key: ```html @@ -203,25 +214,28 @@ export class ComboDemo {
## API Summary +
-* [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) +- [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) +- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) Additional components and/or directives with relative APIs that were used: -* [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) + +- [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) ## Additional Resources +
-* [ComboBox Component](combo.md) -* [ComboBox Remote Binding](combo-remote.md) -* [ComboBox Templates](combo-templates.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Single Select ComboBox](simple-combo.md) +- [ComboBox Component](combo.md) +- [ComboBox Remote Binding](combo-remote.md) +- [ComboBox Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/combo-remote.md b/en/components/combo-remote.md index 0909d78f91..6a2e4a8a81 100644 --- a/en/components/combo-remote.md +++ b/en/components/combo-remote.md @@ -5,11 +5,13 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # ComboBox Remote Binding +

The Ignite UI for Angular ComboBox Component exposes an API that allows binding a combobox to a remote service and retrieving data on demand.

## Angular ComboBox Remote Binding Example + The sample below demonstrates remote binding using the [dataPreLoad]({environment:angularApiUrl}/classes/IgxComboComponent.html#dataPreLoad) property to load new chunk of remote data: @@ -20,6 +22,7 @@ The sample below demonstrates remote binding using the [dataPreLoad]({environmen ## Usage + To get started with the ComboBox component, first you need to import the `IgxComboModule` in your **app.module.ts** file. In this demo, a remote service is used for server requests, therefore, we also need to include the `HttpClientModule`: ```typescript @@ -40,6 +43,7 @@ export class AppModule {} ``` ### Define Remote Service + When binding a combobox to remote data, we need to have an available service that will load data on demand from a server. The combobox component exposes the [virtualizationState]({environment:angularApiUrl}/classes/IgxComboComponent.html#virtualizationState) property which gives the current state of a combobox - the first index and the number of items that need to be loaded. In order to show properly the scroll size, the [totalItemCount]({environment:angularApiUrl}/classes/IgxComboComponent.html#totalItemCount) property should have value that corresponds to the total items on the server. The code below defines a simple service that has a `getData()` method, which receives combobox's current state information and returns data as an observable: @@ -67,6 +71,7 @@ export class RemoteService { ``` ### Binding ComboBox to Remote Service + When data is returned from a service as an observable, we can set it to the combobox component using the [async](https://angular.io/api/common/AsyncPipe) pipe: ```html @@ -211,11 +216,11 @@ export class ComboRemoteComponent implements OnInit { > [!Note] > Anytime new data is loaded, we update the `totalItemCount` property, in order to have proper size of the list's scroll bar. In that case, the service returns total size using the property `@odata.count`. - > [!Note] > A service needs to be included as a provider. ### Handling Selection + When using a combobox bound to remote data loaded in chunks and dealing with a more complex data type (e.g. objects), it is necessary to define a `valueKey`. As stated in the [combobox topic](combo.md#data-value-and-display-properties), when no `valueKey` is specified, the combobox will try to handle selection by `equality (===)`. Since the objects that will be marked as selected will not be the same as the object that are continuously loaded, the selection will fail. > [!Note] @@ -224,22 +229,24 @@ When using a combobox bound to remote data loaded in chunks and dealing with a m When the combobox is bound to remote data, setting value/selected items through API will only take into account the items that are loaded in the current chunk. If you want to set an initial value, make sure those specific items are loaded before selecting. ## API Summary +
-* [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) +- [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) +- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) ## Additional Resources +
-* [ComboBox Component](combo.md) -* [ComboBox Features](combo-features.md) -* [ComboBox Templates](combo-templates.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Single Select ComboBox](simple-combo.md) +- [ComboBox Component](combo.md) +- [ComboBox Features](combo-features.md) +- [ComboBox Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/combo-templates.md b/en/components/combo-templates.md index b3b92902a7..bf87bb0a05 100644 --- a/en/components/combo-templates.md +++ b/en/components/combo-templates.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # ComboBox Templates +

The Ignite UI for Angular ComboBox Component allows defining custom templates for different areas such as header, footer, items, empty list and adding button.

@@ -19,6 +20,7 @@ The Ignite UI for Angular ComboBox Component allows defining custom templates fo ## Usage + To get started with the ComboBox component, first you need to import the `IgxComboModule` in your **app.module.ts** file: ```typescript @@ -36,9 +38,11 @@ export class AppModule {} ``` ## Template Types + When defining combobox templates, you need to reference them using the following predefined reference names: ### Item template + Use selector `[igxComboItem]`: ```html @@ -53,6 +57,7 @@ Use selector `[igxComboItem]`: ``` ### Header Item template + Use selector `[igxComboHeaderItem]`: ```html @@ -64,6 +69,7 @@ Use selector `[igxComboHeaderItem]`: ``` ### Header template + Use selector `[igxComboHeader]`: ```html @@ -75,6 +81,7 @@ Use selector `[igxComboHeader]`: ``` ### Footer template + Use selector `[igxComboFooter]`: ```html @@ -86,6 +93,7 @@ Use selector `[igxComboFooter]`: ``` ### Empty template + Use selector `[igxComboEmpty]`: ```html @@ -97,6 +105,7 @@ Use selector `[igxComboEmpty]`: ``` ### Add template + Use selector `[igxComboAddItem]`: ```html @@ -110,6 +119,7 @@ Use selector `[igxComboAddItem]`: ``` ### Toggle Icon Template + Use selector `[igxComboToggleIcon]`: ```html @@ -121,6 +131,7 @@ Use selector `[igxComboToggleIcon]`: ``` ### Clear Icon Template + Use selector `[igxComboClearIcon]`: ```html @@ -132,6 +143,7 @@ Use selector `[igxComboClearIcon]`: ``` ## Templating ComboBox Input + When used with templates, the `igxComboClearIcon` and the `igxComboToggleIcon` selectors, change how the respective buttons appear in the combobox input. Passing content inside of the `igx-combo` also allows templating of the combobox input similar to the way an `igx-input-group` can be templated (using `igx-prefix`, `igx-suffix` and `igxLabel`). The code snippet below illustrates how to add an appropriate label and prefix to the combobox input: ```html @@ -142,22 +154,24 @@ When used with templates, the `igxComboClearIcon` and the `igxComboToggleIcon` s ``` ## API Summary +
-* [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) +- [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) +- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) ## Additional Resources +
-* [ComboBox Component](combo.md) -* [ComboBox Features](combo-features.md) -* [ComboBox Remote Binding](combo-remote.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Single Select ComboBox](simple-combo.md) +- [ComboBox Component](combo.md) +- [ComboBox Features](combo-features.md) +- [ComboBox Remote Binding](combo-remote.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/combo.md b/en/components/combo.md index 99cc4fd1aa..64788fc724 100644 --- a/en/components/combo.md +++ b/en/components/combo.md @@ -23,13 +23,14 @@ In this Angular ComboBox example, you can see how users can filter items and per ## Angular ComboBox Features The combobox control exposes the following features: - * Data Binding - local data and [remote data](combo-remote.md) - * [Value Binding](combo-features.md#data-binding) - * [Filtering](combo-features.md#filtering) - * [Grouping](combo-features.md#grouping) - * [Custom Values](combo-features.md#custom-values) - * [Templates](combo-templates.md) - * Integration with [Template Driven Forms](input-group.md) and [Reactive Forms](angular-reactive-form-validation.md) + +- Data Binding - local data and [remote data](combo-remote.md) +- [Value Binding](combo-features.md#data-binding) +- [Filtering](combo-features.md#filtering) +- [Grouping](combo-features.md#grouping) +- [Custom Values](combo-features.md#custom-values) +- [Templates](combo-templates.md) +- Integration with [Template Driven Forms](input-group.md) and [Reactive Forms](angular-reactive-form-validation.md) ## Getting Started with Ignite UI for Angular ComboBox @@ -39,7 +40,7 @@ To get started with the Ignite UI for Angular ComboBox component, first you need ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxComboModule` in your **app.module.ts** file. @@ -105,8 +106,8 @@ Our combobox is now bound to the array of cities, but we still haven't told the Since the combobox is bound to an array of complex data (i.e. objects), we need to specify a property that the control will use to handle the selected items. The control exposes two `@Input` properties - [valueKey]({environment:angularApiUrl}/classes/IgxComboComponent.html#valueKey) and [displayKey]({environment:angularApiUrl}/classes/IgxComboComponent.html#displayKey): - - `valueKey` - *Optional, recommended for object arrays* - Specifies which property of the data entries will be stored for the combobox's selection. If `valueKey` is omitted, the combobox value will use references to the data entries (i.e. the selection will be an array of entries from `igxCombo.data`). - - `displayKey` - *Required for object arrays* - Specifies which property will be used for the items' text. If no value is specified for `displayKey`, the combobox will use the specified `valueKey` (if any). +- `valueKey` - _Optional, recommended for object arrays_ - Specifies which property of the data entries will be stored for the combobox's selection. If `valueKey` is omitted, the combobox value will use references to the data entries (i.e. the selection will be an array of entries from `igxCombo.data`). +- `displayKey` - _Required for object arrays_ - Specifies which property will be used for the items' text. If no value is specified for `displayKey`, the combobox will use the specified `valueKey` (if any). In our case, we want the combobox to display the `name` of each city and the combobox value to store the `id` of each city. Therefore, we are providing these properties to the combobox's `displayKey` and `valueKey`, respectively: @@ -243,9 +244,11 @@ public singleSelection(event: IComboSelectionChangeEventArgs) { ## Keyboard Navigation When combobox is closed and focused: + - `ArrowDown` or `Alt` + `ArrowDown` will open the combobox's drop down and will move focus to the search input. When combobox is opened and search input is focused: + - `ArrowUp` or `Alt` + `ArrowUp` will close the combobox's drop down and will move focus to the closed combobox. - `ArrowDown` will move focus from the search input to the first list item. If the list is empty and custom values are enabled will move it to the Add new item button. @@ -254,6 +257,7 @@ When combobox is opened and search input is focused: > Any other key stroke will be handled by the input. When combobox is opened and list item is focused: + - `ArrowDown` will move to the next list item. If the active item is the last one in the list and custom values are enabled, the focus will be moved to the Add item button. - `ArrowUp` will move to the previous list item. If the active item is the first one in the list, the focus will be moved back to the search input. @@ -277,6 +281,68 @@ When combobox is opened, allow custom values are enabled and add item button is ## Styling +### Combo Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$empty-list-background$empty-list-placeholder-colorThe combo placeholder text color.
$toggle-button-background
$toggle-button-foregroundThe combo toggle button foreground color.
$toggle-button-background-focusThe combo toggle button background color when focused.
$toggle-button-background-focus--borderThe combo toggle button background color when focused (border variant).
$toggle-button-foreground-filledThe combo toggle button foreground color when filled.
$toggle-button-background-disabledThe combo toggle button background color when disabled.
$toggle-button-foreground-disabledThe combo toggle button foreground color when disabled.
$toggle-button-background-focus$toggle-button-foreground-focusThe combo toggle button foreground color when focused.
$clear-button-background-focus$clear-button-foreground-focusThe combo clear button foreground color when focused.
+ + Using the [`Ignite UI for Angular Theming`](themes/index.md), we can greatly alter the combobox appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the `index` file in our style file: ```scss @@ -284,7 +350,7 @@ Using the [`Ignite UI for Angular Theming`](themes/index.md), we can greatly alt // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`combo-theme`]({environment:sassApiUrl}/themes#function-combo-theme). By setting the `$toggle-button-background`, the theme automatically determines suitable state colors and contrast foregrounds for the button. You can also specify additional parameters, such as `$search-separator-border-color`: @@ -321,7 +387,6 @@ The last step is to include the component's theme. > [!NOTE] > The [`IgxCombo`]({environment:angularApiUrl}/classes/igxcombocomponent.html) component uses the [`IgxOverlay`](overlay.md) service to hold and display the combobox items list container. To properly scope your styles you might have to use an [`OverlaySetting.outlet`]({environment:angularApiUrl}/interfaces/overlaysettings.html#outlet). For more details check the [`IgxOverlay Styling Guide`](overlay-styling.md). Also is necessary to use `::ng-deep` when we are styling the components. - > [!Note] > The default `type` of the `IgxCombo` is `box` unlike the [`IgxSelect`](select.md) where it is `line`. @@ -336,6 +401,45 @@ The last step is to include the component's theme.
+### Styling with Tailwind + +You can style the `combo` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-combo`, `dark-combo`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [combo-theme]({environment:sassApiUrl}/themes#function-combo-theme). The syntax is as follows: + +```html + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your combo should look like this: + +
+ +
+ ## Known Issues - The combobox input that displays the selected items is not editable. However, due to browser specifics in FireFox, the cursor is visible. @@ -346,34 +450,37 @@ The last step is to include the component's theme. > The combobox uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for the combobox. For more details see [`igxForOf Known Issues`](for-of.md#known-limitations) section. ## API Summary +
-* [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) +- [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) +- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) Additional [angular components](https://www.infragistics.com/products/ignite-ui-angular) and/or directives with relative APIs that were used: -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) ## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxCheckbox Theme]({environment:sassApiUrl}/themes#function-checkbox-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) + +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxCheckbox Theme]({environment:sassApiUrl}/themes#function-checkbox-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources +
-* [ComboBox Features](combo-features.md) -* [ComboBox Remote Binding](combo-remote.md) -* [ComboBox Templates](combo-templates.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Single Select ComboBox](simple-combo.md) +- [ComboBox Features](combo-features.md) +- [ComboBox Remote Binding](combo-remote.md) +- [ComboBox Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/dashboard-tile.md b/en/components/dashboard-tile.md index e02c81cdb7..04aa576dd2 100644 --- a/en/components/dashboard-tile.md +++ b/en/components/dashboard-tile.md @@ -65,12 +65,12 @@ export class AppModule {} 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) +- [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). @@ -87,14 +87,14 @@ You are not locked into a single visualization when you bind the `DataSource`, a 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: - +Dashboard Tile Toolbar 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. +- 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. @@ -116,15 +116,15 @@ This demo demonstrates dashboard tile integration with the Angular Geographic Ma ## 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) +- [`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) +- [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/date-picker.md b/en/components/date-picker.md index 1edb035561..880e3a8153 100644 --- a/en/components/date-picker.md +++ b/en/components/date-picker.md @@ -5,13 +5,14 @@ _keywords: angular datepicker, angular datepicker component, angular UI componen --- # Angular Date Picker Component Overview -Angular Date Picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up. Lightweight and simple to use, the Date Picker in Angular lets users to navigate to a desired date with several view options – month, year, decade. There are the usual min, max, and required properties to add validation. -The Ignite UI for Angular Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The Angular Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration. +Angular Date Picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up. Lightweight and simple to use, the Date Picker in Angular lets users to navigate to a desired date with several view options – month, year, decade. There are the usual min, max, and required properties to add validation. + +The Ignite UI for Angular Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The Angular Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration. ## Angular Date Picker Example -Below you can see a sample that demonstrates how the Angular Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it. +Below you can see a sample that demonstrates how the Angular Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it. ``` + More information about this can be found in [DateTime Editor's ISO section](date-time-editor.md#iso). Two-way binding is possible through `ngModel`: + ```html ``` As well as through the `value` input: + ```html ``` Additionally, `formControlName` can be set on the picker, to use it in a reactive form: + ```html
@@ -138,6 +146,7 @@ export class SampleFormComponent { > The picker always returns a `Date` value, this means that If it is model bound or two-way bound to a string variable, after a new date has been chosen, it will be of type `Date`. ### Projecting components + The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) allows the projection of child components that the [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) supports (with the exception of [`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html)) - [`igxLabel`](label-input.md), [`igx-hint / IgxHint`](input-group.md#hints), [`igx-prefix / igxPrefix`](input-group.md#prefix--suffix), [`igx-suffix / igxSuffix`](input-group.md#prefix--suffix). More detailed information about this can be found in the [Label & Input](label-input.md) topic. ```html @@ -145,9 +154,11 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker keyboard_arrow_down ``` + The above snippet will add an additional toggle icon at the end of the input, right after the default clear icon. This will not remove the default toggle icon, though as prefixes and suffixes can be stacked one after the other. #### Customizing the toggle and clear icons + The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) can be configured with [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) and [`IgxPickerClearComponent`]({environment:angularApiUrl}/classes/igxpickerclearcomponent.html). These can be used to change the toggle and clear icons without having to add your own click handlers. ```html @@ -163,14 +174,18 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker ``` #### Custom action buttons + The picker's action buttons can be modified in two ways: + - the button's text can be changed using the [`todayButtonLabel`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#todayButtonLabel) and the [`cancelButtonLabel`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#cancelButtonLabel) input properties: + ```html ``` - the whole buttons can be templated using the [`igxPickerActions`]({environment:angularApiUrl}/classes/igxpickeractionsdirective.html) directive: With it you gain access to the date picker's [`calendar`](calendar.md) and all of its members: + ```html @@ -196,10 +211,13 @@ Since the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdate ## Examples ### Dialog Mode + The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) also supports a `dialog` mode: + ```html ``` + @@ -208,6 +226,7 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker
### Display and input format + [`inputFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#inputFormat) and [`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) are properties which can be set to make the picker's editor follow a specified format. The [`inputFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#inputFormat) property is used when the picker is in `dropdown` mode and it governs the input's editable mask, as well as its placeholder (if none is set). Additionally, the [`inputFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#inputFormat) is locale based, so if none is provided, the picker will default to the one used by the browser. A good thing to note is that the the Angular Date Picker Component in Ignite UI will always add a leading zero on the `date` and `month` portions if they were provided in a format that does not have it, e.g. `d/M/yy` becomes `dd/MM/yy`. This applies only during editing. @@ -228,6 +247,7 @@ More information about these can be found in the [`IgxDateTimeEditor`](date-time > The `IgxDatePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. ### Increment and decrement + The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) exposes [`increment`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#increment) and [`decrement`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#decrement) methods. Both of which come from the [`IgxDateTimeEditorDirective`](date-time-editor.md#increment-decrement) and can be used for incrementing and decrementing a specific [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) of the currently set date. ```html @@ -238,16 +258,19 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker ``` It also has as a [`spinDelta`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#spinDelta) input property which can be used to increment or decrement a specific date part of the currently set date. + ```html ``` ### In Angular Forms + The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) supports all directives from the core [FormsModule](https://angular.io/api/forms/FormsModule), [NgModel](https://angular.io/api/forms/NgModel) and [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl), [`FormGroup`](https://angular.io/api/forms/FormGroup), etc.). This also includes the [Forms Validators](https://angular.io/api/forms/Validators) functions. In addition, the component's [`minValue`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#maxValue) properties act as form validators. You can see the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) in a reactive form by visiting our [Reactive Forms Integration](angular-reactive-form-validation.md) topic. #### Using date and time picker together + In some cases when the IgxDatePicker and the [`IgxTimePicker`](time-picker.md) are used together, we might need them to be bound to one and the same Date object value. To achieve that in template driven forms, use the `ngModel` to bind both components to the same Date object. @@ -269,12 +292,15 @@ In reactive forms, we can handle the [`valueChange`]({environment:angularApiUrl}
### Calendar Specific settings + The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) uses the [`IgxCalendarComponent`](calendar.md) and you can modify some of its settings via the properties that the date picker exposes. Some of these include [`displayMonthsCount`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayMonthsCount) which allows more than one calendar to be displayed when the picker expands, [`weekStart`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#weekStart) which determines the starting day of the week, [`showWeekNumbers`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#showWeekNumbers) which shows the number for each week in the year and more. ## Internationalization + The localization of the [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) can be controlled through its [`locale`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#locale) input. Additionally, using the `igxCalendarHeader` and the `igxCalendarSubheader` templates, provided by the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), you can specify the look of your header and subheader. More information on how to use these templates can be found in the [**IgxCalendarComponent**](calendar.md) topic. Here is how an Angular Date Picker with Japanese locale definition would look like: + ```html @@ -288,6 +314,7 @@ Here is how an Angular Date Picker with Japanese locale definition would look li ``` ## Styling + To get started with styling the date picker, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -329,32 +356,36 @@ The last step is to pass the custom Date Picker theme: ## API References +
-* [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) -* [IgxDateTimeEditorDirective]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) -* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) +- [IgxDateTimeEditorDirective]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) +- [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Theming Dependencies +
-* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) ## Additional Resources -* [Time Picker](time-picker.md) -* [Date Time Editor](date-time-editor.md) -* [Date Range Picker](date-range-picker.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) + +- [Time Picker](time-picker.md) +- [Date Time Editor](date-time-editor.md) +- [Date Range Picker](date-range-picker.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) Our community is active and always welcoming to new ideas. -* [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) + +- [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/date-range-picker.md b/en/components/date-range-picker.md index be5f95ca1d..8f2761db28 100644 --- a/en/components/date-range-picker.md +++ b/en/components/date-range-picker.md @@ -9,6 +9,7 @@ _keywords: Angular Date Range Picker, Date Range Picker, Date Picker, Angular Da The Angular Date Range Picker is a lightweight component that includes a text input and a calendar pop-up, allowing users to easily select start and end dates. It is highly customizable to fit various application requirements, offering features such as date range restrictions, configurable date formats, and more. ## Angular Date Range Picker Example + Below is a sample demonstrating the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) component in action, where a calendar pop-up allows users to select start and end dates. ``` ### Display Separate Editable Inputs + The Angular Date Range Picker component also allows configuring two separate inputs for start and end date. This can be achieved by using the [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) and [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) as children of the date range picker, as shown in the demo below: ```html @@ -111,6 +115,7 @@ The Angular Date Range Picker component also allows configuring two separate inp ``` + - Both the [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) and [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) extend the existing [`IgxInputGroupComponent`](input-group.md). For such a configuration to work, defining an [`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) is required. In addition, all other components and directives available to the [`IgxInputGroupComponent`](input-group.md) can also be used. - In order to enable date editing for both inputs, you need to decorate them with [`igxDateTimeEditor`](date-time-editor.md) directive. @@ -122,6 +127,7 @@ The Angular Date Range Picker component also allows configuring two separate inp ### Popup modes By default, when clicked, the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) opens its calendar pop-up in `dropdown` mode. Alternatively, the calendar can be opened in `dialog` mode by setting the `Mode` property to `dialog`. + ```html ``` @@ -143,7 +149,7 @@ The [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdater The available keyboard navigation options vary depending on whether the component is in single input or two inputs mode. -**Two Inputs Mode:** +**Two Inputs Mode:** |Keys|Description| |----|-----------| @@ -204,6 +210,7 @@ Or for two inputs: ``` #### Toggle and clear icons + In the default configuration, with a single read-only input, a default calendar icon is shown as a prefix and a clear icon - as a suffix. These icons can be changed or redefined using the [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) and [`IgxPickerClearComponent`]({environment:angularApiUrl}/classes/igxpickerclearcomponent.html). They can be decorated with either [`igxPrefix`](input-group.md#prefix--suffix) or [`igxSuffix`](input-group.md#prefix--suffix), which will define their position - at the start of the input or at the end respectively: ```html @@ -265,7 +272,7 @@ public customRanges: CustomDateRange[] = [ ``` -In addition, custom content or actions can be templated using the [`igxPickerActions`]({environment:angularApiUrl}/classes/igxpickeractionsdirective.html) directive. The following demo shows the predefined and custom ranges along with the templated actions: +In addition, custom content or actions can be templated using the [`igxPickerActions`]({environment:angularApiUrl}/classes/igxpickeractionsdirective.html) directive. The following demo shows the predefined and custom ranges along with the templated actions: The `IgxDateRangePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. ### Forms and Validation + The Date Range Picker Component supports all directives from the core [FormsModule](https://angular.io/api/forms/FormsModule), [NgModel](https://angular.io/api/forms/NgModel) and [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl), [`FormGroup`](https://angular.io/api/forms/FormGroup), etc.). This also includes the [Forms Validators](https://angular.io/api/forms/Validators) functions. In addition, the component's [min and max values](#min-and-max-values) and [disabledDates](#disabled-and-special-dates) also act as form validators. The [NgModel](https://angular.io/api/forms/NgModel) and validators can be set on the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) or on the individual start and end date inputs. @@ -345,6 +353,7 @@ When using two separate inputs, it is possible to set the model and required pro
### Min and max values + You can specify [`minValue`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#maxValue) properties to restrict the user input by disabling calendar dates that are outside the range defined by those values. ```typescript @@ -370,6 +379,7 @@ public maxDate = new Date(2020, 11, 1); ``` The `IgxDateRangePickerComponent` is also a validator which means it controls its validity internally using `minValue` and `maxValue`. You can also access both of them through `ngModel`: + ```html @@ -478,7 +488,7 @@ To get started with styling the `igxDateRangePicker`, we need to import the `ind // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` The Date Range Picker Component exposes `date-range-picker-theme` and utilizes several components and directives, including `igxInputGroupComponent`, `igxCalendar` and `igxOverlay`. Any global styling for the aforementioned components and directives will affect the `igxDateRangeComponent`. As the Date Range Picker Component uses the input group and calendar themes, we have to create new themes that extend the [`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme) and [`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) and use some of their parameters to style the date range picker in conjunction with the date range picker theme. We will use a single custom color palette to define the colors to use across all themes: @@ -555,6 +565,7 @@ Regarding style scoping, you should refer to both styling sections [Overlay Scop ## Application Demo + The demo below defines a form for flight tickets that uses the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html). If no dates are selected, an [`IgxHint`]({environment:angularApiUrl}/classes/igxhintdirective.html) is used to display a validation error. The selection of the dates is restricted by the [`minValue`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#maxValue) properties of the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) @@ -566,31 +577,35 @@ The demo below defines a form for flight tickets that uses the [`IgxDateRangePic
## API References +
-* [IgxDateRangePickerComponent]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) -* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxDateRangePickerComponent]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) +- [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Theming Dependencies -* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) ## Additional Resources + Related topics: -* [Date Time Editor](date-time-editor.md) -* [Label & Input](label-input.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) -* [Date Picker](date-picker.md) + +- [Date Time Editor](date-time-editor.md) +- [Label & Input](label-input.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Date Picker](date-picker.md) Our community is active and always welcoming to new ideas. -* [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) + +- [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/date-time-editor.md b/en/components/date-time-editor.md index bd85b24818..131c439460 100644 --- a/en/components/date-time-editor.md +++ b/en/components/date-time-editor.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Date Time Editor Directive +

The Ignite UI for Angular Date Time Editor Directive allows the user to set and edit the date and time in a chosen input element. The user can edit the date or time portion, using an editable masked input. Additionally, one can specify a desired display and input format, as well as min and max values to utilize validation.

## Angular Date Time Editor Directive Example @@ -24,7 +25,7 @@ To get started with the Ignite UI for Angular Date Time Editor directive, first ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxDateTimeEditorModule` in your **app.module.ts** file. @@ -74,7 +75,9 @@ Now that you have the Ignite UI for Angular Date Time Editor module or directive To use an input as a date time editor, set an igxDateTimeEditor directive and a valid date object as value. In order to have complete editor look and feel, wrap the input in an [igx-input-group](input-group.md). This will allow you to not only take advantage of the following directives [`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html), [`igxLabel`](label-input.md), [`igx-prefix`](input-group.md#prefix--suffix), [`igx-suffix`](input-group.md#prefix--suffix), [`igx-hint`](input-group.md#hints), but will cover common scenarios when dealing with form inputs as well. ### Binding + A basic configuration scenario setting a Date object as a [`value`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#value): + ```typescript public date = new Date(); ``` @@ -92,25 +95,31 @@ To create a two-way data-binding, set an `ngModel`: ``` +
#### Binding to ISO strings + The `IgxDateTimeEditorDirective` accepts an [`ISO 8601`](https://tc39.es/ecma262/#sec-date-time-string-format) strings. The string can be a full `ISO` string, in the format `YYYY-MM-DDTHH:mm:ss.sssZ` or it could be separated into date-only and time-only portions. ##### Date-only + If a date-only string is bound to the directive, it needs to follow the format - `YYYY-MM-DD`. This applies only when binding a string value to the directive, the [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) is still used when typing values in the editor and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be `T00:00:00`. ##### Time-only + Time-only strings are normally not defined in the `ECMA` specification, however to allow the directive to be integrated in scenarios which require time-only solutions, it supports the 24 hour format - `HH:mm:ss`. The 12 hour format is not supported. Please also note that this applies for _bound values only_. ##### Full ISO string + If a full `ISO` string is bound, the directive will parse it only if all elements required by [`Date.parse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#date_time_string_format) are provided. All false values, including `InvalidDate` will be parsed as `null`. Incomplete date-only, time-only, or full `ISO` strings will be parsed as `InvalidDate`. ### Keyboard Navigation + Date Time Editor Directive has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse. - Ctrl / Cmd + Arrow Left / Right - navigates between date sections. On Ctrl / Cmd + Right it goes to the end of the section. If already there it goes to the end of next section if any. It works in a similar fashion in the opposite direction. @@ -122,6 +131,7 @@ Date Time Editor Directive has intuitive keyboard navigation that makes it easy ## Examples ### Display and input format + The [`IgxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) supports different display and input formats. It uses Angular's [`DatePipe`](https://angular.io/api/common/DatePipe), which allows it to support predefined format options, such as `shortDate` and `longDate`. It can also accept a constructed format string using characters supported by the `DatePipe`, e.g. `EE/MM/yyyy`. Notice that formats like `shortDate`, `longDate`, etc., can be used as [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) only. Also, if no [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) is provided, the editor will use the [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputformat) as its [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat). @@ -157,7 +167,9 @@ The table bellow shows formats that are supported by the directive's [`inputForm > The `IgxDateTimeEditorDirective` directive supports IME input. When typing in an Asian language input, the control will display input method compositions and candidate lists directly in the control’s editing area, and immediately re-flow surrounding text as the composition ends. ### Min max value + You can specify [`minValue`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#maxValue) properties to restrict input and control the validity of the ngModel. + ```typescript public minDate = new Date(2020, 1, 15); public maxDate = new Date(2020, 11, 1); @@ -169,9 +181,11 @@ public maxDate = new Date(2020, 11, 1); ``` + The [`minValue`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#minValue) and [`minValue`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#minValue) inputs can also be of type `string`, see [Binding to ISO strings](#iso). ### Increment and decrement + [`igxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) directive exposes public [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) and [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) methods. They increment or decrement a specific [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) of the currently set date and time and can be used in a couple of ways. In the first scenario, if no specific [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) is passed to the method, a default [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) will increment or decrement, based on the specified [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) and the internal directive implementation. In the second scenario, you can explicitly specify what [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) to manipulate as it may suite different requirements. @@ -188,12 +202,14 @@ You may compare both in the following sample: Additionally, `spinDelta` is an input property of type [`DatePartDeltas`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) and it can be used to apply a different delta to each date time segment. It will be applied when spinning with the keyboard, as well as when spinning with the [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) and [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) methods, as long as they don't have the `delta` parameter provided since it will take precedence over `spinDelta`. ### In Angular Forms + The Date Time Editor Directive supports all of the form directives from the core FormsModule [`NgModel`](https://angular.io/api/forms/NgModel) and [`ReactiveFormsModule`](https://angular.io/api/forms/ReactiveFormsModule) (FormControl, FormGroup, etc.). This also includes the [Forms `Validators`](https://angular.io/api/forms/Validators) functions. The following example illustrates the use of the `required` validator in a Template-driven Form. > [!NOTE] > If needed, you can revert back to a valid state by handling the `validationFailed` event and changing the `newValue` property of the available arguments. Template-driven form example: + ```html @@ -206,6 +222,7 @@ Template-driven form example: ``` ### Text Selection + You can force the component to select all of the input text on focus using [`igxTextSelection`]({environment:angularApiUrl}/classes/igxtextselectiondirective.html). Find more info on [`igxTextSelection`]({environment:angularApiUrl}/classes/igxtextselectiondirective.html) at [Label & Input](label-input.md#focus--text-selection). ```html @@ -218,26 +235,31 @@ You can force the component to select all of the input text on focus using [`igx > In order for the component to work properly, it is crucial to set [`igxTextSelection`]({environment:angularApiUrl}/classes/igxtextselectiondirective.html) after the [`igxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) directive. The reason for this is both directives operate on the input `focus` event so text selection should happen after the mask is set. ## Styling + For details check out the [`Input Group styling guide`](input-group.md#styling).
## API References -* [IgxDateTimeEditorDirective]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) -* [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html) -* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) + +- [IgxDateTimeEditorDirective]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) +- [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme)
## Additional Resources + Related topics: -* [Mask](mask.md) -* [Label & Input](label-input.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) + +- [Mask](mask.md) +- [Label & Input](label-input.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) Our community is active and always welcoming to new ideas. -* [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) + +- [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/dialog.md b/en/components/dialog.md index fd770fb3d9..7de72357e6 100644 --- a/en/components/dialog.md +++ b/en/components/dialog.md @@ -5,12 +5,13 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Dialog Window Component Overview +

Use the Ignite UI for Angular Dialog Window component to display messages or present forms for users to fill out. The component opens a dialog window centered on top of app content. You can also provide a standard alert message that users can cancel.

## Angular Dialog Window Example - @@ -24,7 +25,7 @@ To get started with the Ignite UI for Angular Dialog Window component, first you ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxDialogModule` in your **app.module.ts** file. @@ -79,7 +80,7 @@ Now that you have the Ignite UI for Angular Dialog Window module or directives i ### Alert Dialog -To create an alert dialog, in the template of our email component, we add the following code. We have to set the [`title`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#title), [`message`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#message), +To create an alert dialog, in the template of our email component, we add the following code. We have to set the [`title`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#title), [`message`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#message), [`leftButtonLabel`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftButtonLabel) and handle [`leftButtonSelect`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftButtonSelect) event: ```html @@ -100,7 +101,7 @@ If everything's done right, you should see the demo sample shown above in your b ### Standard Dialog -To create a standard dialog, in the template of our file manager component, we add the following code. We have to set the [`title`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#title), [`message`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#message), +To create a standard dialog, in the template of our file manager component, we add the following code. We have to set the [`title`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#title), [`message`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#message), [`leftButtonLabel`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftButtonLabel), [`rightButtonLabel`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#rightButtonLabel), and handle [`leftButtonSelect`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#leftButtonSelect) and [`rightButtonSelect`]({environment:angularApiUrl}/classes/igxdialogcomponent.html#rightButtonSelect) events: ```html @@ -117,8 +118,8 @@ To create a standard dialog, in the template of our file manager component, we a ``` - @@ -166,8 +167,8 @@ We add two input groups consisting of a label and and input decorated with the [ ``` - @@ -230,8 +231,8 @@ export class HomeComponent { } ``` -> [!Note] -> The same approach should be used for the animation settings, use the `openAnimation` and `closeAnimation` properties to define animation params like duration. +> [!Note] +> The same approach should be used for the animation settings, use the `openAnimation` and `closeAnimation` properties to define animation params like duration. `params` object example: ```typescript @@ -252,6 +253,39 @@ By default when the dialog is opened the Tab key focus is trapped within it, i.e ## Styling +### Dialog Theme Property Map + +Changing the `$background` property automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
+
$background
+ 		$title-colorThe dialog title text color.
$message-colorThe dialog message text color.
$border-colorThe border color used for dialog component.
+ To get started with styling the dialog window, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -259,7 +293,7 @@ To get started with styling the dialog window, we need to import the `index` fil // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`dialog-theme`]({environment:sassApiUrl}/themes#function-dialog-theme) and accepts parameters that style the dialog. By providing the `$background`, the theme automatically selects suitable contrast colors for the foreground properties. However, you can still manually define them if desired. @@ -317,31 +351,33 @@ The last step is to **include** the component theme in our application. ### Demo -
## API Summary +
-* [IgxDialogComponent]({environment:angularApiUrl}/classes/igxdialogcomponent.html) -* [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) -* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxDialogComponent]({environment:angularApiUrl}/classes/igxdialogcomponent.html) +- [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) +- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Theming Dependencies -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. -* [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) + +- [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/display-density.md b/en/components/display-density.md index d5caa00b79..687c548ae2 100644 --- a/en/components/display-density.md +++ b/en/components/display-density.md @@ -6,7 +6,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI # Size -Size configuration can significantly improve the visual representation of large amounts of data. In Ignite UI for Angular, we provide a pre-defined set of options: +Size configuration can significantly improve the visual representation of large amounts of data. In Ignite UI for Angular, we provide a pre-defined set of options: + - **large** - **medium** - **small** @@ -14,8 +15,9 @@ Size configuration can significantly improve the visual representation of large Using the `--ig-size` custom CSS property, you can configure the size on an application or a component level. ## Angular Size Example - @@ -126,20 +128,23 @@ The `sizable(10px, 20px, 30px)` function generates a CSS expression that automat This mathematical approach using `clamp()`, `min()`, `max()`, and `calc()` functions allows components to automatically switch between size values based on the current `--ig-size` setting. ## API References +
-* [Themes - Sizable Mixin]({environment:sassApiUrl}/themes#mixin-sizable) -* [Themes - Sizable Function]({environment:sassApiUrl}/themes#function-sizable) +- [Themes - Sizable Mixin]({environment:sassApiUrl}/themes#mixin-sizable) +- [Themes - Sizable Function]({environment:sassApiUrl}/themes#function-sizable) ### Sizing and Spacing Functions -* [Utilities - Pad]({environment:sassApiUrl}/utilities#function-pad) -* [Utilities - Pad Inline]({environment:sassApiUrl}/utilities#function-pad-inline) -* [Utilities - Pad Block]({environment:sassApiUrl}/utilities#function-pad-block) + +- [Utilities - Pad]({environment:sassApiUrl}/utilities#function-pad) +- [Utilities - Pad Inline]({environment:sassApiUrl}/utilities#function-pad-inline) +- [Utilities - Pad Block]({environment:sassApiUrl}/utilities#function-pad-block) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) +- [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/divider.md b/en/components/divider.md index 9c0776b605..cb85624fdf 100644 --- a/en/components/divider.md +++ b/en/components/divider.md @@ -13,8 +13,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI By default the divider is a solid horizontal line. - @@ -26,7 +26,7 @@ To get started with the Ignite UI for Angular Divider component, first you need ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxDividerModule` in your **app.module.ts** file. @@ -68,19 +68,21 @@ Now that you have the Ignite UI for Angular Divider module or directive imported ## Using the Angular Divider ### Vertical Divider + By adding the `vertical` attribute and setting its value to `true`, you can change the direction of the divider from horizontal to vertical. ```html ``` - ### Dashed Divider + The default style of the divider is a `solid` line but it can also be `dashed`. To change the default look simply use the `type` attribute of the divider and set its value to `dashed`. @@ -88,13 +90,14 @@ To change the default look simply use the `type` attribute of the divider and se ``` - ### Inset Divider + The divider can be set in on both sides. To inset the divider, set the `middle` attribute of the divider to `true` and provider the desired `inset` value, the divider will start shrinking from both ends. @@ -109,8 +112,8 @@ To inset the divider, set the `middle` attribute of the divider to `true` and pr ``` - @@ -118,15 +121,18 @@ To inset the divider, set the `middle` attribute of the divider to `true` and pr If the value of the `middle` attribute is set to a false value, or if the attribute is omitted altogether, the divider will set in only on the left. ## API References +
-* [IgxDividerDirective]({environment:angularApiUrl}/classes/igxdividerdirective.html) -* [IgxDividerDirective Styles]({environment:sassApiUrl}/themes#function-divider-theme) +- [IgxDividerDirective]({environment:angularApiUrl}/classes/igxdividerdirective.html) +- [IgxDividerDirective Styles]({environment:sassApiUrl}/themes#function-divider-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) + +- [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/dock-manager.md b/en/components/dock-manager.md index efd77d145e..05644dad42 100644 --- a/en/components/dock-manager.md +++ b/en/components/dock-manager.md @@ -10,8 +10,8 @@ The Ignite UI Dock Manager component provides means to manage the layout of your ## Angular Dock Manager Example - @@ -20,6 +20,7 @@ The Ignite UI Dock Manager component provides means to manage the layout of your ## Usage + The Dock Manager is a standard [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and as such can be used in an Angular application. Follow the steps below to add the Dock Manager package to your Angular project and set it up in order to use the component. @@ -41,6 +42,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; }) export class AppModule {} ``` + Next, one should call the `defineCustomElements()` function in the `main.ts` file: ```typescript diff --git a/en/components/drag-drop.md b/en/components/drag-drop.md index 38cc56cb20..b2f8ecfffb 100644 --- a/en/components/drag-drop.md +++ b/en/components/drag-drop.md @@ -5,6 +5,7 @@ _keywords: Angular Drag and Drop, Angular Drag and Drop Directives, Angular UI c --- # Angular Drag and Drop Directives Overview +

The Ignite UI for Angular Drag and Drop directives enable dragging of elements around the page. The supported features include free dragging, using a drag handle, drag ghost, animations and multiple drop strategies.

## Angular Drag and Drop Example @@ -12,8 +13,8 @@ _keywords: Angular Drag and Drop, Angular Drag and Drop Directives, Angular UI c Drag and drop icon to reposition it. - @@ -27,7 +28,7 @@ To get started with the Ignite UI for Angular Drag and Drop directives, first yo ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxDragDropModule` in your **app.module.ts** file. @@ -80,7 +81,7 @@ A drag operation starts when the end user swipes at least 5px in any direction. When the dragging starts, the [`dragStart`]({environment:angularApiUrl}/classes/igxdragdirective.html#dragStart) event is triggered. To prevent any actual movement to occur, the event can be canceled by setting the [`cancel`]({environment:angularApiUrl}/interfaces/idragstarteventargs.html#cancel) property to `true`. -Before any actual movement is about to be performed, the [`dragMove`]({environment:angularApiUrl}/classes/igxdragdirective.html#dragMove) event is also triggered, containing the last and next position of the pointer. It is triggered every time a movement is detected while dragging an element around. +Before any actual movement is about to be performed, the [`dragMove`]({environment:angularApiUrl}/classes/igxdragdirective.html#dragMove) event is also triggered, containing the last and next position of the pointer. It is triggered every time a movement is detected while dragging an element around. After the user releases the mouse/touch the drag ghost element is removed from the DOM and the [`dragEnd`]({environment:angularApiUrl}/classes/igxdragdirective.html#dragEnd) event will be emitted. @@ -107,20 +108,20 @@ The ghost element by default is a copy of the base element the `igxDrag` is used ```html -
- email - Moving {{ draggedElements }} item{{ (draggedElements > 1 ? 's' : '')}} -
+
+ email + Moving {{ draggedElements }} item{{ (draggedElements > 1 ? 's' : '')}} +
``` @@ -151,8 +152,8 @@ You can specify an element that is a child of the `igxDrag` by which to drag, si Drag the dialog using the handle in the following demo. - @@ -172,10 +173,10 @@ When the transition animation ends, if a ghost is created, it will be removed an You can have other types of animations that involve element transformations. That can be done like any other element either using the Angular Animations or straight CSS Animations to either the base `igxDrag` element or its ghost. If you want to apply them to the ghost, you would need to define a custom ghost and apply animations to its element. -Reorder items in the list using the drag handle. While dragging a list item other list items will re-order with animation. +Reorder items in the list using the drag handle. While dragging a list item other list items will re-order with animation. - @@ -204,13 +205,13 @@ By default, the [`igxDrop`]({environment:angularApiUrl}/classes/igxdropdirective The `igxDrop` comes with 4 drop strategies which are: `Default`, `Prepend`, `Insert` and `Append`: -* `Default` - does not perform any action when an element is dropped onto an `igxDrop` element and is implemented as a class named [`IgxDefaultDropStrategy`]({environment:angularApiUrl}/classes/igxdefaultdropstrategy.html). +- `Default` - does not perform any action when an element is dropped onto an `igxDrop` element and is implemented as a class named [`IgxDefaultDropStrategy`]({environment:angularApiUrl}/classes/igxdefaultdropstrategy.html). -* `Append` - always inserts the dropped element as a last child and is implemented as a class named [`IgxAppendDropStrategy`]({environment:angularApiUrl}/classes/igxappenddropstrategy.html). +- `Append` - always inserts the dropped element as a last child and is implemented as a class named [`IgxAppendDropStrategy`]({environment:angularApiUrl}/classes/igxappenddropstrategy.html). -* `Prepend` - always inserts the dropped element as first child and is implemented as a class named [`IgxPrependDropStrategy`]({environment:angularApiUrl}/classes/igxprependdropstrategy.html). +- `Prepend` - always inserts the dropped element as first child and is implemented as a class named [`IgxPrependDropStrategy`]({environment:angularApiUrl}/classes/igxprependdropstrategy.html). -* `Insert` - inserts the dragged element at last position. If there is a child under the element when it was dropped though, the `igxDrag` instanced element will be inserted at that child's position and the other children will be shifted. It is implemented as a class named [`IgxInsertDropStrategy`]({environment:angularApiUrl}/classes/igxinsertdropstrategy.html). +- `Insert` - inserts the dragged element at last position. If there is a child under the element when it was dropped though, the `igxDrag` instanced element will be inserted at that child's position and the other children will be shifted. It is implemented as a class named [`IgxInsertDropStrategy`]({environment:angularApiUrl}/classes/igxinsertdropstrategy.html). The way a strategy can be applied is by setting the `dropStrategy` input to one of the listed classes above. The value provided has to be a type and not an instance, since the `igxDrop` needs to create and manage the instance itself. @@ -226,7 +227,7 @@ public appendStrategy = IgxAppendDropStrategy; When using a specific drop strategy, its behavior can be canceled in the [`dropped`]({environment:angularApiUrl}/classes/igxdropdirective.html#dropped) events by setting the `cancel` property to true. The `dropped` event is specific to the `igxDrop`. If you does not have drop strategy applied to the `igxDrop` canceling the event would have no side effects. -*Example:* +_Example:_ ```html
@@ -243,6 +244,7 @@ public onDropped(event) { If you would like to implement your own drop logic, we advise binding to the `dropped` event and execute your logic there or extend the `IgxDefaultDropStrategy` class. ### Linking Drag to Drop Element + Using the [`dragChannel`]({environment:angularApiUrl}/classes/igxdragdirective.html#dragChannel) and [`dropChannel`]({environment:angularApiUrl}/classes/igxdropdirective.html#dropChannel) input on respectively `igxDrag` and `igxDrop` directives, you can link different elements to interact only between each other. For example, if an `igxDrag` element needs to be constrained so it can be dropped on specific `igxDrop` element and not all available, this can easily be achieved by assigning them the same channel. @@ -260,8 +262,8 @@ Using the [`dragChannel`]({environment:angularApiUrl}/classes/igxdragdirective.h Drag e-mails on the right into the folders on the left. - @@ -269,7 +271,7 @@ Drag e-mails on the right into the folders on the left. ## Advanced Configuration -Since both `igxDrag` and `igxDrop` combined can be used in many different and complex application scenarios, the following example demonstrates how they can be used in an Kanban board. +Since both `igxDrag` and `igxDrop` combined can be used in many different and complex application scenarios, the following example demonstrates how they can be used in an Kanban board. The user could reorder the cards in each column. It is done by setting each card also a drop area, so we can detect when another card has entered its area and switch them around at runtime, to provide better user experience. @@ -278,20 +280,21 @@ It won't be Kanban board without also the ability to switch cards between column Drag items around the kanban board. -
## API -* [IgxDragDirective]({environment:angularApiUrl}/classes/igxdragdirective.html) -* [IgxDropDirective]({environment:angularApiUrl}/classes/igxdropdirective.html) -* [IgxDefaultDropStrategy]({environment:angularApiUrl}/classes/igxdefaultdropstrategy.html) -* [IgxAppendDropStrategy]({environment:angularApiUrl}/classes/igxappenddropstrategy.html) -* [IgxPrependDropStrategy]({environment:angularApiUrl}/classes/igxprependdropstrategy.html) -* [IgxInsertDropStrategy]({environment:angularApiUrl}/classes/igxinsertdropstrategy.html) + +- [IgxDragDirective]({environment:angularApiUrl}/classes/igxdragdirective.html) +- [IgxDropDirective]({environment:angularApiUrl}/classes/igxdropdirective.html) +- [IgxDefaultDropStrategy]({environment:angularApiUrl}/classes/igxdefaultdropstrategy.html) +- [IgxAppendDropStrategy]({environment:angularApiUrl}/classes/igxappenddropstrategy.html) +- [IgxPrependDropStrategy]({environment:angularApiUrl}/classes/igxprependdropstrategy.html) +- [IgxInsertDropStrategy]({environment:angularApiUrl}/classes/igxinsertdropstrategy.html) ## References diff --git a/en/components/drop-down-hierarchical-selection.md b/en/components/drop-down-hierarchical-selection.md index ae15191ea2..0326ad9070 100644 --- a/en/components/drop-down-hierarchical-selection.md +++ b/en/components/drop-down-hierarchical-selection.md @@ -25,13 +25,14 @@ To remove the chip from the DOM and deselect the item from the tree/grid, you ha Additionally, a way to prevent the drop-down from closing on chip deletion would be to check the event's composite path for an `igx-chip` node and then cancel the event in the `IgxDropDownComponent`'s [`closing`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#closing) event handler. ### Demo - - @@ -40,23 +41,24 @@ Additionally, a way to prevent the drop-down from closing on chip deletion would ## API References -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) -* [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) -* [IgxTreeComponent]({environment:angularApiUrl}/classes/igxtreecomponent.html) -* [IgxTreeNodeComponent]({environment:angularApiUrl}/classes/igxtreenodecomponent.html) -* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) +- [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) +- [IgxTreeComponent]({environment:angularApiUrl}/classes/igxtreecomponent.html) +- [IgxTreeNodeComponent]({environment:angularApiUrl}/classes/igxtreenodecomponent.html) +- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) ## Additional Resources -
-* [Drop Down overview](drop-down.md) -* [Chip overview](chip.md) -* [Tree overview](tree.md) -* [Tree Grid overview](treegrid/tree-grid.md) +
+ +- [Drop Down overview](drop-down.md) +- [Chip overview](chip.md) +- [Tree overview](tree.md) +- [Tree Grid overview](treegrid/tree-grid.md)
-Our community is active and always welcoming to new ideas. +Our community is active and always welcoming to new ideas. -* [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) +- [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/drop-down-virtual.md b/en/components/drop-down-virtual.md index 68a3209bd2..bad1dc0a15 100644 --- a/en/components/drop-down-virtual.md +++ b/en/components/drop-down-virtual.md @@ -10,8 +10,8 @@ The Ignite UI for Angular Drop Down component can fully integrate with the [`Igx ## Angular Virtual Drop Down Example - @@ -64,11 +64,13 @@ Next, we need to create the drop-down component's template, looping through the
Selected Model: {{ dropdown.selectedItem?.value.name }}
``` + The additional parameters passed to the `*igxFor` directive are: - - `index` - captures the index of the current item in the data set - - `scrollOrientation` - should always be `'vertical'` - - `containerSize` - the size of the virtualized container (in `px`). This needs to be enforced on the wrapping `
` as well - - `itemSize` - the size of the items that will be displayed (in `px`) + +- `index` - captures the index of the current item in the data set +- `scrollOrientation` - should always be `'vertical'` +- `containerSize` - the size of the virtualized container (in `px`). This needs to be enforced on the wrapping `
` as well +- `itemSize` - the size of the items that will be displayed (in `px`) In order to assure uniqueness of the items, pass `item` inside of the [`value`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#value) input and `index` inside of the [`index`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#index) input of the `igx-drop-down-item`. To preserve selection while scrolling, the drop-down item needs to have a reference to the data items it is bound to. @@ -76,7 +78,7 @@ To preserve selection while scrolling, the drop-down item needs to have a refere > [!NOTE] > For the drop-down to work with a virtualized list of items, [`value`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#value) and [`index`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#index) inputs **must** be passed to all items. > [!NOTE] -> It is strongly advised for each item to have an unique value passed to the `[value]` input. Otherwise, it might lead to unexpected results (incorrect selection). +> It is strongly advised for each item to have an unique value passed to the `[value]` input. Otherwise, it might lead to unexpected results (incorrect selection). > [!NOTE] > When the drop-down uses virtualized items, the type of [`dropdown.selectedItem`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selecteditem) becomes `{ value: any, index: number }`, where `value` is a reference to the data item passed inside of the `[value]` input and `index` is the item's index in the data set @@ -128,9 +130,11 @@ The last part of the configuration is to set `overflow: hidden` to the wrapping ``` ## Remote Data + The `igx-drop-down` supports loading chunks of remote data using the `*igxFor` structural directive. The configuration is similar to the one with local items, the main difference being how data chunks are loaded. ### Template + The drop-down template does not need to change much compared to the previous example - we still need to specify a wrapping div, style it accordingly and write out the complete configuration for the `*igxFor`. Since we'll be getting our data from a remote source, we need to specify that our data will be an observable and pass it through Angular's `async` pipe: ```html @@ -150,6 +154,7 @@ The drop-down template does not need to change much compared to the previous exa ``` ### Handling chunk load + As you can see, the template is almost identical to the one in the previous example. In this remote data scenario, the code behind will do most of the heavy lifting. First, we need to define a remote service for fetching data: @@ -239,14 +244,15 @@ export class DropDownRemoteComponent implements OnInit, OnDestroy { } ``` -Inside of the `ngAfterViewInit` hook, we call to get data for the initial state and subscribe to the `igxForOf` directive's [`chunkPreload`]({environment:angularApiUrl}/classes/igxforofdirective.html#chunkPreload) emitter. This subscription will be responsible for fetching data everytime the loaded chunk changes. We use `pipe(takeUntil(this.destroy$))` so we can easily unsubscribe from the emitter on component destroy. +Inside of the `ngAfterViewInit` hook, we call to get data for the initial state and subscribe to the `igxForOf` directive's [`chunkPreload`]({environment:angularApiUrl}/classes/igxforofdirective.html#chunkPreload) emitter. This subscription will be responsible for fetching data every time the loaded chunk changes. We use `pipe(takeUntil(this.destroy$))` so we can easily unsubscribe from the emitter on component destroy. ### Remote Virtualization - Demo + The result of the above configuration is a drop-down that dynamically loads the data it should display, depending on the scrollbar's state: - @@ -255,19 +261,17 @@ The result of the above configuration is a drop-down that dynamically loads the ## Notes and Limitations Using the drop-down with a virtualized list of items enforces some limitations. Please, be aware of the following when trying to set up a drop-down list using `*igxFor`: - - The drop-down items that are being looped need to be passed in a wrapping element (e.g. `
`) which has the following css: `overflow: hidden` and `height` equal to `containerSize` in `px` - - `` cannot be used for grouping items when the list is virtualized. Use the `isHeader` property instead - - The `items` accessor will return only the list of non-header drop-down items that are currently in the virtualized view. - - [`dropdown.selectedItem`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selectedItem) is of type `{ value: any, index: number }` - - The object emitted by [`selection`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selection) changes to `const emittedEvent: { newSelection: { value: any, index: number }, oldSelection: { value: any, index: number }, cancel: boolean, } ` - - `dropdown.setSelectedItem` should be called with the **item's index in the data set** - - setting the drop-down item's `[selected]` input will **not** mark the item in the drop-down selection - -## API References - -* [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- The drop-down items that are being looped need to be passed in a wrapping element (e.g. `
`) which has the following css: `overflow: hidden` and `height` equal to `containerSize` in `px` +- `` cannot be used for grouping items when the list is virtualized. Use the `isHeader` property instead +- The `items` accessor will return only the list of non-header drop-down items that are currently in the virtualized view. +- [`dropdown.selectedItem`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selectedItem) is of type `{ value: any, index: number }` +- The object emitted by [`selection`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selection) changes to `const emittedEvent: { newSelection: { value: any, index: number }, oldSelection: { value: any, index: number }, cancel: boolean, }` +- `dropdown.setSelectedItem` should be called with the **item's index in the data set** +- setting the drop-down item's `[selected]` input will **not** mark the item in the drop-down selection +## API References +- [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) diff --git a/en/components/drop-down.md b/en/components/drop-down.md index 76e5538b56..6160c0a021 100644 --- a/en/components/drop-down.md +++ b/en/components/drop-down.md @@ -12,8 +12,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI This Angular drop down example demonstrates the basic functionalities of a drop down list. Click on it to expand the preset options, select an item, and then close the drop down. - @@ -27,7 +27,7 @@ To get started with the Ignite UI for Angular Drop Down component, first you nee ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxDropDownModule` in your **app.module.ts** file. @@ -142,8 +142,8 @@ export class MyDropDownComponent { } ``` - @@ -188,8 +188,8 @@ export class MyDropDownComponent { If the sample is configured properly, a list of countries should be displayed as a group under European Union header, France as a non-interactive item, and Bulgaria as a selected item: - @@ -263,8 +263,8 @@ The group also has the additional functionality of disabling items inside of its You can see the results in the sample below: - @@ -328,8 +328,8 @@ export class MyMenuComponent { } ``` - @@ -396,8 +396,8 @@ public ngAfterViewInit(): void { The result from the above configurations could be seen in the below sample. - @@ -462,8 +462,8 @@ export class InputDropDownComponent { } ``` - @@ -496,6 +496,122 @@ When the `allowItemsFocus` property is enabled, the drop down items gain tab ind ## Styling +### Dropdown Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
+
$background-color
+ 		$item-text-colorThe drop-down item text color.
$hover-item-backgroundThe drop-down hover item background color.
$focused-item-backgroundThe drop-down focused item background color.
$focused-item-text-colorThe drop-down focused item text color.
$selected-item-backgroundThe drop-down selected item background color.
$disabled-item-text-colorThe drop-down disabled item text color.
$header-text-colorThe drop-down header text color.
+
$item-text-color
+ 		$item-icon-colorThe drop-down item icon color.
$hover-item-text-colorThe drop-down item hover text color.
$hover-item-icon-colorThe drop-down item hover icon color.
+
$selected-item-background
+ 		$selected-item-text-colorThe drop-down selected item text color.
$selected-item-icon-colorThe drop-down selected item icon color.
$selected-hover-item-backgroundThe drop-down selected item hover background color.
$selected-hover-item-text-colorThe drop-down selected item hover text color.
$selected-hover-item-icon-colorThe drop-down selected item hover icon color.
$selected-focus-item-backgroundThe drop-down selected item focus background color.
$selected-focus-item-text-colorThe drop-down selected item focus text color.
$focused-item-border-colorThe drop-down item focused border color.
+ Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the drop-down appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the `index` file in our style file: ```scss @@ -526,9 +642,9 @@ The last step is to pass the custom drop-down theme to a class or element select ### Demo - @@ -536,21 +652,21 @@ The last step is to pass the custom drop-down theme to a class or element select ## API Summary -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxDropDownComponent Styles]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html). -* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) -* [IgxDividerDirective]({environment:angularApiUrl}/classes/igxdividerdirective.html) -* [IgxDividerDirective Styles]({environment:sassApiUrl}/themes#function-divider-theme) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxDropDownComponent Styles]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html). +- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxDividerDirective]({environment:angularApiUrl}/classes/igxdividerdirective.html) +- [IgxDividerDirective Styles]({environment:sassApiUrl}/themes#function-divider-theme) ## Theming Dependencies -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources Our community is active and always welcoming to new ideas. -* [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) +- [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/excel-library-using-cells.md b/en/components/excel-library-using-cells.md index aebfb98ff0..8f3ebf03dd 100644 --- a/en/components/excel-library-using-cells.md +++ b/en/components/excel-library-using-cells.md @@ -151,23 +151,23 @@ The color palette is analogous to the color dialog in Microsoft Excel 2007 UI. Y You can create all possible fill types using static properties and methods on the [`CellFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfill.html) class. They are as follows: -* `NoColor` - A property that represents a fill with no color, which allows a background image of the worksheet, if any, to show through. +- `NoColor` - A property that represents a fill with no color, which allows a background image of the worksheet, if any, to show through. -* `CreateSolidFill` - Returns a [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) instance which has a pattern style of `Solid` and a background color set to the [`color`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html#color) or [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) specified in the method. +- `CreateSolidFill` - Returns a [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) instance which has a pattern style of `Solid` and a background color set to the [`color`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html#color) or [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) specified in the method. -* `CreatePatternFill` - Returns a [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) instance which has the specified pattern style and the [`color`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html#color) or [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) values, specified for the background and pattern colors. +- `CreatePatternFill` - Returns a [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) instance which has the specified pattern style and the [`color`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html#color) or [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) values, specified for the background and pattern colors. -* `CreateLinearGradientFill` - Returns a [`CellFillLinearGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfilllineargradient.html) instance with the specified angle and gradient stops. +- `CreateLinearGradientFill` - Returns a [`CellFillLinearGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfilllineargradient.html) instance with the specified angle and gradient stops. -* `CreateRectangularGradientFill` - Returns a [`CellFillRectangularGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillrectangulargradient.html) instance with the specified left, top, right, and bottom of the inner rectangle and gradient stops. If the inner rectangle values are not specified, the center of the cell is used as the inner rectangle. +- `CreateRectangularGradientFill` - Returns a [`CellFillRectangularGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillrectangulargradient.html) instance with the specified left, top, right, and bottom of the inner rectangle and gradient stops. If the inner rectangle values are not specified, the center of the cell is used as the inner rectangle. The derived types, representing the various fills which can be created, are as follows: -* [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) - A pattern that represents a cell fill of no color, a solid color, or a pattern fill for a cell. It has background color info and a pattern color info which correspond directly to the color sections in the Fill tab of the Format Cells dialog of Excel. +- [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) - A pattern that represents a cell fill of no color, a solid color, or a pattern fill for a cell. It has background color info and a pattern color info which correspond directly to the color sections in the Fill tab of the Format Cells dialog of Excel. -* [`CellFillLinearGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfilllineargradient.html) - Represents a linear gradient fill. It has an angle, which is degrees clockwise of the left to right linear gradient, and a gradients stops collection which describes two or more color transitions along the length of the gradient. +- [`CellFillLinearGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfilllineargradient.html) - Represents a linear gradient fill. It has an angle, which is degrees clockwise of the left to right linear gradient, and a gradients stops collection which describes two or more color transitions along the length of the gradient. -* [`CellFillRectangularGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillrectangulargradient.html) - Represents a rectangular gradient fill. It has top, left, right, and bottom values, which describe, in relative coordinates, the inner rectangle from which the gradient starts and goes out to the cell edges. It also has a gradient stops collection which describes two or more color transitions along the path from the inner rectangle to the cell edges. +- [`CellFillRectangularGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillrectangulargradient.html) - Represents a rectangular gradient fill. It has top, left, right, and bottom values, which describe, in relative coordinates, the inner rectangle from which the gradient starts and goes out to the cell edges. It also has a gradient stops collection which describes two or more color transitions along the path from the inner rectangle to the cell edges. The following code snippet demonstrates how to create a solid fill in a [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html): @@ -183,41 +183,41 @@ You can specify a color (the color of Excel cells background, border, etc) using These are the ways a color can be defined, as follows: -* The automatic color (which is the WindowText system color) +- The automatic color (which is the WindowText system color) -* Any user defined RGB color +- Any user defined RGB color -* A theme color +- A theme color If an RGB or a theme color is used, an optional tint can be applied to lighten or darken the color. This tint cannot be set directly in Microsoft Excel 2007 UI, but various colors in the color palette displayed to the user are actually theme colors with tints applied. Each workbook has 12 associated theme colors. They are the following: -* Light 1 +- Light 1 -* Light 2 +- Light 2 -* Dark 1 +- Dark 1 -* Dark 2 +- Dark 2 -* Accent1 +- Accent1 -* Accent2 +- Accent2 -* Accent3 +- Accent3 -* Accent4 +- Accent4 -* Accent5 +- Accent5 -* Accent6 +- Accent6 -* Hyperlink +- Hyperlink -* Followed Hyperlink +- Followed Hyperlink -* There are default values when a workbook is created, which can be customized via Excel. +- There are default values when a workbook is created, which can be customized via Excel. Colors are defined by the [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) class, which is a sealed immutable class. The class has a static `Automatic` property, which returns the automatic color, and there are various constructors which allow you to create a [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) instance with a color or a theme value and an optional tint. @@ -295,27 +295,27 @@ Displayed text can be different depending on varying column widths. When displaying numbers and using format string containing **"General"** or **"@"**, there are various formats which are tried to find a formatting which fits the cell width. A list of example formats are shown below: -* **Normal Value** - Number is displayed as it would be if there is unlimited amount of space. +- **Normal Value** - Number is displayed as it would be if there is unlimited amount of space. -* **Remove decimal digits** - Decimal digits will be removed one at a time until a format is found which fits. For example, a value of 12345.6789 will be reduced to the following formats until one fits: 12345.679, 12345.68, 12345.7, and 12346. This will stop when the first significant digit is the only one left, so for example value like 0.0001234567890 can only be reduced to 0.0001. +- **Remove decimal digits** - Decimal digits will be removed one at a time until a format is found which fits. For example, a value of 12345.6789 will be reduced to the following formats until one fits: 12345.679, 12345.68, 12345.7, and 12346. This will stop when the first significant digit is the only one left, so for example value like 0.0001234567890 can only be reduced to 0.0001. -* **Scientific, 5 decimal digits** - Number is displayed in the form of 0.00000E+00, such as 1.23457E+09, or 1.23457E-04 +- **Scientific, 5 decimal digits** - Number is displayed in the form of 0.00000E+00, such as 1.23457E+09, or 1.23457E-04 -* **Scientific, 4 decimal digits** - Number is displayed in the form of 0.0000E+00, such as 1.2346E+09, or 1.23456E-04 +- **Scientific, 4 decimal digits** - Number is displayed in the form of 0.0000E+00, such as 1.2346E+09, or 1.23456E-04 -* **Scientific, 3 decimal digits** - Number is displayed in the form of 0.000E+00, such as 1.235E+09, or 1.235E-0 +- **Scientific, 3 decimal digits** - Number is displayed in the form of 0.000E+00, such as 1.235E+09, or 1.235E-0 -* **Scientific, 2 decimal digits** - Number is displayed in the form of 0.00E+00, such as 1.23E+09, or 1.23E-04 +- **Scientific, 2 decimal digits** - Number is displayed in the form of 0.00E+00, such as 1.23E+09, or 1.23E-04 -* **Scientific, 1 decimal digits** - Number is displayed in the form of 0.0E+00, such as 1.2E+09, or 1.2E-04 +- **Scientific, 1 decimal digits** - Number is displayed in the form of 0.0E+00, such as 1.2E+09, or 1.2E-04 -* **Scientific, 0 decimal digits** - Number is displayed in the form of 0E+00, such as 1E+09, or 1E-04 +- **Scientific, 0 decimal digits** - Number is displayed in the form of 0E+00, such as 1E+09, or 1E-04 -* **Rounded value** - If the first significant digit is in the decimal potion of the number, the value will be rounded to the nearest integer value. For example, for a value 0.0001234567890, it will be rounded to 0, and the displayed text in cell will be 0. +- **Rounded value** - If the first significant digit is in the decimal potion of the number, the value will be rounded to the nearest integer value. For example, for a value 0.0001234567890, it will be rounded to 0, and the displayed text in cell will be 0. -* **Hash marks** - If no condensed version of the number can be displayed, hashes (#) will be repeated through the width of the cell. +- **Hash marks** - If no condensed version of the number can be displayed, hashes (#) will be repeated through the width of the cell. -* **Empty string** - If no hash marks can fit in the cell, an empty string will be returned as displayed cell text. +- **Empty string** - If no hash marks can fit in the cell, an empty string will be returned as displayed cell text. If the format string for numeric value does not contain General or @, there are only the following stages of resizing: Normal value, Hash marks, Empty string @@ -338,20 +338,20 @@ var cellText = worksheet.rows(0).cells(0).getText(); ## API References -* `Add` -* [`CellFillLinearGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfilllineargradient.html) -* [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) -* [`CellFillRectangularGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillrectangulargradient.html) -* [`CellFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfill.html) -* [`cellFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) -* [`displayOptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions)' -* [`formula`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#formula) -* [`mergedCellsRegions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#mergedCellsRegions) -* [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) -* [`WorkbookStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstyle.html) -* [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) -* [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) -* [`WorksheetColumn`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcolumn.html) -* [`WorksheetRegion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html) -* [`WorksheetRow`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetrow.html) -* [`worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) +- `Add` +- [`CellFillLinearGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfilllineargradient.html) +- [`CellFillPattern`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) +- [`CellFillRectangularGradient`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillrectangulargradient.html) +- [`CellFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfill.html) +- [`cellFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) +- [`displayOptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions)' +- [`formula`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#formula) +- [`mergedCellsRegions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#mergedCellsRegions) +- [`WorkbookColorInfo`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) +- [`WorkbookStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstyle.html) +- [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) +- [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) +- [`WorksheetColumn`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcolumn.html) +- [`WorksheetRegion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html) +- [`WorksheetRow`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetrow.html) +- [`worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) diff --git a/en/components/excel-library-using-tables.md b/en/components/excel-library-using-tables.md index ae79653c09..be5cdf0a1a 100644 --- a/en/components/excel-library-using-tables.md +++ b/en/components/excel-library-using-tables.md @@ -65,15 +65,15 @@ If the data in the table is subsequently changed or you change the `Hidden` prop The following are the filter types available to the columns of your [`WorksheetTable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html): -* [`AverageFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.averagefilter.html) - Cells can be filtered based on whether they are above or below the average value of all cells in the column. -* [`CustomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.customfilter.html) - Cells can be filtered based on one or more custom conditions. -* [`DatePeriodFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.dateperiodfilter.html) - Only cells with dates in a specific month or quarter of any year will be displayed. -* [`FillFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fillfilter.html) - Only cells with a specific fill will be displayed. -* [`FixedValuesFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fixedvaluesfilter.html) - Cells which only match specific display values or which fall within a specific group of dates/times will be displayed. -* [`FontColorFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fontcolorfilter.html) - Only cells with a specific font color will be displayed. -* [`RelativeDateRangeFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.relativedaterangefilter.html) - Cells with date values can be filtered based on whether they occur within a relative time range of the date when the filter was applied, such as the next day or previous quarter. -* [`TopOrBottomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.toporbottomfilter.html) - This filter allows for filtering the top or bottom N values. It also allows filtering the top or bottom N% values. -* [`YearToDateFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.yeartodatefilter.html) - Cells with date values can be filtered if they occur between the start of the year and the date on which the filter was applied. +- [`AverageFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.averagefilter.html) - Cells can be filtered based on whether they are above or below the average value of all cells in the column. +- [`CustomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.customfilter.html) - Cells can be filtered based on one or more custom conditions. +- [`DatePeriodFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.dateperiodfilter.html) - Only cells with dates in a specific month or quarter of any year will be displayed. +- [`FillFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fillfilter.html) - Only cells with a specific fill will be displayed. +- [`FixedValuesFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fixedvaluesfilter.html) - Cells which only match specific display values or which fall within a specific group of dates/times will be displayed. +- [`FontColorFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fontcolorfilter.html) - Only cells with a specific font color will be displayed. +- [`RelativeDateRangeFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.relativedaterangefilter.html) - Cells with date values can be filtered based on whether they occur within a relative time range of the date when the filter was applied, such as the next day or previous quarter. +- [`TopOrBottomFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.toporbottomfilter.html) - This filter allows for filtering the top or bottom N values. It also allows filtering the top or bottom N% values. +- [`YearToDateFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.yeartodatefilter.html) - Cells with date values can be filtered if they occur between the start of the year and the date on which the filter was applied. The following code snippet demonstrates how to apply an "above average" filter to a [`WorksheetTable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html)'s first column: @@ -95,10 +95,10 @@ In addition to accessing sort conditions from the table columns, they are also e The following sort condition types are available to set on columns: -* [`OrderedSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.orderedsortcondition.html) - Sort cells in an ascending or descending order based on their value. -* [`CustomListSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.customlistsortcondition.html) - Sort cells in a defined order based on their text or display value. For example, this might be useful for sorting days as they appear on a calendar, rather than alphabetically. -* [`FillSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fillsortcondition.html) - Sort cells based on whether their fill is a specific pattern or gradient. -* [`FontColorSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fontcolorsortcondition.html) - Sort cells based on whether their font is a specific color. +- [`OrderedSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.orderedsortcondition.html) - Sort cells in an ascending or descending order based on their value. +- [`CustomListSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.customlistsortcondition.html) - Sort cells in a defined order based on their text or display value. For example, this might be useful for sorting days as they appear on a calendar, rather than alphabetically. +- [`FillSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fillsortcondition.html) - Sort cells based on whether their fill is a specific pattern or gradient. +- [`FontColorSortCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fontcolorsortcondition.html) - Sort cells based on whether their font is a specific color. There is also a [`caseSensitive`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sortsettings\`1.html#caseSensitive) property on the [`sortSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#sortSettings) of the [`WorksheetTable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html) to determine whether strings should be sorted case sensitively or not. @@ -117,13 +117,13 @@ table.sortSettings.sortConditions().addItem(table.columns(0), new OrderedSortCon ## API References -* [`deleteColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#deleteColumns) -* [`deleteDataRows`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#deleteDataRows) -* [`FillFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fillfilter.html) -* [`insertColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#insertColumns) -* [`insertDataRows`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#insertDataRows) -* [`sortConditions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sortsettings\`1.html#sortConditions) -* [`sortSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#sortSettings) -* [`tables`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#tables) -* [`WorksheetTableStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettablestyle.html) -* [`WorksheetTable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html) +- [`deleteColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#deleteColumns) +- [`deleteDataRows`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#deleteDataRows) +- [`FillFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fillfilter.html) +- [`insertColumns`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#insertColumns) +- [`insertDataRows`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#insertDataRows) +- [`sortConditions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sortsettings\`1.html#sortConditions) +- [`sortSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#sortSettings) +- [`tables`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#tables) +- [`WorksheetTableStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettablestyle.html) +- [`WorksheetTable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html) diff --git a/en/components/excel-library-using-workbooks.md b/en/components/excel-library-using-workbooks.md index 91fd8f51a3..3eeebc20ea 100644 --- a/en/components/excel-library-using-workbooks.md +++ b/en/components/excel-library-using-workbooks.md @@ -36,23 +36,23 @@ font.height = 16 * 20; Microsoft Excel® document properties provide information to help organize and keep track of your documents. You can use the Infragistics Angular Excel Library to set these properties using the [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) object’s [`documentProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#documentProperties) property. The available properties are: -* `Author` +- `Author` -* `Title` +- `Title` -* `Subject` +- `Subject` -* `Keywords` +- `Keywords` -* `Category` +- `Category` -* `Status` +- `Status` -* `Comments` +- `Comments` -* `Company` +- `Company` -* `Manager` +- `Manager` The following code demonstrates how to create a workbook and set its `title` and `status` document properties. @@ -97,7 +97,7 @@ var protection = workbook.protection; ## API References -* [`documentProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#documentProperties) -* [`WorkbookProtection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookprotection.html) -* [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) -* [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) +- [`documentProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#documentProperties) +- [`WorkbookProtection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookprotection.html) +- [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) +- [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) diff --git a/en/components/excel-library-using-worksheets.md b/en/components/excel-library-using-worksheets.md index 465ed55188..abacc81d0b 100644 --- a/en/components/excel-library-using-worksheets.md +++ b/en/components/excel-library-using-worksheets.md @@ -111,8 +111,8 @@ You can specify the region to apply the filter by using the [`setRegion`]({envir Below is a list of methods and their descriptions that you can use to add a filter to a worksheet: -| Method | Description | -| ------------- |:-------------: | +| Method | Description | +| ------------- |:-------------: | |[`applyAverageFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyAverageFilter)|Represents a filter which can filter data based on whether the data is below or above the average of the entire data range.| |[`applyDatePeriodFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyDatePeriodFilter)|Represents a filter which can filter dates in a Month, or quarter of any year.| |[`applyFillFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyFillFilter)|Represents a filter which will filter cells based on their background fills. This filter specifies a single CellFill. Cells of with this fill will be visible in the data range. All other cells will be hidden.| @@ -191,16 +191,16 @@ worksheet.sortSettings.sortConditions().addItem(new RelativeIndex(0), new Ordere You can protect a worksheet by calling the [`protect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#protect) method on the [`worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object. This method exposes many nullable `bool` parameters that allow you to restrict or allow the following user operations: -* Editing of cells. -* Editing of objects such as shapes, comments, charts, or other controls. -* Editing of scenarios. -* Filtering of data. -* Formatting of cells. -* Inserting, deleting, and formatting of columns. -* Inserting, deleting, and formatting of rows. -* Inserting of hyperlinks. -* Sorting of data. -* Usage of pivot tables. +- Editing of cells. +- Editing of objects such as shapes, comments, charts, or other controls. +- Editing of scenarios. +- Filtering of data. +- Formatting of cells. +- Inserting, deleting, and formatting of columns. +- Inserting, deleting, and formatting of rows. +- Inserting of hyperlinks. +- Sorting of data. +- Usage of pivot tables. You can remove worksheet protection by calling the [`unprotect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#unprotect) method on the [`worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object. @@ -238,18 +238,18 @@ format.cellFormat.font.colorInfo = new WorkbookColorInfo(color); ## API References -* [`cellFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) -* [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html) -* [`conditionalFormats`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#conditionalFormats) -* [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html) -* [`displayOptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions) -* [`filterSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#filterSettings) -* [`showGridlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#showGridlines) -* [`showRowAndColumnHeaders`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#showRowAndColumnHeaders) -* [`sortSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#sortSettings) -* [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) -* [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) -* [`WorksheetColumn`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcolumn.html) -* [`WorksheetFilterSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html) -* [`WorksheetSortSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetsortsettings.html) -* [`worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) +- [`cellFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) +- [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html) +- [`conditionalFormats`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#conditionalFormats) +- [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html) +- [`displayOptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions) +- [`filterSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#filterSettings) +- [`showGridlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#showGridlines) +- [`showRowAndColumnHeaders`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#showRowAndColumnHeaders) +- [`sortSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#sortSettings) +- [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) +- [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) +- [`WorksheetColumn`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcolumn.html) +- [`WorksheetFilterSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html) +- [`WorksheetSortSettings`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetsortsettings.html) +- [`worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) diff --git a/en/components/excel-library-working-with-charts.md b/en/components/excel-library-working-with-charts.md index d4ffe07953..a133147e49 100644 --- a/en/components/excel-library-working-with-charts.md +++ b/en/components/excel-library-working-with-charts.md @@ -40,9 +40,9 @@ chart.setSourceData("A2:M6", true); ## API References -* `AddChart` -* `Area` -* [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_grids_grids.igxcolumncomponent.html) -* `Line` -* `Pie` -* [`WorksheetChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetchart.html) +- `AddChart` +- `Area` +- [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_grids_grids.igxcolumncomponent.html) +- `Line` +- `Pie` +- [`WorksheetChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetchart.html) diff --git a/en/components/excel-library-working-with-sparklines.md b/en/components/excel-library-working-with-sparklines.md index 104c81b16d..f6f85b19c7 100644 --- a/en/components/excel-library-working-with-sparklines.md +++ b/en/components/excel-library-working-with-sparklines.md @@ -24,9 +24,9 @@ The Infragistics Angular Excel Library has support for adding sparklines to an E The following is a list of the supported predefined sparkline types. -* Line -* Column -* Stacked (Win/Loss) +- Line +- Column +- Stacked (Win/Loss) The following code demonstrates how to programmatically add Sparklines to a Worksheet via the sparklineGroups collection: @@ -41,4 +41,4 @@ workbook.save(workbook, "Sparklines.xlsx"); ## API References -* [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) +- [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) diff --git a/en/components/excel-library.md b/en/components/excel-library.md index 7e14989ad6..6955e5a29f 100644 --- a/en/components/excel-library.md +++ b/en/components/excel-library.md @@ -53,11 +53,11 @@ export class AppModule {} The Excel Library contains 5 modules that you can use to limit bundle size of your app: -* **IgxExcelCoreModule** – This contains the object model and much of the excel infrastructure -* **IgxExcelFunctionsModule** – This contains the majority of the functions for formula evaluations, such as Sum, Average, Min, Max, etc. The absence of this module won’t cause any issues with formula parsing if the formula is to be calculated. For example, if you apply a formula like “=SUM(A1:A5)” and ask for the Value of the cell, then you would get a #NAME! error returned. This is not an exception throw – it’s an object that represents a particular error since formulas can result in errors. -* **IgxExcelXlsModule** – This contains the load and save logic for xls (and related) type files – namely the Excel97to2003 related WorkbookFormats. -* **IgxExcelXlsxModule** – This contains the load and save logic for xlsx (and related) type files – namely the Excel2007 related and StrictOpenXml WorkbookFormats. -* **IgxExcelModule** – This references the other 4 modules and so basically ensures that all the functionality is loaded/available. +- **IgxExcelCoreModule** – This contains the object model and much of the excel infrastructure +- **IgxExcelFunctionsModule** – This contains the majority of the functions for formula evaluations, such as Sum, Average, Min, Max, etc. The absence of this module won’t cause any issues with formula parsing if the formula is to be calculated. For example, if you apply a formula like “=SUM(A1:A5)” and ask for the Value of the cell, then you would get a #NAME! error returned. This is not an exception throw – it’s an object that represents a particular error since formulas can result in errors. +- **IgxExcelXlsModule** – This contains the load and save logic for xls (and related) type files – namely the Excel97to2003 related WorkbookFormats. +- **IgxExcelXlsxModule** – This contains the load and save logic for xlsx (and related) type files – namely the Excel2007 related and StrictOpenXml WorkbookFormats. +- **IgxExcelModule** – This references the other 4 modules and so basically ensures that all the functionality is loaded/available. @@ -65,21 +65,21 @@ The Excel Library contains 5 modules that you can use to limit bundle size of yo The following is a list of the supported versions of Excel.\*\* -* Microsoft Excel 97 +- Microsoft Excel 97 -* Microsoft Excel 2000 +- Microsoft Excel 2000 -* Microsoft Excel 2002 +- Microsoft Excel 2002 -* Microsoft Excel 2003 +- Microsoft Excel 2003 -* Microsoft Excel 2007 +- Microsoft Excel 2007 -* Microsoft Excel 2010 +- Microsoft Excel 2010 -* Microsoft Excel 2013 +- Microsoft Excel 2013 -* Microsoft Excel 2016 +- Microsoft Excel 2016 ## Load and Save Workbooks @@ -141,7 +141,7 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => ## API References -* `Load` -* `WorkbookInProcessRuntime` -* [`Worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html) -* [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) +- `Load` +- `WorkbookInProcessRuntime` +- [`Worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html) +- [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) diff --git a/en/components/excel-utility.md b/en/components/excel-utility.md index c43f373b16..013ac7d16c 100644 --- a/en/components/excel-utility.md +++ b/en/components/excel-utility.md @@ -114,6 +114,6 @@ export class ExcelUtility { ## API References -* [`WorkbookFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_excel.workbookformat.html) -* [`WorkbookSaveOptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbooksaveoptions.html) -* [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) +- [`WorkbookFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_excel.workbookformat.html) +- [`WorkbookSaveOptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbooksaveoptions.html) +- [`Workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index 794271de0f..3f13a78cfa 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -5,18 +5,18 @@ _keywords: angular expansion panel, angular expansion panel component, angular U --- # Angular Expansion Panel Component Overview -Ignite UI for Angular provides developers with one of the most useful and easy-to-use layout components - Expansion Panel. This feature-rich component is used to create an expandable/collapsible detailed summary view. The content can include Angular Expansion Panel animation, text, icons, header, action bar, and other elements. +Ignite UI for Angular provides developers with one of the most useful and easy-to-use layout components - Expansion Panel. This feature-rich component is used to create an expandable/collapsible detailed summary view. The content can include Angular Expansion Panel animation, text, icons, header, action bar, and other elements.

-Ignite UI Expansion Panel [igx-expansion-panel]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) is a lightweight Angular accordion component which can be rendered in two states - collapsed or expanded. The Expansion Panel in Angular can be toggled using mouse click, or keyboard interactions. You can also combine multiple Angular Expansion Panels into Angular accordion. +Ignite UI Expansion Panel [igx-expansion-panel]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) is a lightweight Angular accordion component which can be rendered in two states - collapsed or expanded. The Expansion Panel in Angular can be toggled using mouse click, or keyboard interactions. You can also combine multiple Angular Expansion Panels into Angular accordion.

## Angular Expansion Panel Example -We've created this simple Angular Expansion Panel Example using Ignite UI Angular. See how the sample works. +We've created this simple Angular Expansion Panel Example using Ignite UI Angular. See how the sample works. - @@ -30,7 +30,7 @@ To get started with the Ignite UI for Angular Drop Down component, first you nee ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxExpansionPanelModule` in your **app.module.ts** file. @@ -101,6 +101,7 @@ The table below shows all the available markup parts for the Angular Expansion P ## Properties Binding and Events + We can add some logic to our component to make it show/hide the `igx-expansion-panel-description` depending on the current state of the panel. We can do this by binding the description to the control [`collapsed`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#collapsed) property: @@ -131,6 +132,7 @@ export class ExpansionPanelComponent { The following code sample will show the short description only when the component is in its collapsed state. If we want to add more complex functionality depending on the component state, we could also bind to an event emitter. + ```typescript // in expansion-panel.component.ts @@ -142,6 +144,7 @@ export class ExpansionPanelComponent { } } ``` + ```html @@ -149,15 +152,16 @@ export class ExpansionPanelComponent { Below we have the results: - ## Component Customization + The [`IgxExpansionPanelComponent`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) allows for easy customization of [the header]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html). -Configuring the position of the header icon can be done through the [`iconPosition`]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#iconPosition) input on the `igx-expansion-panel-header`. The possible options for the icon position are **left**, **right** and **none**. The next code sample demonstrates how to configure the component's button to go on the *right* side. +Configuring the position of the header icon can be done through the [`iconPosition`]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#iconPosition) input on the `igx-expansion-panel-header`. The possible options for the icon position are **left**, **right** and **none**. The next code sample demonstrates how to configure the component's button to go on the _right_ side. ```html @@ -166,11 +170,13 @@ Configuring the position of the header icon can be done through the [`iconPositi ... ``` + >[!NOTE] > The [`iconPosition`]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#iconPosition) property works with `RTL` - e.g. an icon set to show up in **right** will show in the leftmost part of the header when RTL is on. The default icon for the toggle state of the control can be templated. We can do that by passing content in an `igx-expansion-panel-icon` tag: + ```html @@ -184,11 +190,13 @@ We can do that by passing content in an `igx-expansion-panel-icon` tag: ... ``` + Our Angular Expansion Panel will now render "Show More" when the panel is collapsed and "Show Less" once it's fully expanded. The `IgxExpansionPanel` control allows all sorts of content to be added inside of the `igx-expansion-panel-body`. It can render [`IgxGrid`](grid/grid.md)s, [`IgxCombo`](combo.md), charts and even other expansion panels! For the sake of simplicity let's add some basic markup to the body of our expansion panel. + ```html ... @@ -204,17 +212,69 @@ For the sake of simplicity let's add some basic markup to the body of our expans Lets see the result from all the above changes: - - -## Styling +## Styling + +### Expansion Panel Theme Property Map + +Changing the `$header-background` and `$body-background` properties automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$header-background
$header-title-colorThe panel header title text color.
$header-icon-colorThe panel header icon color.
$header-description-colorThe panel header description text color.
$header-focus-backgroundThe panel header focus background color.
$disabled-text-colorThe panel disabled text color.
$disabled-description-colorThe panel disabled header description text color.
$body-background$body-colorThe panel body text color.
### Palettes & Colors -Fist we create a custom palette which can later be passed to our component: + +First we create a custom palette which can later be passed to our component: + ```scss // In real life, this should be in our main sass file so we can share the palette between all components. // In our case, it's in the component SCSS file "expansion-styling.component.scss". @@ -284,14 +344,57 @@ To find out more on how you can use Ignite UI theming engine [`click here`](them ### Demo - -## Angular Expansion Panel Animations +### Styling with Tailwind + +You can style the expansion panel using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-expansion-panel`, `dark-expansion-panel`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [expansion-panel-theme]({environment:sassApiUrl}/themes#function-expansion-panel-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your expansion panel should look like this: + +
+ +
+ +## Angular Expansion Panel Animations + ### Using specific animation + It is possible to use other than default animation when expanding and collapsing the component. Assuming the igxExpansionPanel is already imported in `app.module.ts` as previously described, you can create a custom animation setting object and set it to be used in the Ignite UI for Angular Expansion Panel. The approach requires the [`useAnimation`](https://angular.io/api/animations/useAnimation) method and the specific animations to be used so we start importing these and defining the animation settings like: @@ -327,6 +430,7 @@ export class ExpansionPanelComponent { } } ``` + As you can see, we are going to use [`slideInLeft`]({environment:sassApiUrl}/animations#mixin-slide-in-left) and [`slideOutRight`]({environment:sassApiUrl}/animations#mixin-slide-out-right) animations from our [**inbuilt suite of animations**]({environment:sassApiUrl}/animations) to make the component content appear more dramatically from the left side and disappear on the right when collapsing the content. In the process, we override some of the existing parameters with the specific ones we want to use. The sample shows some user information and the key point here is passing the animation settings to the component like: @@ -348,8 +452,8 @@ The sample shows some user information and the key point here is passing the ani You can see the results below: - @@ -359,11 +463,13 @@ You can see the results below: See the [igxAccordion topic](accordion.md) ## API Reference -* [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) -* [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html) -* [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html) -* [IgxExpansionPanel Styles]({environment:sassApiUrl}/themes#mixin-expansion-panel) + +- [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) +- [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html) +- [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html) +- [IgxExpansionPanel Styles]({environment:sassApiUrl}/themes#mixin-expansion-panel) ## Theming Dependencies -* [IgxExpansionPanel Theme]({environment:sassApiUrl}/themes#function-expansion-panel-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) + +- [IgxExpansionPanel Theme]({environment:sassApiUrl}/themes#function-expansion-panel-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) diff --git a/en/components/exporter-csv.md b/en/components/exporter-csv.md index 50bce5f218..4d04ed332f 100644 --- a/en/components/exporter-csv.md +++ b/en/components/exporter-csv.md @@ -16,9 +16,9 @@ The exporting functionality is encapsulated in the [`IgxCsvExporterService`]({en ## Angular CSV Exporter Example - @@ -117,19 +117,19 @@ public exportButtonHandler() { ``` - - ## Customizing the Exported Format The CSV Exporter supports several types of exporting formats. The export format may be specified: -* as a second argument of the [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) objects's constructor -* using the [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) object's [`fileType`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html#filetype) property + +- as a second argument of the [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) objects's constructor +- using the [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) object's [`fileType`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html#filetype) property Different export formats have different file extensions and value delimiters. The following table maps the export formats and their respective file extensions and delimiters: @@ -166,13 +166,13 @@ When you are exporting data from [**IgxGrid**](grid/grid.md) the export process The CSV Exporter service has a few more APIs to explore, which are listed below. -* [IgxCsvExporterService API]({environment:angularApiUrl}/classes/igxcsvexporterservice.html) -* [IgxCsvExporterOptions API]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) +- [IgxCsvExporterService API]({environment:angularApiUrl}/classes/igxcsvexporterservice.html) +- [IgxCsvExporterOptions API]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) Additional components that were used: -* [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
@@ -181,5 +181,5 @@ Additional components that were used:
Our community is active and always welcoming to new ideas. -* [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) +- [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/exporter-excel.md b/en/components/exporter-excel.md index 023d1c531d..b0df5831cd 100644 --- a/en/components/exporter-excel.md +++ b/en/components/exporter-excel.md @@ -15,7 +15,7 @@ The Ignite UI for Angular Excel Exporter service can export data in Microsoft® ## Angular Excel Exporter Example - @@ -100,16 +100,18 @@ this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions('Expor The Excel Exporter service has a few more APIs to explore, which are listed below. -* [`IgxExcelExporterService API`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) -* [`IgxExcelExporterOptions API`]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html) +- [`IgxExcelExporterService API`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) +- [`IgxExcelExporterOptions API`]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html) Grids Excel Exporters: -* [`IgxGrid Excel Exporters`](grid/export-excel.md) -* [`IgxTreeGrid Excel Exporters`](treegrid/export-excel.md) + +- [`IgxGrid Excel Exporters`](grid/export-excel.md) +- [`IgxTreeGrid Excel Exporters`](treegrid/export-excel.md) Additional components that were used: -* [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) + +- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
@@ -118,5 +120,5 @@ Additional components that were used:
Our community is active and always welcoming to new ideas. -* [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) +- [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/for-of.md b/en/components/for-of.md index f74a40cf8c..49ca470539 100644 --- a/en/components/for-of.md +++ b/en/components/for-of.md @@ -11,8 +11,8 @@ _keywords: Angular Virtual ForOf Directive, Native Angular Components Suite, Ang ## Angular Virtual For Directive Example - @@ -26,7 +26,7 @@ To get started with the Ignite UI for Angular [`igxFor`]({environment:angularApi ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxForOfModule` in your **app.module.ts** file. @@ -108,7 +108,7 @@ Virtualization works similarly to Paging by slicing the data into smaller chucks ``` -***Note:*** It is strongly advised that the parent container of the [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxForOf) template has the following CSS rules applied: `height` for vertical and `width` for horizontal, `overflow: hidden` and `position: relative`. This is because the smooth scrolling behavior is achieved through content offsets that could visually affect other parts of the page if they remain visible. +_**Note:**_ It is strongly advised that the parent container of the [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxForOf) template has the following CSS rules applied: `height` for vertical and `width` for horizontal, `overflow: hidden` and `position: relative`. This is because the smooth scrolling behavior is achieved through content offsets that could visually affect other parts of the page if they remain visible. ### Horizontal virtualization @@ -129,8 +129,8 @@ Virtualization works similarly to Paging by slicing the data into smaller chucks ``` - @@ -163,11 +163,12 @@ Virtualization works similarly to Paging by slicing the data into smaller chucks ``` -The `igxFor` directivе is used to virtualize data in both vertical and horizontal directions inside the `igxGrid`. +The `igxFor` directive is used to virtualize data in both vertical and horizontal directions inside the `igxGrid`. Follow the [Grid Virtualization](grid/virtualization.md) topic for more detailed information and demos. ### igxFor bound to remote service + The [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxForOf) directive can be bound to a remote service using the `Observable` property - `remoteData` (in the following case). The `chunkLoading` event should also be utilized to trigger the requests for data. ```html @@ -184,7 +185,7 @@ The [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxF
``` -***Note:*** There is a requirement to set the [`totalItemCount`]({environment:angularApiUrl}/classes/igxforofdirective.html#totalItemCount) property in the instance of [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxForOf). +_**Note:**_ There is a requirement to set the [`totalItemCount`]({environment:angularApiUrl}/classes/igxforofdirective.html#totalItemCount) property in the instance of [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxForOf). ```typescript this.virtDirRemote.totalItemCount = data['@odata.count']; @@ -274,9 +275,9 @@ The `igxFor` directive includes the following helper properties in its context: ## API References -* [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) +- [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) ## Additional Resources diff --git a/en/components/general-breaking-changes-dv.md b/en/components/general-breaking-changes-dv.md index 88c304fcd8..545cbd796b 100644 --- a/en/components/general-breaking-changes-dv.md +++ b/en/components/general-breaking-changes-dv.md @@ -13,7 +13,7 @@ This topic provides information about breaking changes in Ignite UI for Angular > [!NOTE] > These breaking changes were introduce in version **11.2.0** of these packages and components: -- All types of charts/series have new colors for brush/fill and outlines +- All types of charts/series have new colors for brush/fill and outlines | Old series brushes outlines | New series outline brushes | | --------------------------- | -------------------------- | @@ -28,17 +28,17 @@ This topic provides information about breaking changes in Ignite UI for Angular | `Color_009=#795548` | `Color_009=#e051a9` | | `Color_010=#9A9A9A` | `Color_010=#a8a8b7` | -- All types of charts/series have marker outlines with 2px thickness +- All types of charts/series have marker outlines with 2px thickness -- Bar/Column/Waterfall series have outlines with 1px thickness (other series have 2px thickness) +- Bar/Column/Waterfall series have outlines with 1px thickness (other series have 2px thickness) -- Bar/Column/Waterfall series have square corners instead of rounded corners anymore +- Bar/Column/Waterfall series have square corners instead of rounded corners anymore -- Point/Bubble/ScatterSeries/PolarScatter series have markers with 70% transparent fill +- Point/Bubble/ScatterSeries/PolarScatter series have markers with 70% transparent fill -- Point/Bubble/ScatterSeries/PolarScatter series have markers with fill that matches marker outline. To revert to the previous styling behavior for these series a new property has been added to the series, `MarkerFillMode`, which can be set to normal to mimic the prior behavior. +- Point/Bubble/ScatterSeries/PolarScatter series have markers with fill that matches marker outline. To revert to the previous styling behavior for these series a new property has been added to the series, `MarkerFillMode`, which can be set to normal to mimic the prior behavior. -- Scatter High Density series has new colors for min/max heat properties +- Scatter High Density series has new colors for min/max heat properties | Old heat min color | New heat min color | | ------------------ | ------------------ | @@ -48,7 +48,7 @@ This topic provides information about breaking changes in Ignite UI for Angular | ------------------ | ------------------ | | `#FFC62828` | `#ffee5879` | -- Financial/Waterfall series have new colors for negative fill of their visuals +- Financial/Waterfall series have new colors for negative fill of their visuals | Old negative brush | new negative brush | | ------------------ | ------------------ | diff --git a/en/components/general-changelog-dv.md b/en/components/general-changelog-dv.md index f6df31289d..45c9c2a349 100644 --- a/en/components/general-changelog-dv.md +++ b/en/components/general-changelog-dv.md @@ -6,6 +6,8 @@ mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Tool namespace: Infragistics.Controls.Charts --- + + # Ignite UI for Angular Changelog All notable changes for each version of Ignite UI for Angular are documented on this page. @@ -14,7 +16,7 @@ All notable changes for each version of Ignite UI for Angular are documented on > This topic discusses changes only for components that are not included in the igniteui-angular package. > For changes specific to igniteui-angular components, please see CHANGELOG.MD. -* [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master) +- [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master) ## **20.1.0 (September 2025)** @@ -34,12 +36,12 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft The following events have been added to the `DataChart` to allow you to detect different operations on the axis labels: -* `LabelMouseDown` -* `LabelMouseUp` -* `LabelMouseEnter` -* `LabelMouseLeave` -* `LabelMouseMove` -* `LabelMouseClick` +- `LabelMouseDown` +- `LabelMouseUp` +- `LabelMouseEnter` +- `LabelMouseLeave` +- `LabelMouseMove` +- `LabelMouseClick` #### Companion Axis @@ -51,29 +53,29 @@ There is a new property called [`useInsetOutlines`]({environment:dvApiBaseUrl}/p **Breaking Changes** -* A fix was made due to an issue where the `PlotAreaPosition` and `ChartPosition` properties on [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) class were reversed. This will change the values that [`plotAreaPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#plotAreaPosition) and [`chartPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#chartPosition) return. +- A fix was made due to an issue where the `PlotAreaPosition` and `ChartPosition` properties on [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) class were reversed. This will change the values that [`plotAreaPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#plotAreaPosition) and [`chartPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#chartPosition) return. ### Enhancements #### IgxBulletGraph -* Added new `LabelsVisible` property +- Added new `LabelsVisible` property #### Charts -* New properties added to the DataToolTipLayer, ItemToolTipLayer, and CategoryToolTipLayer to aid in styling: `ToolTipBackground`, `ToolTipBorderBrush`, and `ToolTipBorderThickness` +- New properties added to the DataToolTipLayer, ItemToolTipLayer, and CategoryToolTipLayer to aid in styling: `ToolTipBackground`, `ToolTipBorderBrush`, and `ToolTipBorderThickness` -* New properties added to the DataLegend to aid in styling: `ContentBackground`, `ContentBorderBrush`, and `ContentBorderThickness`. The `ContentBorderBrush` and `ContentBorderThickness` default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties. +- New properties added to the DataLegend to aid in styling: `ContentBackground`, `ContentBorderBrush`, and `ContentBorderThickness`. The `ContentBorderBrush` and `ContentBorderThickness` default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties. -* Added a new property to [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) called [`worldPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#worldPosition) that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space. +- Added a new property to [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) called [`worldPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#worldPosition) that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space. -* Added [`highlightingFadeOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingFadeOpacity) to [`IgxSeriesViewerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html) and [`IgxDomainChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html). This allows you to configure the opacity applied to highlighted series. +- Added [`highlightingFadeOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingFadeOpacity) to [`IgxSeriesViewerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html) and [`IgxDomainChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html). This allows you to configure the opacity applied to highlighted series. -* Expose `CalloutLabelUpdating` event for domain charts. +- Expose `CalloutLabelUpdating` event for domain charts. #### IgxLinearGauge -* Added new `LabelsVisible` property +- Added new `LabelsVisible` property ### Bug Fixes @@ -96,11 +98,11 @@ There is a new property called [`useInsetOutlines`]({environment:dvApiBaseUrl}/p ### igniteui-angular-charts (Charts) -* Added `MaximumExtent` and `MaximumExtentPercentage` properties for use with axis labels. +- Added `MaximumExtent` and `MaximumExtentPercentage` properties for use with axis labels. ## **20.0.0 (June 2025)** -* Angular 20 support. +- Angular 20 support. ## **19.0.1 (February 2025)** @@ -114,49 +116,49 @@ There is a new property called [`useInsetOutlines`]({environment:dvApiBaseUrl}/p ### igniteui-angular-charts (Charts) -* Added [Chart Data Annotations](charts/features/chart-data-annotations.md) layers: - * Data Annotation Band Layer - * Data Annotation Line Layer - * Data Annotation Rect Layer - * Data Annotation Slice Layer - * Data Annotation Strip Layer +- Added [Chart Data Annotations](charts/features/chart-data-annotations.md) layers: + - Data Annotation Band Layer + - Data Annotation Line Layer + - Data Annotation Rect Layer + - Data Annotation Slice Layer + - Data Annotation Strip Layer -* The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose `LayoutMode` property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure. +- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose `LayoutMode` property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure. -* The [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within. +- The [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within. -* The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an `OverlayText` property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text. +- The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an `OverlayText` property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text. -* [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart. +- [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart. ### igniteui-angular-dashboards (Dashboards) -* The `DashboardTile` now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the `DataSource` of the `DashboardTile` to an instance of `LocalDataSource`. +- The `DashboardTile` now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the `DataSource` of the `DashboardTile` to an instance of `LocalDataSource`. ### igniteui-angular **Breaking Changes** -* The 'igniteui-angular-grids' package has been renamed to 'igniteui-angular-data-grids'. +- The 'igniteui-angular-grids' package has been renamed to 'igniteui-angular-data-grids'. ### Enhancements #### Toolbar -* Value layers added from the toolbar now appear on the legend. -* The zoom reset tool has been moved to the zoom drop-down. +- Value layers added from the toolbar now appear on the legend. +- The zoom reset tool has been moved to the zoom drop-down. #### Data Pie Chart -* The chart now exposes a `GetOthersContext()` method. This will return the contents of the "others" slice. +- The chart now exposes a `GetOthersContext()` method. This will return the contents of the "others" slice. ### Bug Fixes | Bug Number | Control | Description | |------------|---------|------------------| -|37023|IgxDataChart|Tooltips are cut-off/offscreen if overflow hidden is set. -|37244|Excel|Custom Data Validation is not working. -|37685|IgxSpreadsheet|Poor rendering of numbers formatted with Arial font. +|37023|IgxDataChart|Tooltips are cut-off/offscreen if overflow hidden is set. | +|37244|Excel|Custom Data Validation is not working. | +|37685|IgxSpreadsheet|Poor rendering of numbers formatted with Arial font. | ## **19.0.1 (February 2025)** @@ -164,9 +166,9 @@ There is a new property called [`useInsetOutlines`]({environment:dvApiBaseUrl}/p #### Toolbar -* Added new `GroupHeaderTextStyle` property to [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) and [`IgxToolPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolpanelcomponent.html). If set, it will apply to all [`IgxToolActionGroupHeaderComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactiongroupheadercomponent.html) actions. -* Added new property on [`IgxToolActionComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html) called [`titleHorizontalAlignment`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#titleHorizontalAlignment) which controls the horizontal alignment of the title text. -* Added new property on [`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) called [`itemSpacing`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html#itemSpacing) which controls the spacing between items inside the panel. +- Added new `GroupHeaderTextStyle` property to [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) and [`IgxToolPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolpanelcomponent.html). If set, it will apply to all [`IgxToolActionGroupHeaderComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactiongroupheadercomponent.html) actions. +- Added new property on [`IgxToolActionComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html) called [`titleHorizontalAlignment`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#titleHorizontalAlignment) which controls the horizontal alignment of the title text. +- Added new property on [`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) called [`itemSpacing`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html#itemSpacing) which controls the spacing between items inside the panel. ### Bug Fixes @@ -189,164 +191,147 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools ## **19.0.0 (January 2025)** -* Angular 19 support. +- Angular 19 support. ## **18.2.0 (December 2024)** ### igniteui-angular-charts (Charts) -* [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. +- [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) -* [Color Editor](inputs/color-editor.md) can be used as a standalone color picker and is now integrated into ToolAction of [Toolbar](menus/toolbar.md) component to update visualizations at runtime. +- [Color Editor](inputs/color-editor.md) can be used as a standalone color picker and is now integrated into ToolAction of [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. +- [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. -* [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph. +- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph. -* [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) +- [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) - * New ToolActionCheckboxList + - New ToolActionCheckboxList A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. Requires IgxCheckboxListModule to be registered. - * New Filtering Support + - New Filtering Support - * Axis Field Changes + - Axis Field Changes New default IconMenu in Toolbar when targeting CategoryChart. Label fields are mapped to the X-axis and Value fields are mapped to the Y-axis. Target chart reacts in realtime to changes made. IconMenu is hidden when chart has no ItemsSource set. ## **18.0.0 (June 2024)** -* Angular 18 support. - -### igniteui-angular-charts (Charts) - -* [Data Legend Grouping](charts/features/chart-data-legend.md#angular-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#angular-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the [`dataLegendGroup`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dataLegendGroup) property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. - - - -* [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and [`selectedSeriesItems`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectedSeriesItems) are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. - -* [Treemap Highlighting](charts/types/treemap-chart.md#angular-treemap-highlighting) - Now exposes a [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the [`highlightingTransitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingTransitionDuration) property. - -* [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#angular-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new [`highlightedDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource). Can be toggled via [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightedValuesDisplayMode) and styled via `FillBrushes`. - -* [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) - New `IsHighlighted` option for ToolAction for outlining a border around specific tools of choice. - -### igniteui-angular-gauges (Gauges) - -* [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) - * New label for the highlight needle. [`highlightLabelText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightLabelText) and [`highlightLabelSnapsToNeedlePivot`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightLabelSnapsToNeedlePivot) and many other styling related properties for the HighlightLabel were added. - -## **18.0.0 (June 2024)** - -* Angular 18 support. +- Angular 18 support. ### igniteui-angular-charts (Charts) -* [Data Legend Grouping](charts/features/chart-data-legend.md#angular-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#angular-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the [`dataLegendGroup`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dataLegendGroup) property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. +- [Data Legend Grouping](charts/features/chart-data-legend.md#angular-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#angular-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the [`dataLegendGroup`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dataLegendGroup) property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. -* [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and [`selectedSeriesItems`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectedSeriesItems) are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. +- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and [`selectedSeriesItems`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectedSeriesItems) are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. -* [Treemap Highlighting](charts/types/treemap-chart.md#angular-treemap-highlighting) - Now exposes a [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the [`highlightingTransitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingTransitionDuration) property. +- [Treemap Highlighting](charts/types/treemap-chart.md#angular-treemap-highlighting) - Now exposes a [`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the [`highlightingTransitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingTransitionDuration) property. -* [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#angular-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new [`highlightedDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource). Can be toggled via [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightedValuesDisplayMode) and styled via `FillBrushes`. +- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#angular-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new [`highlightedDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource). Can be toggled via [`highlightedValuesDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightedValuesDisplayMode) and styled via `FillBrushes`. -* [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) - New `IsHighlighted` option for ToolAction for outlining a border around specific tools of choice. +- [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) - New `IsHighlighted` option for ToolAction for outlining a border around specific tools of choice. ### igniteui-angular-gauges (Gauges) -* [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) - * New label for the highlight needle. [`highlightLabelText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightLabelText) and [`highlightLabelSnapsToNeedlePivot`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightLabelSnapsToNeedlePivot) and many other styling related properties for the HighlightLabel were added. +- [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) + - New label for the highlight needle. [`highlightLabelText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightLabelText) and [`highlightLabelSnapsToNeedlePivot`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightLabelSnapsToNeedlePivot) and many other styling related properties for the HighlightLabel were added. + - New [`opticalScalingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#opticalScalingEnabled) and [`opticalScalingSize`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#opticalScalingSize) properties for the [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html). This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in the [Optical Scaling section](radial-gauge.md#optical-scaling) + - New highlight needle was added. [`highlightValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightValue) and [`highlightValueDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightValueDisplayMode) when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) + - New highlight needle was added. [`highlightValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html#highlightValue) and [`highlightValueDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html#highlightValueDisplayMode) when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- [`IgxBulletGraphComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) + - The Performance bar will now reflect a difference between the value and new [`highlightValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValue) when the [`highlightValueDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValueDisplayMode) is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. ## **17.3.0 (March 2024)** ### igniteui-angular-charts -* New Data Filtering via the [`initialFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialFilter) property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. +- New Data Filtering via the [`initialFilter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialFilter) property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. -* `XamRadialChart` - * New Label Mode +- `XamRadialChart` + - New Label Mode The [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) for the now exposes a [`labelMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html#labelMode) property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. ### igniteui-angular-gauges -* [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) - * New title/subtitle properties. [`titleText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#titleText), [`subtitleText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#subtitleText) will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and [`titleExtent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#titleExtent). Finally, the new [`titleDisplaysValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#titleDisplaysValue) will allow the value to correspond with the needle's position. - * New [`opticalScalingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#opticalScalingEnabled) and [`opticalScalingSize`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#opticalScalingSize) properties for the [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html). This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature [here](radial-gauge.md#optical-scaling) - * New highlight needle was added. [`highlightValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightValue) and [`highlightValueDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightValueDisplayMode) when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. -* [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) - * New highlight needle was added. [`highlightValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html#highlightValue) and [`highlightValueDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html#highlightValueDisplayMode) when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. -* [`IgxBulletGraphComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) - * The Performance bar will now reflect a difference between the value and new [`highlightValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValue) when the [`highlightValueDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValueDisplayMode) is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. +- [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) + - New title/subtitle properties. [`titleText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#titleText), [`subtitleText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#subtitleText) will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and [`titleExtent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#titleExtent). Finally, the new [`titleDisplaysValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#titleDisplaysValue) will allow the value to correspond with the needle's position. + - New [`opticalScalingEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#opticalScalingEnabled) and [`opticalScalingSize`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#opticalScalingSize) properties for the [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html). This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in the [Optical Scaling section](radial-gauge.md#optical-scaling) + - New highlight needle was added. [`highlightValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightValue) and [`highlightValueDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightValueDisplayMode) when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) + - New highlight needle was added. [`highlightValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html#highlightValue) and [`highlightValueDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html#highlightValueDisplayMode) when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- [`IgxBulletGraphComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) + - The Performance bar will now reflect a difference between the value and new [`highlightValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValue) when the [`highlightValueDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValueDisplayMode) is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. ## **17.2.0 (January 2024)** ### igniteui-angular-charts (Charts) -* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. +- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. ## **17.0.0 (November 2023)** ### igniteui-angular - Toolbar - -* Save tool action has been added to save the chart to an image via the clipboard. -* Vertical orientation has been added via the toolbar's [`orientation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. -* Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. +- Save tool action has been added to save the chart to an image via the clipboard. +- Vertical orientation has been added via the toolbar's [`orientation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. +- Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. ## **16.1.0 (June 2023)** ### New Components -* [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) or [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. +- [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) or [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. ### igniteui-angular-charts (Charts) -* [ValueLayer](charts/features/chart-overlays.md#angular-value-layer) - A new series type named the [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) by adding to the new [`valueLines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) collection. +- [ValueLayer](charts/features/chart-overlays.md#angular-value-layer) - A new series type named the [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) by adding to the new [`valueLines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) collection. -* It is now possible to apply a **dash array** to the different parts of the series of the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). You can apply this to the [series](charts/types/line-chart.md#angular-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#angular-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#angular-chart-trendlines-dash-array-example) of the series plotted in the chart. +- It is now possible to apply a **dash array** to the different parts of the series of the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). You can apply this to the [series](charts/types/line-chart.md#angular-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#angular-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#angular-chart-trendlines-dash-array-example) of the series plotted in the chart. ## **16.0.0 (May 2023)** -* Angular 16 support. +- Angular 16 support. ## **15.0.0 (December 2022)** -* Angular 15 support. +- Angular 15 support. ## **14.2.0 (November 2022)** Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include: -* Responsive layouts for horizontal label rotation based on browser / screen size. -* Enhanced rendering for rounded labels on all platforms. -* Added marker properties to StackedFragmentSeries. -* Added [`shouldPanOnMaximumZoom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#shouldPanOnMaximumZoom) property. -* New Category Axis Properties: - * ZoomMaximumCategoryRange - * ZoomMaximumItemSpan - * ZoomToCategoryRange - * ZoomToItemSpan -* New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data: - * InitialSortDescriptions - * InitialSorts - * SortDescriptions - * InitialGroups - * InitialGroupDescriptions - * GroupDescriptions - * InitialSummaries - * InitialSummaryDescriptions - * SummaryDescriptions - * InitialGroupSortDescriptions - * GroupSorts - * GroupSortDescriptions +- Responsive layouts for horizontal label rotation based on browser / screen size. +- Enhanced rendering for rounded labels on all platforms. +- Added marker properties to StackedFragmentSeries. +- Added [`shouldPanOnMaximumZoom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#shouldPanOnMaximumZoom) property. +- New Category Axis Properties: + - ZoomMaximumCategoryRange + - ZoomMaximumItemSpan + - ZoomToCategoryRange + - ZoomToItemSpan +- New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data: + - InitialSortDescriptions + - InitialSorts + - SortDescriptions + - InitialGroups + - InitialGroupDescriptions + - GroupDescriptions + - InitialSummaries + - InitialSummaryDescriptions + - SummaryDescriptions + - InitialGroupSortDescriptions + - GroupSorts + - GroupSortDescriptions > \[!Note] > The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) | [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. @@ -355,20 +340,20 @@ Added significant improvements to default behaviors, and refined the Category Ch ### igniteui-angular-charts (Charts) -* Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the [`IgxLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlegendcomponent.html), but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. -* Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types. -* Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the [`isTransitionInEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#isTransitionInEnabled) property to true. From there, you can set the [`transitionInDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#transitionInDuration) property to determine how long your animation should take to complete and the [`transitionInMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#transitionInMode) to determine the type of animation that takes place. -* Added `AssigningCategoryStyle` event, is now available to all series in [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. -* New [`allowedPositions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#allowedPositions) enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`. -* New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default. - * [`calloutCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutCornerRadius) for CalloutLayer - * [`axisAnnotationBackgroundCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationBackgroundCornerRadius) for FinalValueLayer - * [`xAxisAnnotationBackgroundCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcrosshairlayercomponent.html#xAxisAnnotationBackgroundCornerRadius) and [`yAxisAnnotationBackgroundCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcrosshairlayercomponent.html#yAxisAnnotationBackgroundCornerRadius) for CrosshairLayer -* New [`horizontalViewScrollbarMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#horizontalViewScrollbarMode) and [`verticalViewScrollbarMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#verticalViewScrollbarMode) enumeration to enable scrollbars in various ways. When paired with [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) or [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled), you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart. -* New `FavorLabellingScaleEnd`, determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html), [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html), `PercentChangeAxis`). -* New [`isSplineShapePartOfRange`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isSplineShapePartOfRange) determines whether to include the spline shape in the axis range requested of the axis. -* New [`xAxisMaximumGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMaximumGap), determines the maximum allowed value for the plotted series when using [`xAxisGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap). The gap determines the amount of space between columns or bars of plotted series. -* New [`xAxisMinimumGapSize`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinimumGapSize), determines the minimum allowed pixel-based value for the plotted series when using [`xAxisGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) to ensure there is always some spacing between each category. +- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the [`IgxLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlegendcomponent.html), but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. +- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types. +- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the [`isTransitionInEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#isTransitionInEnabled) property to true. From there, you can set the [`transitionInDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#transitionInDuration) property to determine how long your animation should take to complete and the [`transitionInMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#transitionInMode) to determine the type of animation that takes place. +- Added `AssigningCategoryStyle` event, is now available to all series in [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. +- New [`allowedPositions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#allowedPositions) enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`. +- New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default. + - [`calloutCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutCornerRadius) for CalloutLayer + - [`axisAnnotationBackgroundCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationBackgroundCornerRadius) for FinalValueLayer + - [`xAxisAnnotationBackgroundCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcrosshairlayercomponent.html#xAxisAnnotationBackgroundCornerRadius) and [`yAxisAnnotationBackgroundCornerRadius`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcrosshairlayercomponent.html#yAxisAnnotationBackgroundCornerRadius) for CrosshairLayer +- New [`horizontalViewScrollbarMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#horizontalViewScrollbarMode) and [`verticalViewScrollbarMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#verticalViewScrollbarMode) enumeration to enable scrollbars in various ways. When paired with [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) or [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled), you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart. +- New `FavorLabellingScaleEnd`, determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. [`IgxNumericXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html), [`IgxNumericYAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html), `PercentChangeAxis`). +- New [`isSplineShapePartOfRange`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isSplineShapePartOfRange) determines whether to include the spline shape in the axis range requested of the axis. +- New [`xAxisMaximumGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMaximumGap), determines the maximum allowed value for the plotted series when using [`xAxisGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap). The gap determines the amount of space between columns or bars of plotted series. +- New [`xAxisMinimumGapSize`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinimumGapSize), determines the minimum allowed pixel-based value for the plotted series when using [`xAxisGap`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) to ensure there is always some spacing between each category.
@@ -381,30 +366,30 @@ Added significant improvements to default behaviors, and refined the Category Ch This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components. -* Changed [`yAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) property's type to **YAxisLabelLocation** from **AxisLabelLocation** in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) -* Changed [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) property's type to **XAxisLabelLocation** from **AxisLabelLocation** in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) -* Added [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) property to [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) -* Added support for representing geographic series of [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) in a legend -* Added crosshair lines by default in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) -* Added crosshair annotations by default in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) -* Added final value annotation by default in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) -* Added new properties in Category Chart and Financial Chart: - * [`crosshairsLineThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsLineThickness) and other properties for customizing crosshairs lines - * [`crosshairsAnnotationXAxisBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsAnnotationXAxisBackground) and other properties for customizing crosshairs annotations - * [`finalValueAnnotationsBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#finalValueAnnotationsBackground) and other properties for customizing final value annotations - * [`areaFillOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#areaFillOpacity) that allow changing opacity of series fill (e.g. Area chart) - * [`markerThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerThickness) that allows changing thickness of markers -* Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map: - * [`markerAutomaticBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerAutomaticBehavior) that allows which marker type is assigned to multiple series in the same chart - * [`legendItemBadgeShape`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeShape) for setting badge shape of all series represented in a legend - * [`legendItemBadgeMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) for setting badge complexity on all series in a legend -* Added new properties in Series in Data Chart and Geographic Map: - * [`legendItemBadgeShape`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeShape) for setting badge shape on specific series represented in a legend - * [`legendItemBadgeMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) for setting badge complexity on specific series in a legend -* Changed default vertical crosshair line stroke from #000000 to #BBBBBB in category chart and series -* Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's [`markerAutomaticBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerAutomaticBehavior) property to `SmartIndexed` enum value -* Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's [`legendItemBadgeMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) property to `MatchSeries` enum value -* Changed color palette of series and markers displayed in all charts to improve accessibility +- Changed [`yAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) property's type to **YAxisLabelLocation** from **AxisLabelLocation** in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- Changed [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) property's type to **XAxisLabelLocation** from **AxisLabelLocation** in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) +- Added [`xAxisLabelLocation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) property to [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- Added support for representing geographic series of [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) in a legend +- Added crosshair lines by default in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- Added crosshair annotations by default in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- Added final value annotation by default in [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) +- Added new properties in Category Chart and Financial Chart: + - [`crosshairsLineThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsLineThickness) and other properties for customizing crosshairs lines + - [`crosshairsAnnotationXAxisBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsAnnotationXAxisBackground) and other properties for customizing crosshairs annotations + - [`finalValueAnnotationsBackground`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#finalValueAnnotationsBackground) and other properties for customizing final value annotations + - [`areaFillOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#areaFillOpacity) that allow changing opacity of series fill (e.g. Area chart) + - [`markerThickness`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerThickness) that allows changing thickness of markers +- Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map: + - [`markerAutomaticBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerAutomaticBehavior) that allows which marker type is assigned to multiple series in the same chart + - [`legendItemBadgeShape`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeShape) for setting badge shape of all series represented in a legend + - [`legendItemBadgeMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) for setting badge complexity on all series in a legend +- Added new properties in Series in Data Chart and Geographic Map: + - [`legendItemBadgeShape`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeShape) for setting badge shape on specific series represented in a legend + - [`legendItemBadgeMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) for setting badge complexity on specific series in a legend +- Changed default vertical crosshair line stroke from #000000 to #BBBBBB in category chart and series +- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's [`markerAutomaticBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerAutomaticBehavior) property to `SmartIndexed` enum value +- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's [`legendItemBadgeMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) property to `MatchSeries` enum value +- Changed color palette of series and markers displayed in all charts to improve accessibility | Old brushes/outlines | New outline/brushes | | -------------------- | ------------------- | @@ -418,36 +403,36 @@ This release introduces a few improvements and simplifications to visual design This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), and [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html). -* Changed Bar/Column/Waterfall series to have square corners instead of rounded corners -* Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000 -* Changed Scatter High Density series’ colors for heat max property from #ee5879 to #ee5879 -* Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from #C62828 to #ee5879 -* Changed marker's thickness to 2px from 1px -* Changed marker's fill to match the marker's outline for [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html), [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html), [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html), [`IgxPolarScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html). You can use set [`markerFillMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerFillMode) property to Normal to undo this change -* Compressed labelling for the [`IgxTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) and [`IgxOrdinalTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxordinaltimexaxiscomponent.html) -* New Marker Properties: - * series.[`markerFillMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerFillMode) - Can be set to `MatchMarkerOutline` so the marker depends on the outline - * series.[`markerFillOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerFillOpacity) - Can be set to a value 0 to 1 - * series.[`markerOutlineMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlineMode) - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color -* New Series Property: - * series.[`outlineMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlineMode) - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series -* New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the [`computedPlotAreaMarginMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#computedPlotAreaMarginMode), listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart: - * chart.[`plotAreaMarginLeft`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginLeft) - * chart.[`plotAreaMarginTop`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginTop) - * chart.[`plotAreaMarginRight`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginRight) - * chart.[`plotAreaMarginBottom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginBottom) - * chart.[`computedPlotAreaMarginMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#computedPlotAreaMarginMode) -* New Highlighting Properties - * chart.[`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) - Sets whether hovered or non-hovered series to fade, brighten - * chart.[`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingBehavior) - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item - * Note, in previous releases the highlighting was limited to fade on hover. -* Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series: -* Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series: -* Added support for overriding the data source of individual stack fragments within a stacked series -* Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series -* Added support to automatically sync the vertical zoom to the series content -* Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed -* Redesigned color palette of series and markers: +- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners +- Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000 +- Changed Scatter High Density series’ colors for heat max property from #ee5879 to #ee5879 +- Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from #C62828 to #ee5879 +- Changed marker's thickness to 2px from 1px +- Changed marker's fill to match the marker's outline for [`IgxPointSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html), [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html), [`IgxScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html), [`IgxPolarScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html). You can use set [`markerFillMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerFillMode) property to Normal to undo this change +- Compressed labelling for the [`IgxTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) and [`IgxOrdinalTimeXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxordinaltimexaxiscomponent.html) +- New Marker Properties: + - series.[`markerFillMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerFillMode) - Can be set to `MatchMarkerOutline` so the marker depends on the outline + - series.[`markerFillOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerFillOpacity) - Can be set to a value 0 to 1 + - series.[`markerOutlineMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlineMode) - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color +- New Series Property: + - series.[`outlineMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlineMode) - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series +- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the [`computedPlotAreaMarginMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#computedPlotAreaMarginMode), listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart: + - chart.[`plotAreaMarginLeft`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginLeft) + - chart.[`plotAreaMarginTop`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginTop) + - chart.[`plotAreaMarginRight`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginRight) + - chart.[`plotAreaMarginBottom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginBottom) + - chart.[`computedPlotAreaMarginMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#computedPlotAreaMarginMode) +- New Highlighting Properties + - chart.[`highlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) - Sets whether hovered or non-hovered series to fade, brighten + - chart.[`highlightingBehavior`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingBehavior) - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item + - Note, in previous releases the highlighting was limited to fade on hover. +- Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series: +- Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series: +- Added support for overriding the data source of individual stack fragments within a stacked series +- Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series +- Added support to automatically sync the vertical zoom to the series content +- Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed +- Redesigned color palette of series and markers: | Old brushes/outlines | New outline/brushes | | -------------------- | ------------------- | @@ -457,29 +442,29 @@ for example: | | | |---|---| -| | | -| | | +| Chart Defaults 1 | Chart Defaults 2 | +| Chart Defaults 3 | Chart Defaults 4 | #### Chart Legend -* Added horizontal [`orientation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) property to ItemLegend that can be used with Bubble, Donut, and Pie Chart -* Added [`legendHighlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendHighlightingMode) property - Enables series highlighting when hovering over legend items +- Added horizontal [`orientation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added [`legendHighlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendHighlightingMode) property - Enables series highlighting when hovering over legend items ### igniteui-angular-maps (GeoMap) > \[!Note] > These features are CTP -* Added support for wrap around display of the map (scroll infinitely horizontally) -* Added support for shifting display of some map series while wrapping around the coordinate origin -* Added support for highlighting of the shape series -* Added support for some annotation layers for the shape series +- Added support for wrap around display of the map (scroll infinitely horizontally) +- Added support for shifting display of some map series while wrapping around the coordinate origin +- Added support for highlighting of the shape series +- Added support for some annotation layers for the shape series
## **8.2.12** -* Changed Import Statements +- Changed Import Statements Import statements have been simplified to use just package names instead of full paths to API classes and enums. @@ -495,7 +480,7 @@ Import statements have been simplified to use just package names instead of full | igniteui-angular-charts| Category Chart, Data Chart, Donut Chart, Financial Chart, Pie Chart, [Zoom Slider](zoomslider-overview.md) | | igniteui-angular-core | all classes and enums | -* Code After Changes +- Code After Changes Now, you need to use just package names instead of full paths to API classes and enums. @@ -520,7 +505,7 @@ import { IgxGeographicMapComponent } from "igniteui-angular-maps"; import { IgxGeographicMapModule } from "igniteui-angular-maps"; ``` -* Code Before Changes +- Code Before Changes Before, you had to import using full paths to API classes and enums: diff --git a/en/components/general-whats-new-dv.md b/en/components/general-whats-new-dv.md index e66f03bb36..46ebbab838 100644 --- a/en/components/general-whats-new-dv.md +++ b/en/components/general-whats-new-dv.md @@ -12,71 +12,71 @@ This topic provides information about breaking changes in Ignite UI for Angular This release introduces several new and improved visual design and configuration options for all of the chart components. e.g. Data Chart, Category Chart, and Financial Chart. -### Redesigned Chart Defaults: +### Redesigned Chart Defaults -- New color palette for series/markers in all charts +- New color palette for series/markers in all charts eg. -| | | +| Chart Defaults 1 | Chart Defaults 2 | | ----------------------------------------------------------------- | ----------------------------------------------------------------- | -| | | +| Chart Defaults 3 | Chart Defaults 4 |
-- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners -- Changed Scatter High Density series’ colors for min/max heat properties -- Changed Financial/Waterfall series’ colors for negative fill of their visuals -- Changed marker's thickness to 2px from 1px -- Changed marker's fill to match the marker's outline for PointSeries, BubbleSeries, ScatterSeries, PolarScatterSeries - - Note, you can use set `MarkerFillMode` property to Normal to undo this change -- Compressed labelling for the TimeXAxis and OrdinalTimeXAxis -- New Marker Properties: - - `MarkerFillMode` - Can be set to 'MatchMarkerOutline' so the marker depends on the outline - - `MarkerFillOpacity` - Can be set to a value 0 to 1 - - `MarkerOutlineMode` - Can be set to 'MatchMarkerBrush' so the marker's outline depends on the fill brush color -- New Series `OutlineMode` Property: - - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series -- New Plot Area Margin Properties: - - `PlotAreaMarginLeft` - - `PlotAreaMarginTop` - - `PlotAreaMarginRight` - - `PlotAreaMarginBottom` - - [`ComputedPlotAreaMarginMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/computedplotareamarginmode.html) - - The plot area margin properties define the bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the [`ComputedPlotAreaMarginMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/computedplotareamarginmode.html), listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart. -- New Highlighting Properties - - [`HighlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/highlightingmode.html) - Sets whether hovered or non-hovered series to fade, brighten - - `HighlightingBehavior` - Sets whether the series highlights depending on mouse position eg. directly over or nearest item - - Note, in previous releases the highlighting was limited to fade on hover. -- Added Highlighting for the following series: - - Stacked - - Scatter - - Polar - - Radial - - Shape -- Added Annotation layers to the following series: - - Stacked - - Scatter - - Polar - - Radial - - Shape -- Added support for overriding the data source of individual stack fragments within a stacked series -- Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series -- Added support to automatically sync the vertical zoom to the series content -- Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed +- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners +- Changed Scatter High Density series’ colors for min/max heat properties +- Changed Financial/Waterfall series’ colors for negative fill of their visuals +- Changed marker's thickness to 2px from 1px +- Changed marker's fill to match the marker's outline for PointSeries, BubbleSeries, ScatterSeries, PolarScatterSeries + - Note, you can use set `MarkerFillMode` property to Normal to undo this change +- Compressed labelling for the TimeXAxis and OrdinalTimeXAxis +- New Marker Properties: + - `MarkerFillMode` - Can be set to 'MatchMarkerOutline' so the marker depends on the outline + - `MarkerFillOpacity` - Can be set to a value 0 to 1 + - `MarkerOutlineMode` - Can be set to 'MatchMarkerBrush' so the marker's outline depends on the fill brush color +- New Series `OutlineMode` Property: + - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series +- New Plot Area Margin Properties: + - `PlotAreaMarginLeft` + - `PlotAreaMarginTop` + - `PlotAreaMarginRight` + - `PlotAreaMarginBottom` + - [`ComputedPlotAreaMarginMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/computedplotareamarginmode.html) + - The plot area margin properties define the bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the [`ComputedPlotAreaMarginMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/computedplotareamarginmode.html), listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart. +- New Highlighting Properties + - [`HighlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/highlightingmode.html) - Sets whether hovered or non-hovered series to fade, brighten + - `HighlightingBehavior` - Sets whether the series highlights depending on mouse position eg. directly over or nearest item + - Note, in previous releases the highlighting was limited to fade on hover. +- Added Highlighting for the following series: + - Stacked + - Scatter + - Polar + - Radial + - Shape +- Added Annotation layers to the following series: + - Stacked + - Scatter + - Polar + - Radial + - Shape +- Added support for overriding the data source of individual stack fragments within a stacked series +- Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series +- Added support to automatically sync the vertical zoom to the series content +- Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed -### Chart Legend Features: +### Chart Legend Features -- Added Horizontal Orientation for ItemLegend - - The following chart types can use ItemLegend in horizontal orientation: - - Bubble - - Donut - - Pie -- [`LegendHighlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/legendhighlightingmode.html) - Enables series highlighting when hovering over legend items +- Added Horizontal Orientation for ItemLegend + - The following chart types can use ItemLegend in horizontal orientation: + - Bubble + - Donut + - Pie +- [`LegendHighlightingMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/legendhighlightingmode.html) - Enables series highlighting when hovering over legend items -### Geographic Map Features (CTP): +### Geographic Map Features (CTP) -- Added support for wrap around display of the map (scroll infinitely horizontally) -- Added support for shifting display of some map series while wrapping around the coordinate origin -- Added support for highlighting of the shape series -- Added support for some annotation layers for the shape series +- Added support for wrap around display of the map (scroll infinitely horizontally) +- Added support for shifting display of some map series while wrapping around the coordinate origin +- Added support for highlighting of the shape series +- Added support for some annotation layers for the shape series diff --git a/en/components/general/angular-grid-overview-guide.md b/en/components/general/angular-grid-overview-guide.md index fe017e77c9..4fc5ab36fd 100644 --- a/en/components/general/angular-grid-overview-guide.md +++ b/en/components/general/angular-grid-overview-guide.md @@ -8,43 +8,43 @@ _keywords: angular, angular app development, infragistics _Get to know the Angular Data Grid and how to use it [by checking out this informative section](../grids-and-lists.md#what-is-an-angular-data-grid) part of our Grid Overview topic._ -### Ignite UI - Our Framework for Angular App Development +## Ignite UI - Our Framework for Angular App Development -Ignite UI for Angular is an advanced toolset from Infragistics that includes feature-rich, high-performing UI components such as data grids and other components including charts, data visualization maps, editors, and more. +Ignite UI for Angular is an advanced toolset from Infragistics that includes feature-rich, high-performing UI components such as data grids and other components including charts, data visualization maps, editors, and more. -The Ignite UI Angular data grid is among the fastest in the industry and is used by many of the leading financial and insurance companies. +The Ignite UI Angular data grid is among the fastest in the industry and is used by many of the leading financial and insurance companies. -Built on Google’s Angular framework, Ignite UI provides over 50 UI components and Material-based components, and over 50 chart types, including financial charting. +Built on Google’s Angular framework, Ignite UI provides over 50 UI components and Material-based components, and over 50 chart types, including financial charting. -Among its many benefits, Ignite UI for Angular offers easy integration, rapid development and design, and responsive, cross-browser compatibility. +Among its many benefits, Ignite UI for Angular offers easy integration, rapid development and design, and responsive, cross-browser compatibility. -### Installing and Creating a Project +## Installing and Creating a Project -You can install Ignite UI for Angular with either the Angular CLI or with the [Ignite UI CLI](./cli/getting-started-with-cli.md). To start quickly with the Angular CLI, run the following command: +You can install Ignite UI for Angular with either the Angular CLI or with the [Ignite UI CLI](./cli/getting-started-with-cli.md). To start quickly with the Angular CLI, run the following command: -`ng add igniteui-angular` +`ng add igniteui-angular` This is the preferred option when you need to add Ignite UI for Angular to an [existing Angular application](getting-started.md#installing-ignite-ui-for-angular). -If you’re creating a new application from scratch, we recommend the following approach: +If you’re creating a new application from scratch, we recommend the following approach: -`npm install –g igniteui-cli` +`npm install –g igniteui-cli` -Once the igniteui cli is installed you can easily bootstrap an application by following cli’s [guided experience using the Ignite UI CLI](./cli/step-by-step-guide-using-cli.md) or [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md), which builds a configured app that the end user can run with a single command: +Once the igniteui cli is installed you can easily bootstrap an application by following cli’s [guided experience using the Ignite UI CLI](./cli/step-by-step-guide-using-cli.md) or [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md), which builds a configured app that the end user can run with a single command: -`ig` +`ig` -Use this rich set of cli commands to perform other functions, including generating an Ignite UI project and adding a new component to building and serving the entire application. +Use this rich set of cli commands to perform other functions, including generating an Ignite UI project and adding a new component to building and serving the entire application. -### Importing Dependencies +## Importing Dependencies -When it comes to importing product dependencies, we strongly recommend using our Ignite UI CLI. By simply using `ng add igniteui-angular` you can install the Ignite UI for Angular package, along with all of its dependencies, font imports, styles preferences, and more to your project. +When it comes to importing product dependencies, we strongly recommend using our Ignite UI CLI. By simply using `ng add igniteui-angular` you can install the Ignite UI for Angular package, along with all of its dependencies, font imports, styles preferences, and more to your project. -To start using Ignite UI for Angular components without the Ignite UI CLI, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this manually in the [Getting started](./getting-started.md) topic. +To start using Ignite UI for Angular components without the Ignite UI CLI, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this manually in the [Getting started](./getting-started.md) topic. -### Adding Components to a Template +## Adding Components to a Template -Once you finish with the development environment setup, you can continue adding and configuring other Ignite UI components. Here’s how to use [our schematics](./cli-overview.md) to add a grid with basic configuration and add templates to some of our columns. +Once you finish with the development environment setup, you can continue adding and configuring other Ignite UI components. Here’s how to use [our schematics](./cli-overview.md) to add a grid with basic configuration and add templates to some of our columns. ```html @@ -62,15 +62,16 @@ Once you finish with the development environment setup, you can continue adding ``` -The grid itself consist of different components such as the IgxColumnComponent which is used to define the grid's columns collection and to enable features per column like sorting and paging. -Each of the columns of the grid can be templated separately. The column expects ng-template tags decorated with one of the grid module directives. +The grid itself consist of different components such as the IgxColumnComponent which is used to define the grid's columns collection and to enable features per column like sorting and paging. -### Configuring Your Components +Each of the columns of the grid can be templated separately. The column expects ng-template tags decorated with one of the grid module directives. -Now that you’ve defined columns to our Grid you can set different cell, header, and footer templates as follows: +## Configuring Your Components - - IgxHeader directive targets the column header providing the column object itself as a context. +Now that you’ve defined columns to our Grid you can set different cell, header, and footer templates as follows: + +- IgxHeader directive targets the column header providing the column object itself as a context. ```html @@ -79,9 +80,10 @@ Now that you’ve defined columns to our Grid you can set different cell, heade ``` - - igxCell applies the provided template to all cells in the column. The context object provided in the template consists of the cell value provided implicitly and the cell object itself. - - The column also accepts one last template that will be used when a cell is in edit mode. As with the other column templates, the provided context object is again the cell value and the cell object itself +- igxCell applies the provided template to all cells in the column. The context object provided in the template consists of the cell value provided implicitly and the cell object itself. + +- The column also accepts one last template that will be used when a cell is in edit mode. As with the other column templates, the provided context object is again the cell value and the cell object itself ```html @@ -93,11 +95,12 @@ Now that you’ve defined columns to our Grid you can set different cell, heade ``` -### Adding Data to Your Tables and Charts -While some Angular apps will use static data, most app development today uses data stored in a database. Angular data-binding, which is the process of establishing a connection between the app UI and the data it displays, is easy to implement to allow for dynamic tables. You can set the grid to bind to a remote data service, which is the common scenario in large-scale applications. A good practice is to separate all data-fetching-related logic in a separate data service. Here is a way to create a service which will handle the fetching of data from the server: +## Adding Data to Your Tables and Charts + +While some Angular apps will use static data, most app development today uses data stored in a database. Angular data-binding, which is the process of establishing a connection between the app UI and the data it displays, is easy to implement to allow for dynamic tables. You can set the grid to bind to a remote data service, which is the common scenario in large-scale applications. A good practice is to separate all data-fetching-related logic in a separate data service. Here is a way to create a service which will handle the fetching of data from the server: -The service itself is pretty simple consisting of one method: fetchData that will return an `Observable`. +The service itself is pretty simple consisting of one method: fetchData that will return an `Observable`. ```typescript @@ -126,7 +129,8 @@ export class NorthwindService { } } ``` -After implementing the service, you’ll want to inject it in our component's constructor and use it to retrieve the data. The ngOnInit lifecycle hook is a good place to dispatch the initial request + +After implementing the service, you’ll want to inject it in our component's constructor and use it to retrieve the data. The ngOnInit lifecycle hook is a good place to dispatch the initial request ```typescript @@ -153,7 +157,8 @@ export class MyComponent implements OnInit { ... ``` -Check out our [Data-binding topic](../grid/grid.md#angular-grid-data-binding) for more detailed information. + +Check out our [Data-binding topic](../grid/grid.md#angular-grid-data-binding) for more detailed information. The same data binding technique is applicable to the other Ignite UI components, such as the igxDataChart. @@ -173,11 +178,12 @@ The same data binding technique is applicable to the other Ignite UI components, [dataSource]="data" > ``` -Setting a data source on the chart component will apply to all series, but you can also set different data sources on each series added in the data chart. -### Sorting, Filtering and Pagination +Setting a data source on the chart component will apply to all series, but you can also set different data sources on each series added in the data chart. + +## Sorting, Filtering and Pagination -Angular data grids support easy sorting, filtering, and pagination. With rich APIs and an intuitive feature set-up, using Ignite UI for Angular components has never been easier. +Angular data grids support easy sorting, filtering, and pagination. With rich APIs and an intuitive feature set-up, using Ignite UI for Angular components has never been easier. ```html ``` -The Grid provides three types of Filtering with custom filtering conditions: +The Grid provides three types of Filtering with custom filtering conditions: - - [Filter row](../grid/filtering.md) per column with default filtering strategy provided out of the box, as well as all the standard filtering conditions. +- [Filter row](../grid/filtering.md) per column with default filtering strategy provided out of the box, as well as all the standard filtering conditions. - - [Excel style filtering](../grid/excel-style-filtering.md), with a configurable menu of features like sorting, moving, pinning, and hiding features. +- [Excel style filtering](../grid/excel-style-filtering.md), with a configurable menu of features like sorting, moving, pinning, and hiding features. - - [Advanced filtering](../grid/advanced-filtering.md) that provides a dialog which allows the creation of groups with filtering conditions across all columns. +- [Advanced filtering](../grid/advanced-filtering.md) that provides a dialog which allows the creation of groups with filtering conditions across all columns. -Our [Angular 9 release](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-0-0-release "Ignite UI for Angular 9.0.0 Release") includes plenty of new key features – from data analysis to a rich visualization, grid state persistence, and theming widget. +Our [Angular 9 release](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-0-0-release "Ignite UI for Angular 9.0.0 Release") includes plenty of new key features – from data analysis to a rich visualization, grid state persistence, and theming widget. -### Styling Your Components +## Styling Your Components -Ignite UI has the most expressive styling capabilities of the major Angular frameworks. +Ignite UI has the most expressive styling capabilities of the major Angular frameworks. -With just a few lines of code, you can easily change the theme of your components. Being developed in SASS, the API is easy and allows for theming granularity on different levels from a single component, multiple components, or the entire suite. +With just a few lines of code, you can easily change the theme of your components. Being developed in SASS, the API is easy and allows for theming granularity on different levels from a single component, multiple components, or the entire suite. ```scss @use "igniteui-angular/theming" as *; @@ -241,43 +247,43 @@ We want to also to mention our samples browser Theming widget. Now, you can chan
-Theming widget example
-### Data Analysis with Ignite UI +## Data Analysis with Ignite UI -The Ignite Angular UI toolset also includes [data analysis capabilities](data-analysis.md). We strive to give you all of the business capabilities you will need to deliver great experiences to your customers. So, we now provide directives that will give you a more Excel-like experience. For example, by selecting a portion of data you are now able to click a button and perform a quick data analysis on that subset of your data. +The Ignite Angular UI toolset also includes [data analysis capabilities](data-analysis.md). We strive to give you all of the business capabilities you will need to deliver great experiences to your customers. So, we now provide directives that will give you a more Excel-like experience. For example, by selecting a portion of data you are now able to click a button and perform a quick data analysis on that subset of your data.
-### Tools for Code Generation and Design +## Tools for Code Generation and Design -Ignite UI for Angular is part of the [Indigo.Design System](https://www.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design System") which lets you [generate native Angular code](https://www.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio Plugin") from designs created in Sketch with the [Indigo.Design UI Kit](https://www.infragistics.com/products/indigo-design/help/creating-an-artboard.html "Indigo Design Creating an artboard"). You can generate a mobile-friendly or data-dense grid supporting various editing and filtering modes, but you can also use many of the popular grid features such as sorting, paging, summaries, and group by. Moreover, on every column you can specify various operations like moving, resizing, hiding, and pinning to achieve the most sophisticated data manipulations scenarios at design time and have a pixel-perfect user interface running in minutes. +Ignite UI for Angular is part of the [Indigo.Design System](https://www.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design System") which lets you [generate native Angular code](https://www.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio Plugin") from designs created in Sketch with the [Indigo.Design UI Kit](https://www.infragistics.com/products/indigo-design/help/creating-an-artboard.html "Indigo Design Creating an artboard"). You can generate a mobile-friendly or data-dense grid supporting various editing and filtering modes, but you can also use many of the popular grid features such as sorting, paging, summaries, and group by. Moreover, on every column you can specify various operations like moving, resizing, hiding, and pinning to achieve the most sophisticated data manipulations scenarios at design time and have a pixel-perfect user interface running in minutes. -### Performance Benchmarks +## Performance Benchmarks Grid components, in general, are intended to visualize large quantities of tabular data. When it comes to performance, our Grid excels at load-time, run-time, and soft performance. -In order to satisfy the requirements of a web application for load time and run-time performance, it is important to virtualize the Document Object Model (DOM) elements that are rendered, and to either swap or reuse DOM elements when the user performs vertical and horizontal scrolling on the component’s container. The igxGrid has great tun-time scrolling performance without visual tears as well as soft performance (defined by the general usability of your software). Here’s an example of a Gif with scrolling performance: +In order to satisfy the requirements of a web application for load time and run-time performance, it is important to virtualize the Document Object Model (DOM) elements that are rendered, and to either swap or reuse DOM elements when the user performs vertical and horizontal scrolling on the component’s container. The igxGrid has great tun-time scrolling performance without visual tears as well as soft performance (defined by the general usability of your software). Here’s an example of a Gif with scrolling performance:
-Scrolling performance
-Check out our Grid and see how easy it is to find and navigate to the feature you want to use, or how appealing the look and feel of it would be in your application. +Check out our Grid and see how easy it is to find and navigate to the feature you want to use, or how appealing the look and feel of it would be in your application. -Learn more about this in our [Medium Software Performance (Web) article](https://medium.com/ignite-ui/software-performance-web-61158c8583d "Web Software Performance"). +Learn more about this in our [Medium Software Performance (Web) article](https://medium.com/ignite-ui/software-performance-web-61158c8583d "Web Software Performance"). diff --git a/en/components/general/cli-overview.md b/en/components/general/cli-overview.md index dfe82cbd94..9991aa295d 100644 --- a/en/components/general/cli-overview.md +++ b/en/components/general/cli-overview.md @@ -5,6 +5,7 @@ _keywords: igniteui for angular, angular schematics, cli, infragistics --- # Angular Schematics & Ignite UI CLI + Our CLI tools provide project templates pre-configured for Ignite UI for Angular that help you get your next app off the ground in record time. A selection of views with Ignite UI for Angular components that can be further added to projects provide a substantial productivity boost for developers. [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) is a stand-alone command-line tool for creating and scaffolding applications for a variety of frameworks. You can find more information and examples about its usage in the [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli.md) topic. diff --git a/en/components/general/cli/auth-template.md b/en/components/general/cli/auth-template.md index e7e3313fa1..ee3ebd2d94 100644 --- a/en/components/general/cli/auth-template.md +++ b/en/components/general/cli/auth-template.md @@ -11,9 +11,10 @@ There are multiple versions of a project (called project templates) to choose fr When creating Ignite UI for Angular project with Angular Schematics or Ignite UI CLI you can select a template with an basic implementation of a client-side authentication module that require as little additional setup as possible to jump-start apps with user management. ## Create Authentication Project + You can select an authentication project either when going through the Step by step experience after selection 'Ignite UI for Angular' project type: - +Step by step experience Or through the new command: @@ -28,17 +29,19 @@ ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=sid ``` ## Description + This template builds upon the Side Navigation default and adds a profile page and a login section to the app's nav bar that will display a login button or an avatar of the logged in user: - +Login bar The login bar also integrates dialogs to sign in or up: - +Login dialogs -The project also supports various [external authentication providers](#add-a-third-party-social-provider). +The project also supports various [external authentication providers](#add-a-third-party-social-provider). ## In code + Everything related to user management is under the `src/app/authentication` folder. Notable exports include: - `AuthenticationModule` in `authentication.module.ts` exports all components and services to the main app module. @@ -51,12 +54,13 @@ Everything related to user management is under the `src/app/authentication` fold ## Required configuration The project is setup for a single page app with REST API services, so the `AuthenticationService` is used to send requests to the following URLs: + - `/login` - login with username and password - `/register` - register with user details - `/extlogin` - passes along user info from external source All endpoints are expected to return an JSON Wen Token(JWT) - or an error state with message. + or an error state with message. > **Note:** For demonstration purposes the project has a `services/fake-backend.service.ts` that intercepts requests . The `BackendProvider` in `authentication.module.ts` should **not** be used in production. Both the provider and the file should be removed when development starts. @@ -92,6 +96,7 @@ If you need to obtain one, for example for Google Account sign in, follow the pr Keep in mind, redirect URLs and allowed domain origins should be configured per provider to match the project. When creating the Google OAuth 2.0 client ID for development you can provide `http://localhost:4200/redirect-google` as the redirect URI. See [redirect URLs](#provider-details) for details. Once you have your ID (for example `123456789.apps.googleusercontent.com`) you can enable the Google provider for the project like so: + ```ts // in app.module.ts export class AppModule { @@ -102,9 +107,10 @@ export class AppModule { } } ``` + This will automatically enable the respective button in the login dialog: - +Google login button You can do the same with [Microsoft](https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc) following this guide: @@ -117,7 +123,7 @@ https://developers.facebook.com/docs/apps/#register As you enable providers, all buttons will become active: - +Social login options ### Provider details diff --git a/en/components/general/cli/component-templates.md b/en/components/general/cli/component-templates.md index f60b0e6885..6f7828244f 100644 --- a/en/components/general/cli/component-templates.md +++ b/en/components/general/cli/component-templates.md @@ -19,29 +19,29 @@ The following table provides a list of the Ignite UI Angular components that can |tree grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGrid
IgxTreeGrid with optional features like sorting, filtering, row editing, etc.
|[IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) | |list |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newList
Basic IgxList.
|[IgxList](../../list.md) with search and filtering logic. | |combo |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newCombo
Basic IgxCombo with templating.
|[IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md). | -|Charts | | +|Charts | | | |category chart |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChart
Basic category chart with chart type selector.
|Basic [category chart](../../charts/types/column-chart.md) with chart type selector.| |financial chart |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChart
Basic financial chart with automatic toolbar and type selection.
|Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection.| -|Gauges| | +|Gauges| | | |bullet graph |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraph
IgxBulletGraph with different animations.
|[IgxBulletGraph](../../bullet-graph.md) with different animations.| |linear gauge |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGauge
IgxLinearGauge with different animations.
|[IgxLinearGauge](../../linear-gauge.md) with different animations.| |radial gauge |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGauge
IgxRadialGauge with different animations.
|[IgxRadialGauge](../../radial-gauge.md) with different animations.| -|Layouts | | +|Layouts | | | |dock-manager |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManager
Basic IgcDockManager.
|[IgcDockManager](../../dock-manager.md) with nine content slots. | |carousel |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarousel
Basic IgxCarousel.
|[IgxCarousel](../../carousel.md) cycling through a series of images. | |tabs |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabs
Basic IgxTabs.
|[IgxTabs](../../tabs.md) component that includes three customized tab-groups. | |bottom-nav |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNav
Three item bottom-nav template.
|Three item bottom [navbar](../../navbar.md) template. | -|Data Entry & Display| +|Data Entry & Display| | | |chip |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChip
Basic IgxChip.
| [IgxChip](../../chip.md) components inside igx-chips-area. | |dropdown |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDown
Basic IgxDropDown.
|Basic [IgxDropDown](../../drop-down.md) that displays a list of items. | |select (v4.1.0) |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelect
Basic IgxSelect.
|Simple [IgxSelect](../../select.md) that displays a list of items..| |select (v4.1.0) |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelect
Select With Groups.
|[IgxSelect](../../select.md) displaying grouped items. | |select (v4.1.0) |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelect
IgxSelect in a form.
|[IgxSelect](../../select.md) component usage in a form. | |input group |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroup
Basic IgxInputGroup form view.
|Form view created with [IgxInputGroup](../../input-group.md).| -|Interactions| +|Interactions| | | |dialog |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialog
Basic IgxDialog.
| Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog. | |tooltip |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltip
A fully customizable tooltip.
|Basic tooltip created with the [IgxTooltip](../../tooltip.md). | -|Scheduling | | +|Scheduling | | | |date-picker |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePicker
Basic IgxDatePicker.
|Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | |time-picker |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePicker
Basic IgxTimePicker.
|Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding. | |calendar |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendar
IgxCalendar with single selection.
|Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | diff --git a/en/components/general/cli/getting-started-with-angular-schematics.md b/en/components/general/cli/getting-started-with-angular-schematics.md index 0bdf8c3102..b55b470f55 100644 --- a/en/components/general/cli/getting-started-with-angular-schematics.md +++ b/en/components/general/cli/getting-started-with-angular-schematics.md @@ -5,11 +5,13 @@ _keywords: angular cli, ignite ui for angular, infragistics --- ## Getting Started with Ignite UI for Angular Schematics + To get started install [Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) globally: ```cmd npm i -g @igniteui/angular-schematics ``` + The above install will make the schematics available to use a collection parameter for the `ng new` command. If you are using `yarn` package manager: @@ -20,7 +22,7 @@ yarn global add @igniteui/angular-schematics ### Using guided experience -The shortest and easiest way to bootstrap an application is to use the [step by step guide using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md). +The shortest and easiest way to bootstrap an application is to use the [step by step guide using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md). To activate the guide using the Ignite UI for Angular Schematics run: @@ -120,7 +122,7 @@ Additionally, you can specify **arguments** to control the theme or skip package --template

- Use this option if there are different project templates for a specific framework type. + Use this option if there are different project templates for a specific framework type. Currently this option is available only for Ignite UI for Angular igx-ts project types.

@@ -133,6 +135,7 @@ With Schematics, use `ng generate` with the Ignite UI for Angular collection and ```cmd ng g @igniteui/angular-schematics:component grid newGrid ``` + List of all the [available templates](component-templates.md). Additionally, you can specify the module in which the component will be registered or skip the auto-generation of app navigation route: @@ -144,7 +147,7 @@ Additionally, you can specify the module in which the component will be register

note: module argument is applicable only in Angular projects. -

+

Path to the module.ts file, relative to the /src/app/ folder, for the module where the new component should be registered:

@@ -168,4 +171,4 @@ The `start` schematic will build the application, start a web server and open it ```cmd ng g @igniteui/angular-schematics:start -``` \ No newline at end of file +``` diff --git a/en/components/general/cli/getting-started-with-cli.md b/en/components/general/cli/getting-started-with-cli.md index 951eb77607..9fc89c9f4a 100644 --- a/en/components/general/cli/getting-started-with-cli.md +++ b/en/components/general/cli/getting-started-with-cli.md @@ -21,13 +21,15 @@ yarn global add igniteui-cli ``` ### Using guided experience -The shortest and easiest way to bootstrap an application is to use the [step by step guide using Ignite UI CLI](step-by-step-guide-using-cli.md). + +The shortest and easiest way to bootstrap an application is to use the [step by step guide using Ignite UI CLI](step-by-step-guide-using-cli.md). To activate the guide using the Ignite UI CLI run: ```cmd ig ``` + or ```cmd @@ -37,7 +39,7 @@ ig new
- + Play video

Building Your First Ignite UI CLI App

@@ -129,7 +131,7 @@ Additionally, you can specify **arguments** to control the theme or skip package --template

- Use this option if there are different project templates for a specific framework type. + Use this option if there are different project templates for a specific framework type. Currently this option is available only for Ignite UI for Angular igx-ts project types.

@@ -154,7 +156,7 @@ Additionally, you can specify the module in which the component will be register

note: module argument is applicable only in Angular projects. -

+

Path to the module.ts file, relative to the /src/app/ folder, for the module where the new component should be registered:

@@ -180,16 +182,17 @@ ig start ``` ## Ignite UI CLI Commands + A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the [Ignite UI CLI wiki pages](https://github.com/IgniteUI/igniteui-cli/wiki): | Command | Alias | Description | | --- | --- | --- | -| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. -| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory -| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types -| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists the available commands and provides a brief description of what they do. -| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Performs read and write operation on the Ignite UI CLI configuration settings. -| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term -| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. -| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. -| ig version | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | \ No newline at end of file +| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. | +| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory | +| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types | +| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists the available commands and provides a brief description of what they do. | +| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Performs read and write operation on the Ignite UI CLI configuration settings. | +| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term | +| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. | +| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | +| ig version | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | diff --git a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md index 798ca2449c..117ba1c935 100644 --- a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md +++ b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md @@ -5,6 +5,7 @@ _keywords: angular cli, ignite ui for angular, infragistics --- # Step-by-Step Guide Using Ignite UI for Angular Schematics + If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application, as well as update project previously created with the [Ignite UI Angular Schematics](getting-started-with-angular-schematics.md). To activate the guide using the Schematics collection run: @@ -18,11 +19,11 @@ This will activate the step by step mode and you will be asked a series of quest -> [!Note] +> [!Note] > Step by step mode relies on `Inquirer.js`, see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) @@ -30,46 +31,47 @@ This will activate the step by step mode and you will be asked a series of quest First you will be prompted to choose the way your application will be bootstrapped, using modules or standalone components: - +Step by step project type Then you can enter a name for your application: - +Step by step new project name Then you will be guided to choose one of the available project templates. You can create an empty project, project with side navigation or [authentication project](auth-template.md) with basic authentication module. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: - +Step by step new project template The next step is to choose a theme for your application. If you select the default option a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme is included in your project's `angular.json`. The custom option generates code for a color palette and theme with our [Theming API](../../themes.md) in the `app/styles.scss`. - +Step by step new project theme After completing the above steps the application structure will be generated, git repository will be initialized and the project will be committed. Then you will be asked if you want to complete the process or to add a new view to your application: - +Step by step new project action ## Add view Ignite UI CLI supports multiple component templates, as well as some more elaborated scenario templates, that can be added to a project. This mode can be activated either after completing project creation or inside an existing project using the commands below. To activate the the step by step mode using the Schematics collection run the `component`(alias:`c`) schematic: + ```bash ng g @igniteui/angular-schematics:component ``` In case you choose to add a new control, you will be provided with a [list of the available templates](component-templates.md#component-templates), grouped in categories. - +Step by step template group Use the arrow keys to navigate through the options and ENTER to choose the selected one. For some templates, like `Custom Grid`, for example you will be provided with a list of options that you might enable. Options can be toggled with the SPACE key: - +Step by step component features If you choose to add a scenario to your application you will also get a list of the available [scenario templates](component-templates.md#scenario-templates): - +Scenario templates After adding a template to your application, you will be asked weather you want to complete the process or to proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. diff --git a/en/components/general/cli/step-by-step-guide-using-cli.md b/en/components/general/cli/step-by-step-guide-using-cli.md index c98ab1aaf1..c2cbd8d1de 100644 --- a/en/components/general/cli/step-by-step-guide-using-cli.md +++ b/en/components/general/cli/step-by-step-guide-using-cli.md @@ -5,6 +5,7 @@ _keywords: angular cli, ignite ui for angular, infragistics --- # Step-by-Step Guide using Ignite UI CLI + If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application, as well as update project previously created with the [Ignite UI CLI](getting-started-with-cli.md). To start the guide using the Ignite UI CLI, simply run the `ig` command: @@ -12,7 +13,9 @@ To start the guide using the Ignite UI CLI, simply run the `ig` command: ```bash ig ``` + or + ```bash ig new ``` @@ -22,59 +25,60 @@ This will activate the step by step mode and you will be asked a series of quest -> [!Note] +> [!Note] > Step by step mode relies on `Inquirer.js`, see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) - ## Create new project First you will be prompted to enter a name for your application: -![](../../../images/general/ig-step-by-step-new-project-name.png) +![Step by step new project name](../../../images/general/ig-step-by-step-new-project-name.png) -After selecting `Angular` as a freamework, you will be prompted to choose the type of the project that is to be generated: - +After selecting `Angular` as a framework, you will be prompted to choose the type of the project that is to be generated: +Step by step project type Then you will be guided to choose one of the available project templates. You can create an empty project, project with side navigation or [authentication project](auth-template.md) with basic authentication module. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: -![](../../../images/general/ig-step-by-step-new-project-template.png) +![Step by step new project template](../../../images/general/ig-step-by-step-new-project-template.png) The next step is to choose a theme for your application. If you select the default option a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme is included in your project's `angular.json`. The custom option generates code for a color palette and theme with our [Theming API](../../themes.md) in the `app/styles.scss`. -![](../../../images/general/ig-step-by-step-new-project-theme.png) +![Step by step new project theme](../../../images/general/ig-step-by-step-new-project-theme.png) After completing the above steps the application structure will be generated, git repository will be initialized and the project will be committed. Then you will be asked if you want to complete the process or to add a new view to your application: -![](../../../images/general/ig-step-by-step-new-project-action.png) +![Step by step new project action](../../../images/general/ig-step-by-step-new-project-action.png) ## Add view Ignite UI CLI supports multiple component templates, as well as some more elaborated scenario templates, that can be added to a project. This mode can be activated either after completing project creation or inside an existing project using the commands below. When using Ignite UI CLI, run the `add` command: -```bash + +```bash ig add ``` + In case you choose to add a new control, you will be provided with a [list of the available templates](component-templates.md#component-templates), grouped in categories. -![](../../../images/general/ig-step-by-step-template-group.png) +![Step by step template group](../../../images/general/ig-step-by-step-template-group.png) Use the arrow keys to navigate through the options and ENTER to choose the selected one. For some templates, like `Custom Grid`, for example you will be provided with a list of options that you might enable. Options can be toggled with the SPACE key: -![](../../../images/general/ig-step-by-step-component-features.png) +![Step by step component features](../../../images/general/ig-step-by-step-component-features.png) -If you choose to add a scenario to your application you will also get a list of the available [scenario templates](component-templates.md#scenario-templates): +If you choose to add a scenario to your application, you will also get a list of the available [scenario templates](component-templates.md#scenario-templates): - +Scenario templates -After adding a template to your application, you will be asked weather you want to complete the process or to proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. +After adding a template to your application, you will be asked whether you want to complete the process or proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. -You can always add more Ignite UI for Angular views to your application at latter moment using the [`add`](getting-started-with-cli.md#add-template) command using the following syntax: +You can always add more Ignite UI for Angular views to your application at a later moment using the [`add`](getting-started-with-cli.md#add-template) command with the following syntax: `ig add [template] [name]`. diff --git a/en/components/general/data-analysis.md b/en/components/general/data-analysis.md index f181148cf8..22386d6fac 100644 --- a/en/components/general/data-analysis.md +++ b/en/components/general/data-analysis.md @@ -59,9 +59,11 @@ Data analysis is the process of examining, transforming, and arranging data in a >This functionality will be introduced in **Ignite UI for Angular** as external package in order to ease the configuration and limit the required code at minimum ## Data Analysis with DockManager + Go ahead and perform a `cell range selection` or `column selection` in order to enable the `Chart types view` based on the selected data. This view is part of [Dock Manager's](../dock-manager.md) right pane. From there you can: - - Choose specific chart type and visualize it in separate pane. - - Or use the `Data Analysis` context button to show different text formatting options. + +- Choose specific chart type and visualize it in separate pane. +- Or use the `Data Analysis` context button to show different text formatting options.
@@ -73,6 +75,7 @@ Go ahead and perform a `cell range selection` or `column selection` in order to > The [Dock Manager Web component](../dock-manager.md) provides means to manage the layout of the application through panes, and allowing the end-users to customize it further by pinning, resizing, moving and hiding panes. After selecting data, go ahead and create a couple of charts and pin them (by dragging) to the available areas Keep in mind (sample related): + - On new data selection chart data will be updated. - If multi-cell range selection is applied, only the `Text formatting` functionality will be available. - If selected data is not compatible for any of the charts - an "Incompatible data" warning message will be shown. @@ -81,14 +84,16 @@ Keep in mind (sample related): You can start using this functionality by following the steps below. Keep in mind that **igniteui-angular-extras** package is only available through our [private npm feed](https://packages.infragistics.com/npm/js-licensed/). If you have a [valid commercial license](ignite-ui-licensing.md#license-agreements), you will have access to the private feed. -Lets start with: +Let's start with: - Installing the package in your application + ```cmd npm install @infragistics/igniteui-angular-extras ``` - Installing the package peer dependencies + ```cmd npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angular-charts ``` @@ -104,18 +109,21 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula ``` + And that's it! You can now perform **cell range selection** and follow the data analysis flow. ## Data Analysis Button + The data analysis button is the outlet to visualize your selected data in various ways: - +Data analysis button This way every range selection performed in the grid can be easily analyzed in a single click. The button is rendered on every range selection at the **bottom-right** of the selection and hides when the selection is inactive. Horizontal and vertical scrolling reposition the button so that it is always rendered at its designated position. ## Chart Integration + This section introduces Grid's integration with charting functionality, which allows the end user to visualize a chart based on Grid's selected data and choose different chart types if needed. The chart will be shown by selecting a range of cells and by clicking on the show analysis button. @@ -130,6 +138,7 @@ The chart will be shown by selecting a range of cells and by clicking on the sho We currently support the following Chart types: + - [Column Chart](../charts/types/column-chart.md), [Area Chart](../charts/types/stacked-chart.md), [Line Chart](../charts/types/line-chart.md), @@ -142,39 +151,40 @@ We currently support the following Chart types: In order to show meaningful Bubble Chart we disable the preview when the data is not in valid format. ## Conditional Cell Formatting + If you have a Grid with thousands of rows of data it would be very difficult to see patterns and trends just from examining the raw information. Similar to charts and sparklines, `Conditional formatting` provides another way to visualize data and make it easier to understand. Understanding conditional formatting - it allows for applying formatting such as colors and data bars to cells based on `their value` in the range selection. The [sample below](#demo) demonstrates how you can configure the Grid to apply `Conditional Formatting`. It depends on the `Conditional formatting selection type` what condition `rules` will be shown. Below you will find the predefined styles (presets) that you can use in order to quickly apply conditional formatting to your data. The formatting of a range gets cleared when performing formatting on different range or through the clear button. The clear button is only active when there is an applied formatting. ### Number range selection + - `Data Bars` - Data bars can help you spot larger and smaller numbers, such as top-selling and bottom-selling products. This preset makes it very easy to visualize values in a range of selected cells. A longer bar represents a higher value. A cell that holds value of 0 has no data bar all other cells are filled proportionally. Positive values are with `green` color and negative values will be `red` - +Data bars formatting -- `Color Scale` - The shade of the color represents the value in the cell. The cells that hold values below the `*Lowest threshold` will be colored in `red`. The cells that are above the `*Highest threshold` will be colored in `green`. And all the cells that are between the `Lowest` and `Highest threshold` will be colored in `yellow`. > `Lowest threshold` - Below 33% of the maximum cell value in range selection. - > `Highest threshold` - Above 66% of the maximum cell value in range selection. - +Color scale formatting - `Top 10%` - Use this preset to highlight the values which are equivalent to top 10% of the selected data. - +Top 10% formatting -- `Greater than` - This preset marks all values `Greater than the avarege` +- `Greater than` - This preset marks all values `Greater than the average` - `Duplicate values` - Marks all duplicate values. - `Unique values` - All cell values that are unique will be marked (`blue` background color). - +Unique values formatting - `Empty`- Marks all cells with `undefined` values ### Text range selection + - `Text contains` - Marks all cells that contain the cell value from the `top-left most selected cell`. Example: - +Text contains formatting - `Duplicate values` - Marks all duplicate values. - `Unique values` - All cell values that are unique will be marked (`blue` background color). @@ -191,36 +201,38 @@ Understanding conditional formatting - it allows for applying formatting such as ## Data Analysis Package API ### IgxConditionalFormattingDirective +
| API | Description | Arguments | |---------|:-------------:|-----------:| -| `ConditionalFormattingType` | An **enum**, which represents the conditional formatting types | -| `IFormatColors` | An **interface**, which represents the formatting colors | -| `formatter`: **string** | An **input** property, which sets/gets the current formatting type | -| `formatColors` | An **input** property, which sets/gets the current formatting colors | `val`: *IFormatColors* | -| `onFormattersReady`| An **event**, which emits the applicable `formatting types` for the selected data, when they are determined. | -| `formatCells` | Applies conditional formatting for the selected cells. Usage:
**this.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange]({environment:angularApiUrl}/interfaces/gridselectionrange.html) [ ],
`reset`: boolean (**true** by default) | -| `clearFormatting` | Removes the conditional formatting from the selected cells. Usage:
**this.conditonalFormatting.clearFormatting()** | +| `ConditionalFormattingType` | An **enum**, which represents the conditional formatting types | | +| `IFormatColors` | An **interface**, which represents the formatting colors | | +| `formatter`: **string** | An **input** property, which sets/gets the current formatting type | | +| `formatColors` | An **input** property, which sets/gets the current formatting colors | `val`: _IFormatColors_ | +| `onFormattersReady`| An **event**, which emits the applicable `formatting types` for the selected data, when they are determined. | | +| `formatCells` | Applies conditional formatting for the selected cells. Usage:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange]({environment:angularApiUrl}/interfaces/gridselectionrange.html) [ ],
`reset`: boolean (**true** by default) | +| `clearFormatting` | Removes the conditional formatting from the selected cells. Usage:
**this.conditionalFormatting.clearFormatting()** | | ### IgxChartIntegrationDirective +
| API | Description | Arguments | |---------|-------------|-----------| -| `CHART_TYPE` | An **enum**, representing the supported chart types | -| `OPTIONS_TYPE` | An **enum**, representing the supported options type, which can be applied to a chart component| -| `IOptions` | An **interface** for chart property options | +| `CHART_TYPE` | An **enum**, representing the supported chart types | | +| `OPTIONS_TYPE` | An **enum**, representing the supported options type, which can be applied to a chart component| | +| `IOptions` | An **interface** for chart property options | | | `chartFactory`| Creates a chart component, based on the provided chart type. Usage:
**this.chartIntegration.chartFactory(CHART_TYPE.COLUMN_GROUPED, this.viewContainerRef)** | `type`: **any[ ]**, viewContainerRef: [`ViewContainerRef`](https://angular.io/api/core/ViewContainerRef) | -| `setChartComponentOptions` | Sets property options to a chart component. Usage:
**this.chartIntegration.setChartComponentOptions(CHART_TYPE.PIE, OPTIONS_TYPE.CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } })** | `chart`: *CHART_TYPE*, `optionsType`: *OPTIONS_TYPE*, `options`: *IOptions* | -| `getAvailableCharts` | Returns the enabled chart types | -| `enableCharts` | Enables the provided chart types. By default all chart types are enabled | `types`: *CHART_TYPE* [ ] | -| `disableCharts` | Disables the provided chart types | `types`: *CHART_TYPE* [ ] | -| `onChartTypesDetermined` | An **event**, emitted when the chart types, applicable for the `chartData`, are determined. This event emits an object of type `IDeterminedChartTypesArgs`, which has 2 properties:
`chartsAvailabilty`: *Map* - the enabled/disabled chart types,
`chartsForCreation`: *CHART_TYPE[]* - the applicable chart types for the `chartData` | -| `onChartCreationDone` | An event, emitted when a chart is created. This event emits the chart component, which is created | +| `setChartComponentOptions` | Sets property options to a chart component. Usage:
**this.chartIntegration.setChartComponentOptions(CHART_TYPE.PIE, OPTIONS_TYPE.CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } })** | `chart`: _CHART_TYPE_, `optionsType`: _OPTIONS_TYPE_, `options`: _IOptions_ | +| `getAvailableCharts` | Returns the enabled chart types | | +| `enableCharts` | Enables the provided chart types. By default all chart types are enabled | `types`: _CHART_TYPE_ [ ] | +| `disableCharts` | Disables the provided chart types | `types`: _CHART_TYPE_ [ ] | +| `onChartTypesDetermined` | An **event**, emitted when the chart types, applicable for the `chartData`, are determined. This event emits an object of type `IDeterminedChartTypesArgs`, which has 2 properties:
`chartsAvailabilty`: _Map_ - the enabled/disabled chart types,
`chartsForCreation`: _CHART_TYPE[]_ - the applicable chart types for the `chartData` | | +| `onChartCreationDone` | An event, emitted when a chart is created. This event emits the chart component, which is created | | | `chartData`: **any[ ]** | An **input** property, which sets/gets the data for the charts | `selectedData`: **any[ ]** | -| `useLegend`: **boolean** | An **input**, which enables/disables the legend usage for all chart types. By default it is set to **true** | -| `defaultLabelMemberPath`: **string** | An **input** property, which sets/gets the default label member path for the charts. By default the label member path will be determined, based on the provided data.
( **if the provided data records have properties with string values, the first string property name of the first data record in the `chartData` will be selected as a label member path for the charts, if not, the label member path will have value *'Index'*.** )
| +| `useLegend`: **boolean** | An **input**, which enables/disables the legend usage for all chart types. By default it is set to **true** | | +| `defaultLabelMemberPath`: **string** | An **input** property, which sets/gets the default label member path for the charts. By default the label member path will be determined, based on the provided data.
( **if the provided data records have properties with string values, the first string property name of the first data record in the `chartData` will be selected as a label member path for the charts, if not, the label member path will have value _'Index'_.** )
| | | `scatterChartYAxisValueMemberPath`: **string** | An **input** property, which sets/gets the default radius member path for the scatter bubble chart. **If not set, the default Y axis value member path will be the first numeric property name of the first data record in the `chartData`** | `path`: **string** | | `bubbleChartRadiusMemberPath`: **string** | An **input** property, which sets/gets the default radius member path for the scatter bubble chart. **If not set, the default radius member path will be the second numeric property name of the first data record in the `chartData`** | `path`: **string** | @@ -229,9 +241,9 @@ Understanding conditional formatting - it allows for applying formatting such as
-* [Angular Universal guide](https://angular.io/guide/universal) -* [Ignite UI Starter Kit](https://github.com/IgniteUI/ng-universal-example) -* [Server-side rendering terminology](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) -* [Getting started with Ignite UI for Angular](getting-started.md) -* [Ignite UI CLI Guide](cli/step-by-step-guide-using-cli.md) -* [Ignite UI for Angular Schematics Guide](cli/step-by-step-guide-using-angular-schematics.md) +- [Angular Universal guide](https://angular.io/guide/universal) +- [Ignite UI Starter Kit](https://github.com/IgniteUI/ng-universal-example) +- [Server-side rendering terminology](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) +- [Getting started with Ignite UI for Angular](getting-started.md) +- [Ignite UI CLI Guide](cli/step-by-step-guide-using-cli.md) +- [Ignite UI for Angular Schematics Guide](cli/step-by-step-guide-using-angular-schematics.md) diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index 0c4a072b5a..f4a53b235a 100644 --- a/en/components/general/getting-started.md +++ b/en/components/general/getting-started.md @@ -15,7 +15,7 @@ _keywords: ignite ui for angular, getting started, angular components
- Visual Studio Code @@ -46,9 +46,10 @@ To create an Angular application with the Angular CLI, open your preferred termi ```cmd ng new --style=scss ``` + You can specify the file extension or preprocessor to use for your application's style files with the `--style` option. We recommend using SCSS since our components' styles are based on the [Ignite UI for Angular theming library](../themes.md). Later on, when you install the Ignite UI for Angular package, your application will be configured to use the default styling theme which can be then easily customized either for all or for specific component instances. -Thereafter you can install the Ignite UI for Angular package, along with all of its dependencies, font imports and styles references to your project, by running the following command: +Thereafter you can install the Ignite UI for Angular package, along with all of its dependencies, font imports and styles references to your project, by running the following command: ```cmd ng add igniteui-angular @@ -67,24 +68,29 @@ Following is a quick overview of the steps that you need to perform in order to ```bash ng g @igniteui/angular-schematics:upgrade-packages ``` + or if using `igniteui-cli`: ```bash ig upgrade-packages ``` + The schematic will take care of switching the package dependencies of the project and update source references. [You'll be asked to login to our npm registry if not already setup](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). #### Login to our npm registry with a new setup + The approach described above covers only the scenarios where Ignite UI for Angular Trial package is already installed. If you are performing a new setup of a project or just starting with using Ignite UI for Angular, follow the guidance below. It's very important to [perform a correct setup of the private npm feed environment](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide), by: + - Ensuring a valid setup of the private registry. - Log in to our private feed using npm by specifying a non-trial user account and password. Details on the entire process [could be found here](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). ### Quick Start with Angular Schematics & Ignite UI CLI + To create an application from scratch and configure it to use the Ignite UI for Angular components you can use either the Ignite UI for Angular Schematics or the Ignite UI CLI. The first step is to install the respective package globally as follows: ```cmd @@ -100,10 +106,13 @@ npm install -g igniteui-cli Our [guided experience using the Ignite UI CLI](cli/step-by-step-guide-using-cli.md) or [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md) is the easiest way to bootstrap a configured application. To activate the guide using the Ignite UI for Angular Schematics run: + ```cmd ng new --collection="@igniteui/angular-schematics" ``` + or run the following command in case you are using the CLI tool: + ```cmd ig ``` @@ -114,7 +123,7 @@ ig
- + Play Video

Building Your First Ignite UI CLI App

@@ -128,6 +137,7 @@ We are now ready to start using Ignite UI for Angular components! ### Add components automatically #### Import modules and use components + Now we can add new components to our application using either the `component` schematic or the `add` command: ```cmd @@ -248,26 +258,26 @@ ng serve The final result should look something like this: - - +Ignite UI Project ## API References In this article we learned how to create our own Ignite UI for Angular application from scratch by taking advantage of the fully-automated process of Ignite UI for Angular projects creation in the Ignite UI CLI. We also learned and how to add Ignite UI for Angular to an existing application by using the Angular CLI. We designed our own page by including the [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) to it, which itself offers some awesome features, which you can take a look at by referring to the navigation menu. -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources +
-* [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) -* [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) -* [Grid overview](../grid/grid.md) +- [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) +- [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) +- [Grid overview](../grid/grid.md)
Our community is active and always welcoming to new ideas. -* [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) +- [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/how-to/how-to-customize-theme.md b/en/components/general/how-to/how-to-customize-theme.md index b11a30e5af..470192d18b 100644 --- a/en/components/general/how-to/how-to-customize-theme.md +++ b/en/components/general/how-to/how-to-customize-theme.md @@ -8,18 +8,18 @@ _keywords: Ignite UI for Angular, Customizing Ignite UI Theming, Optimizing Igni This article will walk you through the details of customizing Ignite UI for Angular application theming and optimizing the size of the produced stylesheet. The article shows details of how the Ignite UI for Angular theming engine works and presents advanced usage of it. The article is very useful for both making full customization of the component styles, such that your Angular application is tailored to match your desired look and feel, and for making your application optimal for deployment by reducing the style sizes down to only what is used by the app. ->[!NOTE] +>[!NOTE] > This document describes the theming system in Ignite UI for Angular from version 15 forward. Examples include both using the Sass APIs provided by the theming engine and exposed CSS variables. ## Getting Started We will be using the [App Builder](https://www.infragistics.com/products/appbuilder) to produce an Angular application and then we will modify the styling of it in the generated repository. We start by creating a new app from "Header + mini nav + content + side pane" template in the App Builder and we add some components to the design surface. - +Getting Started App Builder Then we generate our app, using Angular as a target, to a GitHub repository, on top of which we will work both from the App Builder and modifying the generated code itself. After cloning the repository and building the project, we get the running Angular application in its initial state. - +Getting Started Running App As you can see, the application has applied default theming, which is [material light variant](../../themes/sass/presets/material.md). The generated `styles.scss` file looks like this: @@ -58,7 +58,7 @@ html, body { We want a dark variant of the same theme, add our own [color palette](../../themes/palettes.md) to match our branding, and change the font to `Poppins` instead of the default `Titillium Web`, all of which we can change directly through the App Builder and we can push the change as a pull request from the App Builder into the repository. - +Getting Started App Builder Theming The updated `styles.scss` looks like this: @@ -81,9 +81,9 @@ $custom-palette: palette( As you can see, the code generation changed from the specific `@include light-theme($light-material-palette);`, which is the [default theme](../../themes/sass/presets/material.md) and [color palette](../../themes/palettes.md), to a generic [`theme()`]({environment:sassApiUrl}/themes#mixin-theme) include, which provides as parameters our custom color palette and a [dark material schema](../../themes/sass/schemas.md) for the theming structure. The running Angular app result looks like this now: - +Getting Started Dark App -We want to dig deeper and customize a specific [component theme](../../themes/sass/component-themes.md) in our application and we will do this by bringing in the CSS variables for an individual component theme, in this case the grid toolbar theme. +We want to dig deeper and customize a specific [component theme](../../themes/sass/component-themes.md) in our application and we will do this by bringing in the CSS variables for an individual component theme, in this case the grid toolbar theme. ```scss @include core(); @@ -116,7 +116,7 @@ $toolbar-theme: grid-toolbar-theme( And the result in our app now looks like this: - +Customizing Updated Toolbar The same process can be applied to override and customize any of the component themes individually. @@ -186,16 +186,16 @@ Then our theme definition will go in the general scope, which we will use for th ``` >[!NOTE] -> I have switched the `igx-grid-toolbar` theme override to overriding just two of its variables, instead of reincluding all of the theme variables using [`css-vars()`]({environment:sassApiUrl}/themes#mixin-css-vars). +> I have switched the `igx-grid-toolbar` theme override to overriding just two of its variables, instead of reincluding all of the theme variables using [`css-vars()`]({environment:sassApiUrl}/themes#mixin-css-vars). > All theme variables can be found in the [corresponding sass api doc]({environment:sassApiUrl}/themes#function-grid-toolbar-theme) and are equivalent to the sass variables, but prefixed with `--` instead of `$`. And the result now looks like this with light OS theme: - +Customizing Color Schema Light And this is how it looks with dark OS theme: - +Customizing Color Schema Dark >[!NOTE] > Full runtime switch, including Ignite UI theme schema preset switch is possible, only if two full themes are built. In the example above, we're switching the color palettes, but the theme schema remains $light-material-schema, so not all of the correct shades from the color palette are used when we switch to the dark color palette. @@ -204,11 +204,11 @@ And this is how it looks with dark OS theme: Ignite UI theming abstracts multiple dimensions of theming and provides for very robust retheming capabilities. Developers and designers can take advantage of the theming engine APIs to make tailored visual design for their applications, which gives them unique look and feel when using Ignite UI for Angular. The theming engine also exposes variables from each of the dimensions, which can be used to apply theming to the rest of the application structure, which is not directly built with Ignite UI for Angular components as UI. The dimensions exposed for modifications are: - * [Colors](../../themes/sass/palettes.md) (color palette) - * [Shape](../../themes/sass/roundness.md) (borders and radiuses) - * [Elevations](../../themes/sass/elevations.md) (shadows) - * [Typography](../../themes/sass/typography.md) (fonts and font sizes) - * [Size](../../display-density.md) (the size of information that is fitted on the screen) +- [Colors](../../themes/sass/palettes.md) (color palette) +- [Shape](../../themes/sass/roundness.md) (borders and radiuses) +- [Elevations](../../themes/sass/elevations.md) (shadows) +- [Typography](../../themes/sass/typography.md) (fonts and font sizes) +- [Size](../../display-density.md) (the size of information that is fitted on the screen) >[!NOTE] > If you really want a fully custom visual design, you will need to modify all of the supported theming dimensions and you will take full advantage of the Sass APIs. @@ -219,9 +219,9 @@ Ignite UI theming abstracts multiple dimensions of theming and provides for very After making some customizations, we're going to build the application we generated and modified to see what our application theme looks like in terms of size. - +Optimizing Initial Build -As you can see, the application theme is slightly over 400kb, which comes down to ~40kb when compressed and transferred over. This is not large, but can it be more optimal? The answer is yes, unless every single component from the Ignite UI for Angular suite is used. Calling `@include theme()` brings in all of the component themes, but we have a mechanism for telling the function what to exclude. There's an [`$exclude`]({environment:sassApiUrl}/themes#mixin-theme) parameter to the theming mixin, which takes component names as an array and excludes those from the theme at build time. Since it's not so easy to find and list all of the components available in the package, it's preferable if you can just list all of the components you use. We expose the full component list as a varialble, which you have access to once you +As you can see, the application theme is slightly over 400kb, which comes down to ~40kb when compressed and transferred over. This is not large, but can it be more optimal? The answer is yes, unless every single component from the Ignite UI for Angular suite is used. Calling `@include theme()` brings in all of the component themes, but we have a mechanism for telling the function what to exclude. There's an [`$exclude`]({environment:sassApiUrl}/themes#mixin-theme) parameter to the theming mixin, which takes component names as an array and excludes those from the theme at build time. Since it's not so easy to find and list all of the components available in the package, it's preferable if you can just list all of the components you use. We expose the full component list as a variable, which you have access to once you ```scss @use "@infragistics/igniteui-angular/theming" as *; @@ -256,7 +256,7 @@ $include: ( What does our build look like after we've excluded certain themes? - +Optimizing After Exclude As you can see, our styles size is reduced to almost half it's original size. This looks pretty good at the moment, but can we reduce this even further? In fact, we can. Most of the styles size is taken by the largest components in the suite, in this case the `IgxTreeGridComponent` that we have in one of our views. However, we don't use this component in any other view. We can make the view with the `igx-tree-grid` a lazy-loaded route and we can include the theme for the grids only for that route, hence making our top-level css even smaller. How is this done? @@ -397,9 +397,9 @@ $include: ( The result in terms of build is the following: - +Optimizing After Module Lazy Load -As you can see, our top-level `styles.css` came down to a little over 70kb, which is a little less than 6kb when compressed. We started at ~428kb, ~40kb compressed and managed to bring this down about 7 times in terms of compressed size. The rest is being delievered only when the view containing the `igx-tree-grid` and `igx-combo` components is being loaded. +As you can see, our top-level `styles.css` came down to a little over 70kb, which is a little less than 6kb when compressed. We started at ~428kb, ~40kb compressed and managed to bring this down about 7 times in terms of compressed size. The rest is being delivered only when the view containing the `igx-tree-grid` and `igx-combo` components is being loaded. ## Additional Resources @@ -412,5 +412,5 @@ Related topics: Our community is active and always welcoming to new ideas. -* [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) +- [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/how-to/how-to-perform-crud.md b/en/components/general/how-to/how-to-perform-crud.md index e8a8cd80f6..62c6b12d3c 100644 --- a/en/components/general/how-to/how-to-perform-crud.md +++ b/en/components/general/how-to/how-to-perform-crud.md @@ -7,10 +7,11 @@ _keywords: angular, crud, crud operations, infragistics, crud tutorial # What is CRUD CRUD is an acronym in computer programming that stands for the CREATE, READ, UPDATE, DELETE operations that can be performed against a data collection. In computer world, talking about CRUD applications, is a main difference compared to applications that provide read-only data to users. -# Angular CRUD + +## Angular CRUD While talking about Angular CRUD, or CRUD operations in Angular, it is important to note that the data storage is on a remote server. The Angular application can not directly access the data layer, so it needs to communicate with it through a Web API that provides endpoints for the CRUD operations, i.e.: - + | API | Operation | HTTP methods | |-----|-----------| ----------- | | "api/entities" | READ all entities | GET | @@ -37,7 +38,7 @@ export class CRUDService { return this.http.get(`${this.serverURL}\api\entities`); } - /** Gets entity with corrresponding id */ + /** Gets entity with corresponding id */ public getRecord(id) { return this.http.get(`${this.serverURL}\api\entities\${id}`); } @@ -64,7 +65,7 @@ What the above service is missing is configuration for filtering/sorting/paging, For more examples and guidance, refer to the [HTTP Services](https://angular.io/tutorial/toh-pt6) tutorial in the official Angular documentation. -# CRUD Operations with Grid +## CRUD Operations with Grid Enabling CRUD in the Grid means providing UI for the users to perform these CRUD operations from within the grid. This is quite easy - the Grid provides [**Cell Editing**](../../grid/cell-editing.md), [**Row Editing**](../../grid/row-editing.md), [**Row Adding**](../../grid/row-adding.md) and **Row Deleting** UI out of the box, and powerful API to do this on your own. Next, we want to take the result of each editing action and communicate it to the corresponding method in our CRUD service, thus preserving all changes to the original database. By completing this, we may say the grid is CRUD enabled. @@ -72,8 +73,8 @@ Enabling CRUD in the Grid means providing UI for the users to perform these CRUD This section is written as HOW-TO tutorial on enabling CRUD operations in Grid, accompanied by code snippets that you can take and copy paste in your code. - ## How to + Let's first enable the rowEditing behavior, bring the UI we need for the editing actions, benefiting from the `IgxActionStrip` (see more about the [`IgxActionStrip`](../../action-strip.md)), and attach event handlers: ```html @@ -96,7 +97,7 @@ constructor(private crudService: CRUDService) { } public rowDeleted(event: IRowDataEventArgs) { this._crudService.delete(event.data).subscribe((rec) => { - // notification or do any adittional handling + // notification or do any additional handling this.snackbar.open(`Row with ID of ${rec.ID} was deleted.`); }); } @@ -110,7 +111,7 @@ public rowEditDone(event: IGridEditDoneEventArgs) { } ``` -In the above example, we only call the corresponding methods and pass the data that is read from the event arguments. Most API endpoints will return the updated/added/deleted entity, which indicates that the request was successful. +In the above example, we only call the corresponding methods and pass the data that is read from the event arguments. Most API endpoints will return the updated/added/deleted entity, which indicates that the request was successful. A good practice is to add validation, notifying the users that all actions have been completed successfully or that an error has occurred. In such case, you may want to pass handlers for the error and complete notifications too: @@ -130,7 +131,6 @@ this._crudService.delete(event.data).subscribe({ > [!NOTE] > The above examples are based on the default grid UI for editing actions. Another valid approach is if you provide your own external UI. In such case, responding to user interactions with the UI should work with the grid editing API (**make sure the grid has a primaryKey set**). See [**API**](how-to-perform-crud.md#editing-api) section for reference. - > [!NOTE] > Make sure to follow best practices and prevent any differences in your local data compared to the server database. For example - you may decide to first make a request to the server to delete a record, but if the request fails, do not delete the data on the local grid data: @@ -149,29 +149,33 @@ this._crudService.delete(event.data).subscribe({ See the demo that was built following the guidance. Play around with it and try the examples for customization to fit your scenario in the best possible way. - -# Customizations +## Customizations + The rich Grid API allows you to customize the editing process in almost any way in order to fit your needs. This includes, but is not limited to: - - [**Batch Editing**](how-to-perform-crud.md#batch-editing): Enable Batch Editing to batch all updates, and commit everything with single request. - - [**Templating**](how-to-perform-crud.md#templates): Add templates for cell editing, or use your own external UI for row/cell editing, row adding and row deleting. - - [**Events**](how-to-perform-crud.md#events): Monitor the editing flow and react accordingly. Attach event handlers for all events emitted during editing, will allow you to do: - - data validation per cell - - data validation per row - - prompt user for expected type of input - - cancel further processing, based on business rules - - manual committing of the changes + +- [**Batch Editing**](how-to-perform-crud.md#batch-editing): Enable Batch Editing to batch all updates, and commit everything with single request. +- [**Templating**](how-to-perform-crud.md#templates): Add templates for cell editing, or use your own external UI for row/cell editing, row adding and row deleting. +- [**Events**](how-to-perform-crud.md#events): Monitor the editing flow and react accordingly. Attach event handlers for all events emitted during editing, will allow you to do: + - data validation per cell + - data validation per row + - prompt user for expected type of input + - cancel further processing, based on business rules + - manual committing of the changes - [**Rich API**](how-to-perform-crud.md#editing-api) ## Batch Editing - - Enable **Batch Editing** to keep your updates on the client, and commit all of them with single request. Batch updating is enabled bysetting `batchEditing` option to true: + +- Enable **Batch Editing** to keep your updates on the client, and commit all of them with a single request. Batch updating is enabled by setting the `batchEditing` option to true: + ```html ``` - + Go to [Batch Editing](../../grid/batch-editing.md) for more details and demo samples. ## Templates @@ -195,6 +199,7 @@ If you want to provide a custom template which will be applied when a cell is in For more information and demos, see the [Cell Editing](../../grid/cell-editing.md) topic. ## Events + The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](../../grid/row-editing.md) and [**Cell Editing**](../../grid/cell-editing.md) lifecycle - when starting, committing or canceling the editing action. | Event | Description | Arguments | Cancellable | @@ -211,9 +216,11 @@ The grid exposes a wide array of events that provide greater control over the ed Go to [Events](../../grid/editing.md#event-arguments-and-sequence) for more details and demo samples. ## Editing API + Updating data in the grid is achieved through methods exposed both by the grid: + - [`updateRow`]({environment:angularApiUrl}/classes/igxgridcomponent.html#updateRow) -- [`updateCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#updateCell) +- [`updateCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#updateCell) - [`deleteRow`]({environment:angularApiUrl}/classes/igxgridcomponent.html#deleteRow) - [`addRow`]({environment:angularApiUrl}/classes/igxgridcomponent.html#addRow) @@ -235,23 +242,17 @@ this.grid.getRowByKey(rowID).delete(); More details and information about using the grid API can be found in the [Cell Editing CRUD Operations](../../grid/cell-editing.md#crud-operations) section. -# Takeaway -Enabling CRUD in a robust way is major milestone for any data-driven application. In order to streamline the entire process, we've built the IgxGrid with the CRUD capabilities in mind, providing out-of-the-box UI and flexible APIs. How will this benefit you? It will save you lots of time when implementing CRUD against any database out there. And when we talk about modern-day data-driven apps, it all comes down to robustness, speed, and flexibility. - -# API References -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) -* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html) -* [`IgxGridActionsBaseDirective `]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) -* [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) -* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) - - - - - +## Takeaway +Enabling CRUD in a robust way is major milestone for any data-driven application. In order to streamline the entire process, we've built the IgxGrid with the CRUD capabilities in mind, providing out-of-the-box UI and flexible APIs. How will this benefit you? It will save you lots of time when implementing CRUD against any database out there. And when we talk about modern-day data-driven apps, it all comes down to robustness, speed, and flexibility. +## API References +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) +- [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html) +- [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) +- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) +- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) diff --git a/en/components/general/how-to/how-to-use-standalone-components.md b/en/components/general/how-to/how-to-use-standalone-components.md index d1f6478d01..4799d77820 100644 --- a/en/components/general/how-to/how-to-use-standalone-components.md +++ b/en/components/general/how-to/how-to-use-standalone-components.md @@ -6,12 +6,12 @@ _keywords: Ignite UI for Angular, Standalone Components, Angular 16, Angular Mod # Using Standalone Components with Ignite UI for Angular -Angular 14 introduced the concept of [standalone components](https://angular.io/guide/standalone-components) which allows for a simplified way of building applications by reducing the need for using `NgModules`. Standalone components were in developer preview until Angular 15. To support this new paradigm, all Ignite UI for Angular components are now exported as `standalone` with version `16.0.0`. As of Angular 19 all compoenents are standalone by default. All the existing `NgModules` are still exported by the library for backward compatibility. However, they no longer declare any of the Ignite UI for Angular components. Instead they import and export the `standalone` components. +Angular 14 introduced the concept of [standalone components](https://angular.io/guide/standalone-components) which allows for a simplified way of building applications by reducing the need for using `NgModules`. Standalone components were in developer preview until Angular 15. To support this new paradigm, all Ignite UI for Angular components are now exported as `standalone` with version `16.0.0`. As of Angular 19 all components are standalone by default. All the existing `NgModules` are still exported by the library for backward compatibility. However, they no longer declare any of the Ignite UI for Angular components. Instead they import and export the `standalone` components. ## How to use the new standalone components Starting with Angular 16 and Ignite UI for Angular 16.0 you can now simply add the imports that your `standalone` component needs in the `imports` property. In the following example `IGX_GRID_DIRECTIVES` can be used to import all grid related components and directives. - + ```typescript import { IGX_GRID_DIRECTIVES } from 'igniteui-angular'; @@ -65,7 +65,7 @@ The `IGX_GRID_DIRECTIVES` shown in the previous examples is a utility directive | [`IGX_CARD_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/card/public_api.ts) | Exports all card related components and directives. | | [`IGX_CAROUSEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/public_api.ts) | Exports all carousel related components and directives. | | [`IGX_CHIPS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/chips/public_api.ts) | Exports all chip related components and directives. | -| [`IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES `](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/public_api.ts) | Exports all circular progress bar related components and directives. | +| [`IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/public_api.ts) | Exports all circular progress bar related components and directives. | | [`IGX_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/public_api.ts) | Exports all combo related components and directives. | | [`IGX_DATE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/public_api.ts) | Exports all date-picker related components and directives. | | [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts) | Exports all date-range picker related components and directives. | @@ -106,5 +106,5 @@ Related topics: Our community is active and always welcoming to new ideas. -* [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) +- [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/how-to/signal-r-service-live-data.md b/en/components/general/how-to/signal-r-service-live-data.md index 90dfbf77c3..756616c998 100644 --- a/en/components/general/how-to/signal-r-service-live-data.md +++ b/en/components/general/how-to/signal-r-service-live-data.md @@ -5,15 +5,18 @@ _keywords: angular, signalr, .net core, infragistics --- # Real-time Web App with ASP.NET Core SignalR -In this topic, we’ll see how to create applications for both *streaming* and *receiving* data with **ASP.NET Core SignalR**. + +In this topic, we’ll see how to create applications for both _streaming_ and _receiving_ data with **ASP.NET Core SignalR**. What you'll need: + - A basic knowledge of ASP.NET Core and Angular. - .NET Core 3.1 installed and IDE such as Visual Studio. What you'll know by the end of this article: + - How to add and use SignalR. -- How to open Client connection and use the *method invocation* concept to stream data per Client. +- How to open Client connection and use the _method invocation_ concept to stream data per Client. - How to consume the SignalR service with Angular application by using Observables. SignalR takes advantage of several transports and it automatically selects the best available transport given the client and server's capabilities - [WebSockets, Server Send Events or Long-polling](https://stackoverflow.com/a/12855533/2940502). @@ -37,6 +40,7 @@ It's like a handshake, the Client and Server agree on what to use and they use i title="Real-time Web App with Web Sockets" /> ## SignalR Example + The purpose of this demo is to showcase a financial screen board with a Real-time data stream using [ASP.NET Core SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr). > *New project* choose ASP.NET Core Web Application and follow the setup. Feel free to follow [the official Microsoft documentation tutorial](https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio) if you experience any configuration difficulties. +In Visual Studio from _File_ >> _New project_ choose ASP.NET Core Web Application and follow the setup. Feel free to follow [the official Microsoft documentation tutorial](https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio) if you experience any configuration difficulties. > *New project* choose ASP.NET Core Web Applicatio ### SignalR Config Setup Add the following code to the [Startup.cs file](https://github.com/IgniteUI/finjs-web-api/blob/master/WebAPI/Startup.cs): + - Endpoint part of the `Configure` method. ```cs @@ -95,6 +101,7 @@ Now, let's set up additional basic configuration. Open the [properties/launchSet } } ``` + Our server-side project will run on `localhost:5001` and the client side will run on `localhost:4200`, so in order to establish communication between those two, we need to enable CORS. Let’s open the [Startup.cs](https://github.com/IgniteUI/finjs-web-api/blob/master/WebAPI/Startup.cs#L31) class and modify it: ```cs @@ -118,11 +125,13 @@ public void ConfigureServices(IServiceCollection services) ``` If you experience a specific problem with enabling Cross-origin resource sharing, check out the [official Microsoft topic](https://docs.microsoft.com/en-us/aspnet/core/signalr/security?view=aspnetcore-5.0#cross-origin-resource-sharing). + ### SignalR Hub Setup + Let's start by explaining what is a [SignalR hub?](https://docs.microsoft.com/en-us/aspnet/core/signalr/hubs?view=aspnetcore-5.0#what-is-a-signalr-hub) -The SignalR Hub API enables you to call methods on connected clients from the server. In the server code, you define methods that are called by the client. In SignalR there is this concept called *Invocation* - you can actually be calling the hub from the client with a particular method. In the client code, you define methods that are called from the server. +The SignalR Hub API enables you to call methods on connected clients from the server. In the server code, you define methods that are called by the client. In SignalR there is this concept called _Invocation_ - you can actually be calling the hub from the client with a particular method. In the client code, you define methods that are called from the server. -The actual hub lives on the server-side. Imagine you have *Clients* and *the Hub* is between all of them. You can say something to all the Clients with `Clients.All.doWork()` by invoking a method on the hub. This will goes to all connected clients. Also, you can communicate with only one client, which is the Caller, because he is the caller of that particular method. +The actual hub lives on the server-side. Imagine you have _Clients_ and _the Hub_ is between all of them. You can say something to all the Clients with `Clients.All.doWork()` by invoking a method on the hub. This will goes to all connected clients. Also, you can communicate with only one client, which is the Caller, because he is the caller of that particular method. SignalR Hub Setup with callers -We've created a [StreamHub class](https://github.com/IgniteUI/finjs-web-api/blob/d493f159e0a6f14b5ffea3e893f543f057fdc92a/WebAPI/Models/StreamHub.cs#L9) that inherits the base Hub class, which is responsible for managing connections, groups, and messaging. It's good to keep in mind that the Hub class is stateless and each new invocation of a certain method is in a new instance of this class. It's useless to save state in instance properties, rather we suggest using static properties, in our case we use static key-value pair collection to store data for each connected client. +We've created a [StreamHub class](https://github.com/IgniteUI/finjs-web-api/blob/d493f159e0a6f14b5ffea3e893f543f057fdc92a/WebAPI/Models/StreamHub.cs#L9) that inherits the base Hub class, which is responsible for managing connections, groups, and messaging. It's good to keep in mind that the Hub class is stateless and each new invocation of a certain method is in a new instance of this class. It's useless to save state in instance properties, rather we suggest using static properties, in our case we use static key-value pair collection to store data for each connected client. + +Other useful properties of this class are _Clients_, _Context_, and _Groups_. They can help you to manage certain behavior based on the unique _ConnectionID_. Also, this class provides you with the following useful methods: -Other useful properties of this class are *Clients*, *Context*, and *Groups*. They can help you to manage certain behavior based on the unique *ConnectionID*. Also, this class provides you with the following useful methods: - OnConnectedAsync() - Called when a new connection is established with the hub. - OnDisconnectedAsync(Exception) - Called when a connection with the hub is terminated. -They allow us to perform any additional logic when a connection is established or closed. In our application, we've also added *UpdateParameters* method that gets a *Context connection ID* and use it to send back data at a certain interval. As you can see we communicate over a unique *ConnectionID* which prevents a streaming intervention from other Clients. +They allow us to perform any additional logic when a connection is established or closed. In our application, we've also added _UpdateParameters_ method that gets a _Context connection ID_ and use it to send back data at a certain interval. As you can see we communicate over a unique _ConnectionID_ which prevents a streaming intervention from other Clients. ```cs public async void UpdateParameters(int interval, int volume, bool live = false, bool updateAll = true) @@ -202,7 +212,7 @@ The public GitHub repository of the [ASP.NET Core Application could be found her ## Create SignalR Client Library We will create an Angular project in order to consume the SignalR service. -Github repository with the actual application can be found [here](https://github.com/IgniteUI/igniteui-angular-samples/tree/master/projects/app-lob/src/app/grid-finjs-dock-manager). +The [GitHub repository with the actual application](https://github.com/IgniteUI/igniteui-angular-samples/tree/master/projects/app-lob/src/app/grid-finjs-dock-manager) can be found in the igniteui-angular-samples repository. First, start by installing SignalR: @@ -272,6 +282,7 @@ public ngOnInit() { } ... ``` + ### Grid Data Binding As we have seen so far in our client code we set up a listener for `transferdata` event, which receives as an argument the updated data array. To pass the newly received data to our grid we use an observable. To set that, we need to bind the grid's data source to the data observable like so: @@ -292,4 +303,4 @@ Every time when new data is received from the server to the client we call the ` If you don’t want to refresh your application, rather just see when the data is updated, you should consider ASP.NET Core SignalR. I definitely recommend going for streaming content when you think your data is large, or if you want a smooth user experience without blocking the client by showing endless spinners. -Using SignalR Hub communication is easy and intuitive and with the help of Angular Observables, you can create a powerful application that uses data streaming with WebSockets. \ No newline at end of file +Using SignalR Hub communication is easy and intuitive and with the help of Angular Observables, you can create a powerful application that uses data streaming with WebSockets. diff --git a/en/components/general/ignite-ui-licensing.md b/en/components/general/ignite-ui-licensing.md index 0d9b89d327..5e7153492b 100644 --- a/en/components/general/ignite-ui-licensing.md +++ b/en/components/general/ignite-ui-licensing.md @@ -5,7 +5,9 @@ _keywords: npm package license, ignite ui license feed, licensing --- # License FAQ and Installation + ## License Agreements + It is important to know all the [legal terms and conditions](https://www.infragistics.com/legal/license/igultimate-la) regarding the products that you purchase and use. > [!Note] @@ -13,16 +15,17 @@ It is important to know all the [legal terms and conditions](https://www.infragi 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). +For detailed explanation of the Ignite UI license agreement and terms of use, refer to the [Infragistics Ultimate License Agreement](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 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). ## 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. Highly adopted, it 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 a npm package and you can add it as a dependency to your project in a [`few easy steps using the Ignite UI CLI`](./cli/step-by-step-guide-using-cli.md) or [using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md). Choosing this approach will not require configuring npm. By installing this package you will start using the [Ignite UI for Angular Trial version](https://www.infragistics.com/products/ignite-ui-angular) of the product. @@ -32,23 +35,27 @@ Infragistics Ignite UI for Angular is available as a npm package and you can add Infragistics Ignite UI Dock Manager Web Component is available as a separate npm package and by installing it you will start using the [Ignite UI Dock Manager Web Component Trial version](https://www.infragistics.com/products/ignite-ui-angular) of the product. -> More information on how to start using the Ignite UI for Angular npm package can be found in [this topic](getting-started.md#installing-ignite-ui-for-angular). Additional information on Ignite UI Dock Manager Web Component can be found [here](../dock-manager.md). +> More information on how to start using the Ignite UI for Angular npm package can be found in [this topic](getting-started.md#installing-ignite-ui-for-angular). Additional information on Ignite UI Dock Manager Web Component can be found in the [Dock Manager documentation](../dock-manager.md). ### Upgrading packages using our Angular Schematics or Ignite UI CLI + If Ignite UI for Angular has been added to the project using [`ng add`](./getting-started.md) or the project has been created through our [schematics collection](./cli/getting-started-with-angular-schematics.md) or [Ignite UI CLI](./cli/getting-started-with-cli.md), you can use our `upgrade-packages` to automatically upgrade your app to using our licensed packages. You project package dependencies will include either `@igniteui/angular-schematics` or `igniteui-cli`, with both of them supporting the upgrade command. >[!NOTE] > As the process changes the packages, we recommend that you update your project first before switching. This way you will avoid picking up a higher version of Ignite UI Angular and missing on potential update migrations. Follow our [Update Guide](./update-guide.md). Depending on your project setup, either run the following schematic in your project: + ```bash ng g @igniteui/angular-schematics:upgrade-packages ``` + or use `igniteui-cli`: ```bash ig upgrade-packages ``` + The schematic or command will take care of switching the package dependencies of the project and update source references. You'll be asked to login to our npm registry if not already setup. @@ -57,7 +64,7 @@ You'll be asked to login to our npm registry if not already setup. ### How to setup your environment to use the private npm feed (Step by step guide) -#### First you need to setup the private registry and to associate this registry with the Infragistics scope. +#### 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. @@ -67,7 +74,8 @@ This will allow you to seamlessly use a mix of packages from the public npm regi ### 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: + +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/ @@ -81,6 +89,7 @@ You can generate [Access Token](#access-token-usage) through your Infragistics p 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 @@ -91,17 +100,16 @@ You will be asked to provide the username and the password that you use for logg >[!NOTE] > `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"`. - > [!NOTE] > **macOS shell behavior**: If you're using macOS and setting the `:_auth` token manually via `npm config set`, make sure to **wrap the token in double quotes** like this: -> +> > ```bash > npm config set //packages.infragistics.com/npm/js-licensed/:_auth="YOUR_IG_AUTH_TOKEN" > ``` -> +> > This is necessary due to shell parsing differences on macOS that may cause authentication issues if special characters in the token are not properly quoted. This issue doesn't typically occur on Windows. -#### 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: +#### 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-angular @@ -114,7 +122,9 @@ 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. #### Some additional changes might have to be made in your project source + If you are upgrading from trial to licensed package and you are not using the automated CLI migrations: + - Add a **paths** mapping in the project **tsconfig.json**. ```json @@ -153,6 +163,7 @@ If you are upgrading from trial to licensed package and you are not using the au ... }, ``` + - remove the `~` sign from your project `sass` imports for `igniteui-angular/lib` source: ```scss @@ -169,11 +180,11 @@ So, if you've already adopted npm and you have an Ignite UI for Angular license, 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/package-feeds). 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: +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/package-feeds +- Generate a token from https://account.infragistics.com/package-feeds -New Token Generated [!Note] > Each token is with Base64 encoding. -* Add the following into your [.npmrc](https://docs.npmjs.com/configuring-npm/npmrc.html) file +- 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/ @@ -191,6 +202,7 @@ The following information is on how to setup authentication to our private npm r ``` ### Azure Pipelines Configuration + Update the azure-pipelines.yml with the following steps: ```cmd @@ -202,34 +214,36 @@ steps: displayName: 'Npm config auth' ``` -Now we need to add variables for the *npm registry*, *scope* and *token*. There are two ways to do so: +Now we need to add variables for the _npm registry_, _scope_ and _token_. There are two ways to do so: + +#### Define Variable Group from the Library page under Pipelines -#### Define Variable Group from the Library page under Pipelines. [This article](https://docs.microsoft.com/en-us/azure/devops/pipelines/library/variable-groups?view=azure-devops&tabs=yaml) explains how to use a variable group to store values that you want to control and make available across multiple pipelines. -Set npm Registry and token variables - #### Define the variables in the Pipeline Settings UI and reference them in your YAML file. +#### Define the variables in the Pipeline Settings UI and reference them in your YAML file In the most common case, you [set the variables and use them](https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline) within the YAML file. -Set npm Registry and token variables -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 @@ -240,8 +254,8 @@ before_install: 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) +- 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 @@ -252,4 +266,4 @@ Add the following scripts before the `npm i(ci)` step to your [CI workflow confi - 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. +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. diff --git a/en/components/general/localization.md b/en/components/general/localization.md index 50077268d0..ac880944d5 100644 --- a/en/components/general/localization.md +++ b/en/components/general/localization.md @@ -12,10 +12,10 @@ With only a few lines of code, users can easily change the localization strings ## Angular Localization Example - @@ -96,6 +96,7 @@ export class AppComponent implements OnInit { >Note: Feel free to contribute to the [`igniteui-angular-i18n`](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) package with more languages! ### Utilize own localized resources + `changei18n` function expects an `IResourceStrings` object. If the language you want to use is not available in the `igniteui-angular-i18n` package, or simply want to change a particular string, you can pass a custom object containing your string resources for the language and components you need. This will change the global i18n for the igniteui-angular components. ```typescript @@ -168,25 +169,25 @@ this.grid.resourceStrings = newGridRes; ### Available resource strings -* [IgxResourceStringsBG](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/BG/resources.ts) -* [IgxResourceStringsCS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/CS/resources.ts) -* [IgxResourceStringsDA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DA/resources.ts) -* [IgxResourceStringsDE](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DE/resources.ts) -* [IgxResourceStringsES](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ES/resources.ts) -* [IgxResourceStringsFR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/FR/resources.ts) -* [IgxResourceStringsHU](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/HU/resources.ts) -* [IgxResourceStringsIT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/IT/resources.ts) -* [IgxResourceStringsJA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/JA/resources.ts) -* [IgxResourceStringsKO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/KO/resources.ts) -* [IgxResourceStringsNB](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NB/resources.ts) -* [IgxResourceStringsNL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NL/resources.ts) -* [IgxResourceStringsPL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PL/resources.ts) -* [IgxResourceStringsPT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PT/resources.ts) -* [IgxResourceStringsRO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/RO/resources.ts) -* [IgxResourceStringsSV](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/SV/resources.ts) -* [IgxResourceStringsTR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/TR/resources.ts) -* [IgxResourceStringsZHHANS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/resources.ts) -* [IgxResourceStringsZHHANT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/resources.ts) +- [IgxResourceStringsBG](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/BG/resources.ts) +- [IgxResourceStringsCS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/CS/resources.ts) +- [IgxResourceStringsDA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DA/resources.ts) +- [IgxResourceStringsDE](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DE/resources.ts) +- [IgxResourceStringsES](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ES/resources.ts) +- [IgxResourceStringsFR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/FR/resources.ts) +- [IgxResourceStringsHU](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/HU/resources.ts) +- [IgxResourceStringsIT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/IT/resources.ts) +- [IgxResourceStringsJA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/JA/resources.ts) +- [IgxResourceStringsKO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/KO/resources.ts) +- [IgxResourceStringsNB](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NB/resources.ts) +- [IgxResourceStringsNL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NL/resources.ts) +- [IgxResourceStringsPL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PL/resources.ts) +- [IgxResourceStringsPT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PT/resources.ts) +- [IgxResourceStringsRO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/RO/resources.ts) +- [IgxResourceStringsSV](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/SV/resources.ts) +- [IgxResourceStringsTR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/TR/resources.ts) +- [IgxResourceStringsZHHANS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/resources.ts) +- [IgxResourceStringsZHHANT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/resources.ts) ## Additional Resources @@ -194,6 +195,6 @@ this.grid.resourceStrings = newGridRes; Our community is active and always welcoming to new ideas. -* [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) -* [Ignite UI for Angular **ResourceStrings**](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) +- [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) +- [Ignite UI for Angular **ResourceStrings**](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) diff --git a/en/components/general/ssr-rendering.md b/en/components/general/ssr-rendering.md index 0868ec03a4..79aeb96849 100644 --- a/en/components/general/ssr-rendering.md +++ b/en/components/general/ssr-rendering.md @@ -6,32 +6,33 @@ _keywords: Ignite UI for Angular, Angular SSR, Server-side rendering # Server-side Rendering with Angular SSR -This topic aims at describing what Server-side Rendering is and how to configure it within Ignite UI for Angular application. +This topic aims at describing what Server-side Rendering is and how to configure it within Ignite UI for Angular application. ## Angular Server-side rendering All Angular applications run in the client's browser and often this may result in a negative performance hit on the [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) i.e. when a browser first renders the largest content of a page. This is when [Angular SSR](https://angular.dev/guide/ssr) comes in handy, you can generate the full HTML for a page on the server. It renders a client-side page to HTML on the server that is later bootstrapped on the client. Okay, but how it works? -> [LCP](https://web.dev/articles/lcp) measures when the largest content of a page is visible to the user, as for [FCP](https://web.dev/first-contentful-paint) metric, it measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. See [Lighthouse performance scoring](https://web.dev/performance-scoring) for more information. - +> [LCP](https://web.dev/articles/lcp) measures when the largest content of a page is visible to the user, as for [FCP](https://web.dev/first-contentful-paint) metric, it measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. See [Lighthouse performance scoring](https://web.dev/performance-scoring) for more information. ## How it works? -With Angular SSR, you will serve a static version of your apps' landing page, while at the same time the full Angular application loads in the background. The landing page will be pure HTML and will be displayed even if the JavaScript is disabled. More about Server Rendering you can find [here](https://developers.google.com/web/updates/2019/02/rendering-on-the-web). +With Angular SSR, you will serve a static version of your apps' landing page, while at the same time the full Angular application loads in the background. The landing page will be pure HTML and will be displayed even if the JavaScript is disabled. More about Server Rendering you can find in the [Rendering on the Web guide](https://developers.google.com/web/updates/2019/02/rendering-on-the-web). ## Usage Server-side rendering is one of the many techniques part of [Rendering on Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) guidelines, that can: -- Ease web crawlers to index your website higher in searches - will improve your Search Engine Optimization (SEO). + +- Ease web crawlers to index your website higher in searches - will improve your Search Engine Optimization (SEO). - Show the first page quickly - slow initial page load is disengaging for the users (if it takes more than 3 seconds to load). -- Improve your app performance - it will have a positive impact on both [First Contentful Paint](https://web.dev/first-contentful-paint) and [Largest Contentful Paint](https://web.dev/articles/lcp). +- Improve your app performance - it will have a positive impact on both [First Contentful Paint](https://web.dev/first-contentful-paint) and [Largest Contentful Paint](https://web.dev/articles/lcp). > It gives you full control over SEO and social-media previews, and it improves the overall perceived performance of your application by allowing users to see an initial painted view. ## Add SSR to existing Ignite UI application -### Step 1 - Add @angular/ssr +### Step 1 - Add @angular/ssr + By using Angular CLI schematic we can run the following command: ``` @@ -41,13 +42,14 @@ ng add @angular/ssr This schematic will perform several changes to your app client and server configurations, as well as add extra files to the project structure. ### Step 2 - Start your Angular SSR app + Run the following command: ``` ng serve ``` -## Build a new application from scratch +## Build a new application from scratch 1. Use `ng new` or the [Ignite UI CLI](./cli/getting-started-with-cli.md) `ig new` command. Alternatively, use `ng new --ssr` to create a new Angular SSR project directly, skipping step 3. 2. Execute `ng add igniteui-angular` which installs the library's npm packages to your workspace and configures the project in the current working directory to use that library. @@ -67,8 +69,8 @@ ng serve
-* [Angular SSR guide](https://angular.dev/guide/ssr) -* [Server-side rendering terminology](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) -* [Getting started with Ignite UI for Angular](getting-started.md) -* [Ignite UI CLI Guide](cli/step-by-step-guide-using-cli.md) -* [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md) \ No newline at end of file +- [Angular SSR guide](https://angular.dev/guide/ssr) +- [Server-side rendering terminology](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) +- [Getting started with Ignite UI for Angular](getting-started.md) +- [Ignite UI CLI Guide](cli/step-by-step-guide-using-cli.md) +- [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md) diff --git a/en/components/general/update-guide.md b/en/components/general/update-guide.md index 6411e49216..900c492514 100644 --- a/en/components/general/update-guide.md +++ b/en/components/general/update-guide.md @@ -4,6 +4,8 @@ _description: Check out this article on updating how to update to a newer versio _keywords: ignite ui for angular, update, npm package, material components --- + + # Update Guide In the Ignite UI for Angular [versioning](https://github.com/IgniteUI/igniteui-angular/wiki/Ignite-UI-for-Angular-versioning) the first number always matches the major version of Angular the code supports and the second is dedicated for major version releases. Breaking changes may be introduced between major releases. @@ -12,6 +14,7 @@ A comprehensive list of changes for each release of **Ignite UI for Angular** ca The Ignite UI for Angular package also supports automatic version migration through `ng update` schematics. Those will attempt to migrate all possible breaking changes (renamed selectors, classes and @Input/Output properties), however there might be still changes that cannot be migrated. Those are usually related to typescript application logic and will be described [additionally below](#additional-manual-changes). First run the [**`ng update`**](https://angular.io/cli/update) command which will analyze your application and available updates for its packages. + ```cmd ng update ``` @@ -27,16 +30,22 @@ To update the **Ignite UI for Angular** free package run the following command: ```cmd ng update igniteui-angular ``` + When you update `@infragistics/igniteui-angular` or `igniteui-angular` - it's recommended to update `@angular/core`, `@angular/cli` and `igniteui-cli` packages to their matching versions. To update the **Ignite UI CLI** package run the following command: + ```cmd ng update igniteui-cli ``` + To update the **Angular Core** package run the following command: + ```cmd ng update @angular/core ``` + To update the **Angular CLI** package use the following command: + ```cmd ng update @angular/cli ``` @@ -54,12 +63,17 @@ For example: if you are updating from version 6.2.4 to 7.1.0 you'd start from th ## From 17.2.x to 18.0.x ### Breaking changes -- In version 18.0.x the depracated `displayDensity` property is removed in favor of the custom CSS property `--ig-size`. For further reference please see the update guide [from 16.0.x to 16.1.x](#from-160x-to-161x). + +- In version 18.0.x the deprecated `displayDensity` property is removed in favor of the custom CSS property `--ig-size`. For further reference please see the update guide [from 16.0.x to 16.1.x](#from-160x-to-161x). ### General + - `IgxPivotGrid` + ### Breaking changes + - The property `showPivotConfigurationUI` of pivot grid is changed and extended to `pivotUI`. + ```html // version 17.2.x @@ -69,19 +83,22 @@ For example: if you are updating from version 6.2.4 to 7.1.0 you'd start from th ``` + ## From 17.0.x to 17.1.x ### General + - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` - - **Breaking Changes** - - `rowAdd` and `rowDelete` events now emit event argument of type `IRowDataCancelableEventArgs` instead of `IGridEditEventArgs`. The two interfaces are still compatible, however redundant for these events properties `cellID`, `newValue`, `oldValue`, `isAddRow` are deprecated in `IRowDataCancelableEventArgs` and will be removed in a future version. Switching to the correct new interfaces should reveal any deprecated use that can be safely removed. - - **Deprecations** - - `rowID` property has been deprecated in the following interfaces: `IGridEditDoneEventArgs`, `IPathSegment`, `IRowToggleEventArgs`, `IPinRowEventArgs`, `IgxAddRowParent` and will be removed in a future version. Use `rowKey` instead. - - `primaryKey` property has been deprecated in the following interfaces: `IRowDataEventArgs`, `IGridEditDoneEventArgs`. Use `rowKey` instead. - - `data` property has been deprecated in the following interfaces: `IRowDataEventArgs`. Use `rowData` instead. + - **Breaking Changes** + - `rowAdd` and `rowDelete` events now emit event argument of type `IRowDataCancelableEventArgs` instead of `IGridEditEventArgs`. The two interfaces are still compatible, however redundant for these events properties `cellID`, `newValue`, `oldValue`, `isAddRow` are deprecated in `IRowDataCancelableEventArgs` and will be removed in a future version. Switching to the correct new interfaces should reveal any deprecated use that can be safely removed. + - **Deprecations** + - `rowID` property has been deprecated in the following interfaces: `IGridEditDoneEventArgs`, `IPathSegment`, `IRowToggleEventArgs`, `IPinRowEventArgs`, `IgxAddRowParent` and will be removed in a future version. Use `rowKey` instead. + - `primaryKey` property has been deprecated in the following interfaces: `IRowDataEventArgs`, `IGridEditDoneEventArgs`. Use `rowKey` instead. + - `data` property has been deprecated in the following interfaces: `IRowDataEventArgs`. Use `rowData` instead. ### Breaking changes -- In version 17.1.x the `icon` type of the `igxButton` directive has been changed to the `igxIconButton` directive of type `flat`. Automatic migrations are available and will be applied on `ng update`. However, some of the `igxButton` input properties that could previously be used with the `icon` type buttons, cannot be applied to the newly created `igxIconButton`. If you have used the `igxButtonColor` or the `igxButtonBackground` properties with a button of type `icon`, you should update it as follows: + +- In version 17.1.x the `icon` type of the `igxButton` directive has been changed to the `igxIconButton` directive of type `flat`. Automatic migrations are available and will be applied on `ng update`. However, some of the `igxButton` input properties that could previously be used with the `icon` type buttons, cannot be applied to the newly created `igxIconButton`. If you have used the `igxButtonColor` or the `igxButtonBackground` properties with a button of type `icon`, you should update it as follows: ```html // version 17.0.x @@ -107,16 +124,19 @@ import { IgxIconButtonDirective } from 'igniteui-angular'; ``` ## From 16.1.x to 17.0.x + ### General -- In 17.0 Angular have removed the `@nguniversal/*` packages. If the project uses these packages a standard `ng update` call will cause an error in the `igniteui-angular` migrations due to improperly modified `package-lock.json` - more details can be found [here](https://github.com/IgniteUI/igniteui-angular/issues/13668). To update to `17.0.x` one of the following additional steps needs to be taken: - - Delete the `package-lock.json` file before running `ng update` - - Run `npm dedupe --legacy-peer-deps` before running `ng update igniteui-angular` + +- In 17.0 Angular have removed the `@nguniversal/*` packages. If the project uses these packages a standard `ng update` call will cause an error in the `igniteui-angular` migrations due to improperly modified `package-lock.json` - more details can be found in [issue #13668](https://github.com/IgniteUI/igniteui-angular/issues/13668). To update to `17.0.x` one of the following additional steps needs to be taken: + - Delete the `package-lock.json` file before running `ng update` + - Run `npm dedupe --legacy-peer-deps` before running `ng update igniteui-angular` **Breaking change** + - In `IgxCombo`'s `selectionChanging` event arguments type `IComboSelectionChangingEventArgs` has these changes: - - properties `newSelection` and `oldSelection` have been renamed to `newValue` and `oldValue` respectively to better reflect their function. Just like Combo's `value`, those will emit either the specified property values or full data items depending on whether `valueKey` is set or not. Automatic migrations are available and will be applied on `ng update`. - - two new properties `newSelection` and `oldSelection` are exposed in place of the old ones that are no longer affected by `valueKey` and consistently emit items from Combo's `data`. - - properties `added` and `removed` now always contain data items, regardless of `valueKey` being set. This aligns them with the updated `newSelection` and `oldSelection` properties. + - properties `newSelection` and `oldSelection` have been renamed to `newValue` and `oldValue` respectively to better reflect their function. Just like Combo's `value`, those will emit either the specified property values or full data items depending on whether `valueKey` is set or not. Automatic migrations are available and will be applied on `ng update`. + - two new properties `newSelection` and `oldSelection` are exposed in place of the old ones that are no longer affected by `valueKey` and consistently emit items from Combo's `data`. + - properties `added` and `removed` now always contain data items, regardless of `valueKey` being set. This aligns them with the updated `newSelection` and `oldSelection` properties. If your code in `selectionChanging` event handler was depending on reading `valueKeys` from the event argument, update it as follows: @@ -137,9 +157,10 @@ If your code in `selectionChanging` event handler was depending on reading `valu }); } ``` -- `getCurrentResourceStrings` has been removed. Use the specific component string imports instead. - - E.g. EN strings come from `igniteui-angular`: `import { GridResourceStringsEN } from 'igniteui-angular';` - - E.g. DE or other language strings come from `igniteui-angular-i18n`: `import { GridResourceStringsDE } from 'igniteui-angular-i18n';` + +- `getCurrentResourceStrings` has been removed. Use the specific component string imports instead. + - E.g. EN strings come from `igniteui-angular`: `import { GridResourceStringsEN } from 'igniteui-angular';` + - E.g. DE or other language strings come from `igniteui-angular-i18n`: `import { GridResourceStringsDE } from 'igniteui-angular-i18n';` Usage examples can be found in the updated [Localization (i18n)](localization.md) doc. @@ -148,6 +169,7 @@ If your code in `selectionChanging` event handler was depending on reading `valu ### General #### **Non-breaking changes** + - We are moving away from the `DisplayDensityToken` injection token as a way to set the size of the components in favor of a simpler, more robust way - using CSS custom properties. For that reason the `DisplayDensityToken` injection token is now deprecated. This ripples across all components that expose the `displayDensity` input property. The token and input properties will be removed in 17.0.0. We urge you to do the following: Remove all declarations where the `DisplayDensityToken` is provided: @@ -229,6 +251,7 @@ public onButtonClick(event) { ## From 15.0.x to 15.1.x + - **Breaking change** - `rowSelectionChanging` arguments type is changed. Now the `oldSelection`, `newSelection`, `added` and `removed` collections, part of the `IRowSelectionEventArgs` interface, no longer consist of the row keys of the selected elements (when the grid has set a primaryKey), but now in any case the row data is emitted. When the grid is working with remote data and a `primaryKey` is set - for the selected rows that are not currently part of the grid view, a partial row data object will be emitted. @@ -251,10 +274,11 @@ If your code in `rowSelectionChanging` event handler was depending on reading pr - **Behavioral Change** When selected row is deleted from the grid component, `rowSelectionChanging` event is not emitted. -- **Visual Change** +- **Visual Change** - In 15.1 the sizes of the input components have increased. This is more noticeable when using the Material theme. We do this to match Material spec. If your application is negatively affected by the change, you can use the displayDensity input and set it to a more dense setting, e.g. from comfortable to cozy or from cozy to compact. **Example** + ```html ... @@ -276,7 +300,8 @@ When selected row is deleted from the grid component, `rowSelectionChanging` eve - In 15.1 select and combo component now have background around the toggle icon. You can change the background and the icon color using scss or css. **Example** -```scss + + ```scss $my-select: select-theme( $toggle-button-background: red, $toggle-button-foreground: #fff, @@ -289,10 +314,11 @@ When selected row is deleted from the grid component, `rowSelectionChanging` eve @include css-vars($my-select); @include css-vars($my-combo); -``` + ``` **Example** -```css + + ```css .igx-select { --igx-select-toggle-button-background: red; --igx-select-toggle-button-foreground: #fff; @@ -302,28 +328,31 @@ When selected row is deleted from the grid component, `rowSelectionChanging` eve --igx-combo-toggle-button-background: red; --igx-combo-toggle-button-foreground: #fff; } -``` + ``` ## From 14.2.x to 15.0.x + ### General + - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` - - Parameters in grid templates now have types for their context. This can also cause issues if the app is in strict template mode and uses the wrong type. References to the template that may require conversion: - - `IgxColumnComponent` - [`ColumnType`]({environment:angularApiUrl}/interfaces/columntype.html) (for example the column parameter in `igxFilterCellTemplate`) - - `IgxGridCell` - [`CellType`]({environment:angularApiUrl}/interfaces/celltype.html) (for example the cell parameter in `igxCell` template) + - Parameters in grid templates now have types for their context. This can also cause issues if the app is in strict template mode and uses the wrong type. References to the template that may require conversion: + - `IgxColumnComponent` - [`ColumnType`]({environment:angularApiUrl}/interfaces/columntype.html) (for example the column parameter in `igxFilterCellTemplate`) + - `IgxGridCell` - [`CellType`]({environment:angularApiUrl}/interfaces/celltype.html) (for example the cell parameter in `igxCell` template) - Ignite UI for Angular has a dependency on [igniteui-theming](https://github.com/IgniteUI/igniteui-theming). Add the following preprocessor configuration in your `angular.json` file. ```json - "build": { - "options": { - "stylePreprocessorOptions": { - "includePaths": ["node_modules"] - } - } - } + + "build": { + "options": { + "stylePreprocessorOptions": { + "includePaths": ["node_modules"] + } + } + } ``` - **Breaking Change** - All global CSS variables for theme configuration, colors, elevations, and typography have changed the prefix from `--igx` to `--ig`. This change doesn't affect global component variables; - + **Example**: In 14.2.x: @@ -343,6 +372,7 @@ When selected row is deleted from the grid component, `rowSelectionChanging` eve ``` ### Themes + - **Breaking Change** - The `grays` input argument has been renamed to `gray`.
Here's how that will affect existing code: @@ -382,8 +412,9 @@ Here's how that will affect existing code: - **Breaking Change** - **Generating CSS variables** for a palette is now done by the **palette mixin**, instead of the **palette-vars mixin**. - **Breaking Change** - The **palette function** now **requires a surface color to be passed**, while passing a value for the `gray` color is optional. If a value for the gray base color is not provided, it will be generated automatically based on the lightness of the surface color - light surface color results in a black(#000) gray base color, whereas a dark surface color generates a white(#fff) base gray color. When you're generating a palette, you have to keep in mind that there are no longer default values for **info, success, error and warn** colors. You have to set them explicitly if you want to use them. You can also grab those colors from an existing palette if you don't want to come up with the values yourself. - - #### Example: + + #### Example + ```scss $my-palette: palette( $primary: #09f, @@ -428,6 +459,7 @@ Here's how that will affect existing code: ``` ### Typography + - **Breaking Change** - The **type-style** mixin now doesn't accept type-scale as a parameter, only the category name. In 14.2.x and prior: @@ -447,11 +479,12 @@ Here's how that will affect existing code: ``` ### Elevations + - **Breaking Change** - The **elevation function** now has only one named argument - **$name (the elevation name)**. - **Breaking Change** - The **elevations function** has been removed, you can now configure the elevation colors, using the `configure-elevations` mixin. In 14.2.x and prior: - + ```scss .my-class { box-shadow: elevation($elevations, $elevation: 8); @@ -459,7 +492,7 @@ Here's how that will affect existing code: ``` In 15.0.x and forward: - + ```scss .my-class { box-shadow: elevation(8); @@ -467,9 +500,11 @@ Here's how that will affect existing code: ``` ### Grid Toolbar + - **Breaking Change** - The `IgxGridToolbarTitleDirective` and `IgxGridToolbarActionsDirective` have been converted to components, keeping only the element selector. For apps using the preferred element markup of `` and `` there should be no functional change. Apps using the `igxGridToolbarTitle` and `igxGridToolbarActions` directives on other elements will need to convert those to the mentioned elements instead: _From:_ + ```html Title @@ -480,6 +515,7 @@ Here's how that will affect existing code: ``` _To:_ + ```html Title @@ -492,21 +528,26 @@ Here's how that will affect existing code: ## From 13.1.x to 13.2.x ### Themes -- **Breaking Change** - All RTL specific stylesheets have been removed. Ignite UI themes now support RTL directon by default. Users who have previously used `*-rtl.css` specific themes must switch to the regular theme files. + +- **Breaking Change** - All RTL specific stylesheets have been removed. Ignite UI themes now support RTL direction by default. Users who have previously used `*-rtl.css` specific themes must switch to the regular theme files. ## From 13.0.x to 13.1.x ### General + - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` - - **Breaking Change** - The columns' `movable` property has been deprecated. Use the exposed grid `moving` property instead: + - **Breaking Change** - The columns' `movable` property has been deprecated. Use the exposed grid `moving` property instead: + ```html ``` + - `IgxHierarchicalGrid` - - **Breaking Change** - The public API service for igxHierarchicalGrid and igxRowIsland components `hgridAPI` is renamed to `gridAPI`. + - **Breaking Change** - The public API service for igxHierarchicalGrid and igxRowIsland components `hgridAPI` is renamed to `gridAPI`. - `IgxToast` - - **Breaking Change** - The `igx-toast` deprecated `position` property has been removed. We suggest using `positionSettings` property as follows: + - **Breaking Change** - The `igx-toast` deprecated `position` property has been removed. We suggest using `positionSettings` property as follows: + ```typescript @ViewChild('toast', { static: true }) public toast: IgxToastComponent; @@ -518,62 +559,71 @@ Here's how that will affect existing code: ## From 12.2.x to 13.0.x ### General + - `IE discontinued support` - `IgxDialog` - - **Breaking Change** - The default positionSettings open/close animation has been changed to `fadeIn`/`fadeOut`. + - **Breaking Change** - The default positionSettings open/close animation has been changed to `fadeIn`/`fadeOut`. - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` - - **Breaking Change** - The following deprecated inputs have been removed - `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`, `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`. Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead. - - **Breaking Change** - Upon adding of `igx-toolbar` component, now you should manually specify which features you want to enable - Column Hiding, Pinning, Excel Exporting. Advanced Filtering may be enabled through the `allowAdvancedFiltering` input property on the grid, but it is recommended to enable it declaratively with markup, as with the other features. - - **Breaking Change** - The `rowSelected` event is renamed to `rowSelectionChanging` to better reflect its function. - - **Breaking Change** - The `columnSelected` event is renamed to `columnSelectionChanging` to better reflect its function. - - **Breaking Change** - `columnsCollection` is removed. Use `columns` instead. If at certain ocasions `columns` return empty array, query the columns using `ViewChildren` and access those in `ngAfterViewInit`: - ```typescript - @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent }) - public columns: QueryList; - ``` - - **Breaking change** - when applying a custom directive on the grid, inject the `IGX_GRID_BASE` token in the constructor in order to get reference to the hosting grid: - ```html - - ``` - - ```typescript - @Directive({ - selector: '[customDirective]' - }) - export class customDirective { - - constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { } - ``` + - **Breaking Change** - The following deprecated inputs have been removed - `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`, `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`. Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead. + - **Breaking Change** - Upon adding of `igx-toolbar` component, now you should manually specify which features you want to enable - Column Hiding, Pinning, Excel Exporting. Advanced Filtering may be enabled through the `allowAdvancedFiltering` input property on the grid, but it is recommended to enable it declaratively with markup, as with the other features. + - **Breaking Change** - The `rowSelected` event is renamed to `rowSelectionChanging` to better reflect its function. + - **Breaking Change** - The `columnSelected` event is renamed to `columnSelectionChanging` to better reflect its function. + - **Breaking Change** - `columnsCollection` is removed. Use `columns` instead. If at certain occasions `columns` return empty array, query the columns using `ViewChildren` and access those in `ngAfterViewInit`: + + ```typescript + @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent }) + public columns: QueryList; + ``` + + - **Breaking change** - when applying a custom directive on the grid, inject the `IGX_GRID_BASE` token in the constructor in order to get reference to the hosting grid: + + ```html + + ``` + + ```typescript + @Directive({ + selector: '[customDirective]' + }) + export class customDirective { + + constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { } + ``` + - `RowDirective`, `RowType` - - **Breaking Change** - `rowData` and `rowID` properties are removed from `RowDirective` and from classes implementing the `RowType` interface. Use `data` and `key` instead. Use `ng update` for automatic migration. Automatic migration will not be able to pick up some examples from templates, where the template context object is not typed: - ```html - - {{ cell.rowID }} - {{ cell.row.rowData.ProductID }} - - ``` - Update such templates manually to - ```html - {{ cell.key }} - {{ cell.row.data.ProductID }} - ``` + - **Breaking Change** - `rowData` and `rowID` properties are removed from `RowDirective` and from classes implementing the `RowType` interface. Use `data` and `key` instead. Use `ng update` for automatic migration. Automatic migration will not be able to pick up some examples from templates, where the template context object is not typed: + + ```html + + {{ cell.rowID }} + {{ cell.row.rowData.ProductID }} + + ``` + + Update such templates manually to + + ```html + {{ cell.key }} + {{ cell.row.data.ProductID }} + ``` + - `igxGrid` - - Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. + - Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. - `IgxCsvExporterService`, `IgxExcelExporterService` - - Exporter services are no longer required to be provided in the application since they are now injected on a root level. + - Exporter services are no longer required to be provided in the application since they are now injected on a root level. - `IgxGridToolbarPinningComponent`, `IgxGridToolbarHidingComponent` - - Exposed new input `buttonText` which sets the text that is displayed inside the dropdown button in the toolbar. + - Exposed new input `buttonText` which sets the text that is displayed inside the dropdown button in the toolbar. - `IgxCombo` - - Added `groupSortingDirection` input, which allows you to set groups sorting order. + - Added `groupSortingDirection` input, which allows you to set groups sorting order. - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` - - Added new directives for re-templating header sorting indicators - `IgxSortHeaderIconDirective`, `IgxSortAscendingHeaderIconDirective` and `IgxSortDescendingHeaderIconDirective`. + - Added new directives for re-templating header sorting indicators - `IgxSortHeaderIconDirective`, `IgxSortAscendingHeaderIconDirective` and `IgxSortDescendingHeaderIconDirective`. - `IgxDialog` - - Added `focusTrap` input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to `true`. + - Added `focusTrap` input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to `true`. - `IgxColumnActionsComponent` - - **Breaking Change** - The following input has been removed - - Input `columns`. Use `igxGrid` `columns` input instead. + - **Breaking Change** - The following input has been removed + - Input `columns`. Use `igxGrid` `columns` input instead. - `IgxCarousel` - - **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`. + - **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`. - `IgxGridStateDirective` - now supports `disableHiding` column prop and column groups ### Theming @@ -588,8 +638,8 @@ Here's how that will affect existing code: functions ``` -* Sass Modules: -The theming engine has switched to [Sass modules](https://sass-lang.com/documentation/at-rules/use). This change means all theming library functions(comopnent themes, etc.), mixins(component mixins, etc.), and variables are now being `forwarded` from a single file. To correctly use the Sass theming library, your project should utilize Dart Sass version 1.33.0 or later and change all imports of the theming library from: +- Sass Modules: +The theming engine has switched to [Sass modules](https://sass-lang.com/documentation/at-rules/use). This change means all theming library functions (component themes, etc.), mixins (component mixins, etc.), and variables are now being `forwarded` from a single file. To correctly use the Sass theming library, your project should utilize Dart Sass version 1.33.0 or later and change all imports of the theming library from: ```scss // free version @@ -642,7 +692,8 @@ After: @use 'variables' as *; ``` -* Palettes and Schemas: +- Palettes and Schemas: + - CSS palette variables do not refer to HEX values anymore, instead they represent a list of 3 values H, S, and L, which means they should be passed to either the `hsl` or `hsla` CSS functions. Before: @@ -677,7 +728,7 @@ $my-dark-palette: palette( Likewise, light themes require a darker shade of gray and a light color schema. -If you've not excluded any component themes from the global theme but you still want to create your own custom replacement themes using the `css-vars` mixin, make sure the theme is passed the correct palette and correspoding schema: +If you've not excluded any component themes from the global theme but you still want to create your own custom replacement themes using the `css-vars` mixin, make sure the theme is passed the correct palette and corresponding schema: ```scss $my-custom-grid: grid-theme( @@ -688,7 +739,7 @@ $my-custom-grid: grid-theme( @include css-vars($my-custom-grid); ``` -* Excluded Component Themes: +- Excluded Component Themes: In case you've excluded some component themes from the global theme and you've created custom replacement themes, you should ensure that the component mixin is included and is passed the correct component theme: @@ -729,13 +780,15 @@ $my-custom-grid: grid-theme( @include grid($my-custom-grid); ``` -To get a better grasp on the Sass Moule System, you can read [this great article](https://css-tricks.com/introducing-sass-modules/) by [Miriam Suzanne](https://css-tricks.com/author/miriam/); +To get a better grasp on the Sass Module System, you can read [this great article](https://css-tricks.com/introducing-sass-modules/) by [Miriam Suzanne](https://css-tricks.com/author/miriam/); ## From 12.0.x to 12.1.x + ### Grids -* Breaking Changes: - * [`IgxPaginatorComponent`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html) - The way the Paginator is instantiated in the grid has changed. It is now a separate component projected in the grid tree. Thus the `[paging]="true"` property is removed from all grids and all other properties related to the paginator in the grid are deprecated. It is recommended to follow the guidance for enabling `Grid Paging` features as described in the [Paging topic](../grid/paging.md). - * [`IgxPageSizeSelectorComponent`]({environment:angularApiUrl}/classes/IgxPageSizeSelectorComponent.html) and [`IgxPageNavigationComponent`]({environment:angularApiUrl}/classes/IgxPageNavigationComponent.html) are introduced to ease the implementation of any custom content: + +- Breaking Changes: + - [`IgxPaginatorComponent`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html) - The way the Paginator is instantiated in the grid has changed. It is now a separate component projected in the grid tree. Thus the `[paging]="true"` property is removed from all grids and all other properties related to the paginator in the grid are deprecated. It is recommended to follow the guidance for enabling `Grid Paging` features as described in the [Paging topic](../grid/paging.md). + - [`IgxPageSizeSelectorComponent`]({environment:angularApiUrl}/classes/IgxPageSizeSelectorComponent.html) and [`IgxPageNavigationComponent`]({environment:angularApiUrl}/classes/IgxPageNavigationComponent.html) are introduced to ease the implementation of any custom content: ```html @@ -747,16 +800,16 @@ To get a better grasp on the Sass Moule System, you can read [this great article ``` - * The API for the paging component was changed during the refactor and many of the old properties are now deprecated. Unfortunately, having + - The API for the paging component was changed during the refactor and many of the old properties are now deprecated. Unfortunately, having an adequate migration for some of these changes is complicated to say the least, so any errors should be handled at application level. - * The following properties are deprecated from the Grid: - - paging, perPage page, totalPages, isFirstPage, isLastPage, pageChange, perPageChange, pagingDone - * The following methods, also are deprecated: - - nextPage() - - previousPage() - * The following property has been removed: - - paginationTemplate - in order to define a custom template, use the `igx-paginator-content` - * HierarchicalGrid specifics - The following usage of `*igxPaginator` Directive is necessary when it comes to enabling paging on RowIslands: + - The following properties are deprecated from the Grid: + - paging, perPage page, totalPages, isFirstPage, isLastPage, pageChange, perPageChange, pagingDone + - The following methods, also are deprecated: + - nextPage() + - previousPage() + - The following property has been removed: + - paginationTemplate - in order to define a custom template, use the `igx-paginator-content` + - HierarchicalGrid specifics - The following usage of `*igxPaginator` Directive is necessary when it comes to enabling paging on RowIslands: ```html @@ -776,9 +829,10 @@ To get a better grasp on the Sass Moule System, you can read [this great article ``` - * While the migration will move your template content inside the `igx-paginator-content` content, it might not resolve all template bindings. Make sure to check your template files after the migration. The following bindings should be changed manually as these properties have been removed (`pagerEnabled`, `pagerHidden`, `dropdownEnabled`, `dropdownHidden`): + - While the migration will move your template content inside the `igx-paginator-content` content, it might not resolve all template bindings. Make sure to check your template files after the migration. The following bindings should be changed manually as these properties have been removed (`pagerEnabled`, `pagerHidden`, `dropdownEnabled`, `dropdownHidden`): _From:_ + ```html @@ -796,12 +851,11 @@ To get a better grasp on the Sass Moule System, you can read [this great article ``` - * IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent are no longer exposed in the public API. See sections below for detail guide on upgrading to the new `IgxGridCell`. - + - IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent are no longer exposed in the public API. See sections below for detail guide on upgrading to the new `IgxGridCell`. -* Grid Deprecation: - * The DI pattern for providing `IgxGridTransaction` is deprecated. The following will still work, but you are advised to refactor it, as it **will likely be removed** in a future version: +- Grid Deprecation: + - The DI pattern for providing `IgxGridTransaction` is deprecated. The following will still work, but you are advised to refactor it, as it **will likely be removed** in a future version: ```typescript @Component({ @@ -817,6 +871,7 @@ To get a better grasp on the Sass Moule System, you can read [this great article ``` In order to achieve the above behavior, you should use the the newly added [`batchEditing`](../grid/batch-editing.md) input: + ```typescript @Component({ template: ` @@ -828,14 +883,15 @@ To get a better grasp on the Sass Moule System, you can read [this great article ... } ``` - * `getCellByColumnVisibleIndex` is now deprecated and will be removed in next major version. Use `getCellByKey`, `getCellByColumn` instead. + + - `getCellByColumnVisibleIndex` is now deprecated and will be removed in next major version. Use `getCellByKey`, `getCellByColumn` instead. ### IgxGridCell migration -* *IgxGridCellComponent*, *IgxTreeGridCellComponent*, *IgxHierarchicalGridCellComponent*, *IgxGridExpandableCellComponent* are no longer exposed in the public API. +- _IgxGridCellComponent_, _IgxTreeGridCellComponent_, _IgxHierarchicalGridCellComponent_, _IgxGridExpandableCellComponent_ are no longer exposed in the public API. -* Public APIs, which used to return an instance of one of the above, now return an instance of [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html): +- Public APIs, which used to return an instance of one of the above, now return an instance of [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html): ```ts const cell = grid.getCellByColumn(0, 'ProductID'); // returns IgxGridCell @@ -846,131 +902,139 @@ const selectedCells = grid.selectedCells; // returns IgxGridCell[] const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[] ``` -- `cell` property in the `IGridCellEventArgs` event arguments emitted by *cellClick*, *selected*, *contextMenu* and *doubleClick* events is now an instance of [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) +- `cell` property in the `IGridCellEventArgs` event arguments emitted by _cellClick_, _selected_, _contextMenu_ and _doubleClick_ events is now an instance of [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) - `let-cell` property in cell template is now `IgxGridCell`. - `getCellByColumnVisibleIndex` is now deprecated and will be removed in next major version. Use `getCellByKey`, `getCellByColumn` instead. Please note: -* *ng update* will migrate the uses of *IgxGridCellComponent*, *IgxTreeGridCellComponent*, *IgxHierarchicalGridCellComponent*, *IgxGridExpandableCellComponent*, like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html). -* *getCellByIndex* and other methods will return undefined, if the row at that index is not a data row, but is IgxGroupByRow, IgxSummaryRow, details row, etc. +- _ng update_ will migrate the uses of _IgxGridCellComponent_, _IgxTreeGridCellComponent_, _IgxHierarchicalGridCellComponent_, _IgxGridExpandableCellComponent_, like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html). +- _getCellByIndex_ and other methods will return undefined, if the row at that index is not a data row, but is IgxGroupByRow, IgxSummaryRow, details row, etc. ### Themes + Due to complaints pertaining to compilation warnings (see [#9793](https://github.com/IgniteUI/igniteui-angular/issues/9793)) we now use the [`math.div`](https://sass-lang.com/documentation/modules/math#div) function; This functionality is supported by [Dart Sass](https://sass-lang.com/dart-sass) from version 1.33.0 onward. #### Solution + If for any reason you see Sass compilation errors saying `math.div` is not a known function it means you are using an outdated version of Sass in your project. 1. Update to the latest version of Angular using `ng update` - Angular 12.1.0+ uses the dart-sass compiler by default. -```sh -ng update [options] -``` + ```sh + ng update [options] + ``` -If for some reason you don't use the Ignite UI/Angular CLI, you'd need to replace `node-sass` with `sass` in your Node project. + If for some reason you don't use the Ignite UI/Angular CLI, you'd need to replace `node-sass` with `sass` in your Node project. -```sh -npm uninstall node-sass -npm install sass --save-dev -``` + ```sh + npm uninstall node-sass + npm install sass --save-dev + ``` 2. If for some reason you cannot upgrade to the latest version of Angular using the method above, you can fall back to the old Sass division method by setting a global flag in your Sass file: -```scss -$__legacy-libsass: true; -``` + ```scss + $__legacy-libsass: true; + ``` ## From 11.1.x to 12.0.x + ### Themes -* Breaking Changes: - * `IgxAvatar` theme has been simplified. The number of theme params (`avatar-theme`) has been reduced significantly and no longer includes prefixed parameters(`icon-*`, `initials-*`, `image-*`) and suffixed parameters(`border-radius-*`). Updates performed with `ng update` will migrate existing avatar themes, but some additional tweaking may be required to account for the absence of prefixed and suffixed params. + +- Breaking Changes: + - `IgxAvatar` theme has been simplified. The number of theme params (`avatar-theme`) has been reduced significantly and no longer includes prefixed parameters(`icon-*`, `initials-*`, `image-*`) and suffixed parameters(`border-radius-*`). Updates performed with `ng update` will migrate existing avatar themes, but some additional tweaking may be required to account for the absence of prefixed and suffixed params. You will need to modify existing type specific avatar themes in the following way: For example, this: - ```scss - $avatar-theme: avatar-theme( - $initials-background: blue, - $initials-color: orange, - $icon-background: blue, - $icon-color: orange, - ); + ```scss + $avatar-theme: avatar-theme( + $initials-background: blue, + $initials-color: orange, + $icon-background: blue, + $icon-color: orange, + ); - @include avatar($avatar-theme); - ``` + @include avatar($avatar-theme); + ``` Needs to be transformed into this: - ```scss - $initials-avatar: avatar-theme( - $background: blue, - $color: orange, - ); + ```scss + $initials-avatar: avatar-theme( + $background: blue, + $color: orange, + ); - $icon-avatar: avatar-theme( - $background: blue, - $color: orange, - ); + $icon-avatar: avatar-theme( + $background: blue, + $color: orange, + ); - .initials-avatar { - @include avatar($initials-avatar); - } + .initials-avatar { + @include avatar($initials-avatar); + } - .icon-avatar { - @include avatar($icon-avatar); - } - ``` + .icon-avatar { + @include avatar($icon-avatar); + } + ``` - * `IgxButton` theme has been simplified. The number of theme params (`button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). Updates performed with `ng update` will migrate existing button themes, but some additional tweaking may be required to account for the absence of prefixed params. + - `IgxButton` theme has been simplified. The number of theme params (`button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). Updates performed with `ng update` will migrate existing button themes, but some additional tweaking may be required to account for the absence of prefixed params. In order to achieve the same result as from the code snippet below. - ```html - - - ``` - ```scss - $my-button-theme: button-theme( - $raised-background: red, - $outlined-outline-color: green - ); - - @include css-vars($my-button-theme); - ``` + ```html + + + ``` + + ```scss + $my-button-theme: button-theme( + $raised-background: red, + $outlined-outline-color: green + ); + + @include css-vars($my-button-theme); + ``` + You have to create a separate theme for each button type and scope it to a CSS selector. - ```html -
- -
-
- -
- ``` - ```scss - $my-raised-button: button-theme( - $background: red - ); + ```html +
+ +
+
+ +
+ ``` - $my-outlined-button: button-theme( - $border-color: red - ); + ```scss + $my-raised-button: button-theme( + $background: red + ); - .my-raised-btn { - @include css-vars($my-raised-button); - } + $my-outlined-button: button-theme( + $border-color: red + ); + + .my-raised-btn { + @include css-vars($my-raised-button); + } + + .my-outlined-btn { + @include css-vars($my-outlined-button); + } + ``` - .my-outlined-btn { - @include css-vars($my-outlined-button); - } - ``` As you can see, since the `button-theme` params now have the same names for each button type, we have to scope our button themes to a CSS selector in order to have different colors for different types. Here you can see all the [available properties]({environment:sassApiUrl}/themes#function-button-theme) of the `button-theme` - * The `typography` mixin is no longer implicitly included with `core`. To use our typography styles you have to include the mixin explicitly after `core` and before `theme`: + - The `typography` mixin is no longer implicitly included with `core`. To use our typography styles you have to include the mixin explicitly after `core` and before `theme`: ```scss // in styles.scss @@ -1002,11 +1066,11 @@ $__legacy-libsass: true; The [**IgxBottomNavComponent**]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) was completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. It is recommended that you update via **ng update** in order to migrate the existing **igx-bottom-nav** definitions to the new ones. -* Template - * The new structure defines bottom navigation item components each wrapping a header and a content component. The headers usually contain an icon ([`Material guidelines`](https://material.io/components/bottom-navigation#usage)) but may as well have a label or any other custom content. - * For header styling purposes we introduced two new directives - `igxBottomNavHeaderLabel` and `igxBottomNavHeaderIcon`. - * Since the header component now allows adding any content, the `igxTab` directive, which was previously used to retemplate the tab's header, was removed because it is no longer necessary. - * When the component is used in navigation scenario, the `routerLink` directive needs to be attached to the header component. +- Template + - The new structure defines bottom navigation item components each wrapping a header and a content component. The headers usually contain an icon ([`Material guidelines`](https://material.io/components/bottom-navigation#usage)) but may as well have a label or any other custom content. + - For header styling purposes we introduced two new directives - `igxBottomNavHeaderLabel` and `igxBottomNavHeaderIcon`. + - Since the header component now allows adding any content, the `igxTab` directive, which was previously used to retemplate the tab's header, was removed because it is no longer necessary. + - When the component is used in navigation scenario, the `routerLink` directive needs to be attached to the header component. ```html @@ -1022,22 +1086,24 @@ The [**IgxBottomNavComponent**]({environment:angularApiUrl}/classes/igxbottomnav ... ``` -* API changes - * The `id`, `itemStyle`, `panels`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the [`items`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#items) property returns the collection of tabs. - * The following properties were changed: - * The tab item's `isSelected` property was renamed to [`selected`]({environment:angularApiUrl}/classes/igxbottomnavitemcomponent.html#selected). - * The `selectedTab` property was renamed to [`selectedItem`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedItem). - * The `onTabSelected` and `onTabDeselected` events were removed. We introduced three new events, [`selectedIndexChanging`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedIndexChanging),[`selectedIndexChange`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedIndexChange) and [`selectedItemChange`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedItemChange), which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level. + +- API changes + - The `id`, `itemStyle`, `panels`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the [`items`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#items) property returns the collection of tabs. + - The following properties were changed: + - The tab item's `isSelected` property was renamed to [`selected`]({environment:angularApiUrl}/classes/igxbottomnavitemcomponent.html#selected). + - The `selectedTab` property was renamed to [`selectedItem`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedItem). + - The `onTabSelected` and `onTabDeselected` events were removed. We introduced three new events, [`selectedIndexChanging`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedIndexChanging),[`selectedIndexChange`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedIndexChange) and [`selectedItemChange`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedItemChange), which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level. ### IgxTabs component + The [**IgxTabsComponent**]({environment:angularApiUrl}/classes/igxtabscomponent.html) was completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. It is recommended that you update via **ng update** in order to migrate the existing **igx-tabs** definitions to the new ones. -* Template - * The new structure defines tab item components each wrapping a header and a content component. The headers usually contain an icon and a label but may as well have any other custom content. - * For header styling purposes we introduced two new directives - `igxTabHeaderLabel` and `igxTabHeaderIcon`. - * Since the header component now allows adding any content, the `igxTab` directive, which was previously used to retemplate the tab's header, was removed because it is no longer necessary. - * When the component is used in navigation scenario, the `routerLink` directive needs to be attached to the header component. +- Template + - The new structure defines tab item components each wrapping a header and a content component. The headers usually contain an icon and a label but may as well have any other custom content. + - For header styling purposes we introduced two new directives - `igxTabHeaderLabel` and `igxTabHeaderIcon`. + - Since the header component now allows adding any content, the `igxTab` directive, which was previously used to retemplate the tab's header, was removed because it is no longer necessary. + - When the component is used in navigation scenario, the `routerLink` directive needs to be attached to the header component. ```html @@ -1054,17 +1120,19 @@ The [**IgxTabsComponent**]({environment:angularApiUrl}/classes/igxtabscomponent. ... ``` -* API changes - * The `id`, `groups`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the [`items`]({environment:angularApiUrl}/classes/igxtabscomponent.html#items) property returns the collection of tabs. - * The following properties were changed: - * The tab item's `isSelected` property was renamed to [`selected`]({environment:angularApiUrl}/classes/igxtabitemcomponent.html#selected). - * The `selectedTabItem` property was shortten to [`selectedItem`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedItem). - * The `type` property, with its contentFit and fixed options, is no longer available. The header sizing & positioning mode is currently controlled by the [`tabAlignment`]({environment:angularApiUrl}/classes/igxtabscomponent.html#tabAlignment) input property which accepts four different values - start (default), center, end and justify. The old `contentFit` type corresponds to the current `start` alignment value and the old `fixed` type - to the current `justify` value. - * The `tabItemSelected` and `tabItemDeselected` events were removed. We introduced three new events, [`selectedIndexChanging`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChanging), [`selectedIndexChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedindexchange) and [`selectedItemChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChange), which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level. + +- API changes + - The `id`, `groups`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the [`items`]({environment:angularApiUrl}/classes/igxtabscomponent.html#items) property returns the collection of tabs. + - The following properties were changed: + - The tab item's `isSelected` property was renamed to [`selected`]({environment:angularApiUrl}/classes/igxtabitemcomponent.html#selected). + - The `selectedTabItem` property was shortened to [`selectedItem`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedItem). + - The `type` property, with its contentFit and fixed options, is no longer available. The header sizing & positioning mode is currently controlled by the [`tabAlignment`]({environment:angularApiUrl}/classes/igxtabscomponent.html#tabAlignment) input property which accepts four different values - start (default), center, end and justify. The old `contentFit` type corresponds to the current `start` alignment value and the old `fixed` type - to the current `justify` value. + - The `tabItemSelected` and `tabItemDeselected` events were removed. We introduced three new events, [`selectedIndexChanging`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChanging), [`selectedIndexChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedindexchange) and [`selectedItemChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChange), which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level. ### IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent -* *IgxGridRowComponent*, *IgxTreeGridRowComponent*, *IgxHierarchicalRowComponent*, *IgxGridGroupByRowComponent* are no longer exposed in the public API. -* Public APIs, which used to return an instance of one of the above, now return objects implementing the public [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) interface: + +- _IgxGridRowComponent_, _IgxTreeGridRowComponent_, _IgxHierarchicalRowComponent_, _IgxGridGroupByRowComponent_ are no longer exposed in the public API. +- Public APIs, which used to return an instance of one of the above, now return objects implementing the public [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) interface: ```ts const row = grid.getRowByIndex(0); @@ -1072,22 +1140,26 @@ const row = grid.getRowByKey(2); const row = cell.row; ``` -While the public API of [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) is the same as what *IgxRowComponent* and others used to expose, please note: +While the public API of [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) is the same as what _IgxRowComponent_ and others used to expose, please note: -* *toggle* method, exposed by the *IgxHierarchicalRowComponent* is not available. Use [`expanded`]({environment:angularApiUrl}/interfaces/rowtype.html#expanded) property for all row types: +- _toggle_ method, exposed by the _IgxHierarchicalRowComponent_ is not available. Use [`expanded`]({environment:angularApiUrl}/interfaces/rowtype.html#expanded) property for all row types: ```ts grid.getRowByIndex(0).expanded = false; ``` -*row.rowData* and *row.rowID* are deprecated and will be entirely removed with version 13. Please use *row.data* and *row.key* instead. -* *row* property in the event arguments emitted by *onRowPinning*, and *dragData* property in the event arguments emitted by *onRowDragStart*, *onRowDragEnd* is now implementing [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) -* *ng update* will migrate most of the uses of *IgxGridRowComponent*, *IgxTreeGridRowComponent*, *IgxHierarchicalRowComponent*, *IgxGridGroupByRowComponent* , like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html). -* *getRowByIndex* will now return a [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) object, if the row at that index is a summary row (previously used to returned *undefined*). *row.isSummaryRow* and *row.isGroupByRow* return true if the row at the index is a summary row or a group by row. +*row.rowData_ and _row.rowID_ are deprecated and will be entirely removed with version 13. Please use _row.data_ and _row.key_ instead. + +- _row_ property in the event arguments emitted by _onRowPinning_, and _dragData_ property in the event arguments emitted by _onRowDragStart_, _onRowDragEnd_ is now implementing [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) +- _ng update_ will migrate most of the uses of _IgxGridRowComponent_, _IgxTreeGridRowComponent_, _IgxHierarchicalRowComponent_, _IgxGridGroupByRowComponent_ , like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html). +- _getRowByIndex_ will now return a [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) object, if the row at that index is a summary row (previously used to returned _undefined_). _row.isSummaryRow_ and _row.isGroupByRow_ return true if the row at the index is a summary row or a group by row. + ### IgxInputGroupComponent -* The `disabled` property has been removed. The property was misleading, as the state of the input group was always managed by the underlying `igxInput`. - * Running `ng update` will handle all instances in which `[disabled]` was used as an `@Input` in templates. - * If you are referencing the property in a `.ts` file: + +- The `disabled` property has been removed. The property was misleading, as the state of the input group was always managed by the underlying `igxInput`. + - Running `ng update` will handle all instances in which `[disabled]` was used as an `@Input` in templates. + - If you are referencing the property in a `.ts` file: + ```typescript export class CustomComponent { public inputGroup: IgxInputGroupComponent @@ -1097,6 +1169,7 @@ grid.getRowByIndex(0).expanded = false; ``` you should please manually update your code to reference the underlying input directive's `disabled` property: + ```typescript export class CustomComponent { public input: IgxInputDirective @@ -1107,29 +1180,33 @@ grid.getRowByIndex(0).expanded = false; ### IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent -* The `value` property for IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent now accepts ISO 8601 string format. This means that `value` type could be `Date` or `string`. -* The `inputFormat` property of IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent now doesn't accept `y` for the year part. You should update it to `yy`. +- The `value` property for IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent now accepts ISO 8601 string format. This means that `value` type could be `Date` or `string`. +- The `inputFormat` property of IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent now doesn't accept `y` for the year part. You should update it to `yy`. ## From 10.2.x to 11.0.x -* IgxGrid, IgxTreeGrid, IgxHierarchicalGrid - * The way the toolbar is instantiated in the grid has changed. It is now a separate component projected in the grid tree. Thus the `showToolbar` property is removed from + +- IgxGrid, IgxTreeGrid, IgxHierarchicalGrid + - The way the toolbar is instantiated in the grid has changed. It is now a separate component projected in the grid tree. Thus the `showToolbar` property is removed from all grids and all other properties related to the toolbar in the grid are deprecated. It is recommended to follow the recommended way for enabling toolbar features as described in the [Toolbar topic](../grid/toolbar.md). - * The `igxToolbarCustomContent` directive is removed. While the migration will move + - The `igxToolbarCustomContent` directive is removed. While the migration will move your template content inside the toolbar content, it does not try to resolve template bindings. Make sure to check your template files after the migration. - * The API for the toolbar component was changed during the refactor and many of the old properties are now removed. Unfortunately, having + - The API for the toolbar component was changed during the refactor and many of the old properties are now removed. Unfortunately, having an adequate migration for these changes is complicated to say the least, so any errors should be handled at project level. ## From 10.0.x to 10.1.x -* IgxGrid, IgxTreeGrid, IgxHierarchicalGrid - * Since we have removed the `IgxExcelStyleSortingTemplateDirective`, `IgxExcelStyleHidingTemplateDirective`, `IgxExcelStyleMovingTemplateDirective`, `IgxExcelStylePinningTemplateDirective`, and `IgxExcelStyleSelectingTemplateDirective` directives used for templating some parts of the Excel style filter menu, you could use the newly added directives for templating the column and filter operations areas - `IgxExcelStyleColumnOperationsTemplateDirective` and `IgxExcelStyleFilterOperationsTemplateDirective`. We have also exposed all internal components of the Excel style filter menu so that they can be used inside custom templates. You can find more information about the new template directives in the [Excel-Style Filtering Topic](../grid/excel-style-filtering.md#templates). -* IgxGrid - * The `selectedRows()` method has been refactored into an input property named. This breaking change allows users to easily change the grid's selection state at runtime. Pre-selection of rows is also supported. All instances where the `selectedRows()` method is called have to be rewritten without any parentheses. - * Binding to the `selectedRows` input property could look something like this: + +- IgxGrid, IgxTreeGrid, IgxHierarchicalGrid + - Since we have removed the `IgxExcelStyleSortingTemplateDirective`, `IgxExcelStyleHidingTemplateDirective`, `IgxExcelStyleMovingTemplateDirective`, `IgxExcelStylePinningTemplateDirective`, and `IgxExcelStyleSelectingTemplateDirective` directives used for templating some parts of the Excel style filter menu, you could use the newly added directives for templating the column and filter operations areas - `IgxExcelStyleColumnOperationsTemplateDirective` and `IgxExcelStyleFilterOperationsTemplateDirective`. We have also exposed all internal components of the Excel style filter menu so that they can be used inside custom templates. You can find more information about the new template directives in the [Excel-Style Filtering Topic](../grid/excel-style-filtering.md#templates). +- IgxGrid + - The `selectedRows()` method has been refactored into an input property named. This breaking change allows users to easily change the grid's selection state at runtime. Pre-selection of rows is also supported. All instances where the `selectedRows()` method is called have to be rewritten without any parentheses. + - Binding to the `selectedRows` input property could look something like this: + ```typescript public mySelectedRows = [0, 1, 2]; ``` + ```html @@ -1138,10 +1215,11 @@ grid.getRowByIndex(0).expanded = false; ``` ## From 9.0.x to 10.0.x -* IgxDropdown - * The display property of the dropdown item has been changed from `flex` to `block`. We have done this in order to have truncated text enabled by default. Due to that change, if there is more than text in the content of the dropdown item, the layout needs to be handled on the application level. - * The following example demonstrates how to style a dropdown item with an icon and text content so that they are vertically aligned. +- IgxDropdown + - The display property of the dropdown item has been changed from `flex` to `block`. We have done this in order to have truncated text enabled by default. Due to that change, if there is more than text in the content of the dropdown item, the layout needs to be handled on the application level. + + - The following example demonstrates how to style a dropdown item with an icon and text content so that they are vertically aligned. ```html @@ -1151,6 +1229,7 @@ grid.getRowByIndex(0).expanded = false;
``` + ```scss .my-styles { display: flex; @@ -1163,22 +1242,23 @@ grid.getRowByIndex(0).expanded = false; ``` ## From 8.x.x to 9.0.x + Due to a breaking change in Angular 9 Hammer providers are no longer implicitly added [please, refer to the following document for details:](https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-9 ) Because of this the following components require `HammerModule` to be imported in the root module of the application in order for **touch** interactions to work as expected: -* igxGrid -* igxHierarchicalGrid -* igxTreeGrid -* igxList -* igxNavigationDrawer -* igxTimePicker -* igxDatePicker -* igxMonthPicker -* *igxSlider** -* igxCalendar -* igxCarousel +- igxGrid +- igxHierarchicalGrid +- igxTreeGrid +- igxList +- igxNavigationDrawer +- igxTimePicker +- igxDatePicker +- igxMonthPicker +- _igxSlider_* +- igxCalendar +- igxCarousel -> **\* Note** - igxSlider requires the HammerModule for ***all*** user interactions. +> **\* Note** - igxSlider requires the HammerModule for _**all**_ user interactions. You can use the following code snippet to update your app's root module file. @@ -1196,81 +1276,88 @@ import { HammerModule } from "@angular/platform-browser"; Due to name changes made in some of the `Enumerations` we export, manual update is needed for their members. Here's a list of all changes made that require manual update: -* AvatarType.`DEFAULT` -> IgxAvatarType.`CUSTOM` -* Type.`DEFAULT` -> IgxBadgeType.`PRIMARY` -* IgxCardType.`DEFAULT` -> IgxCardType.`ELEVATED` -* IgxCardActionsLayout.`DEFAULT` -> IgxCardActionsLayout.`START` -* IgxDividerType.`DEFAULT` -> IgxDividerType.`SOLID` -* IgxProgressType.`DANGER` -> IgxProgressType.`ERROR` +- AvatarType.`DEFAULT` -> IgxAvatarType.`CUSTOM` +- Type.`DEFAULT` -> IgxBadgeType.`PRIMARY` +- IgxCardType.`DEFAULT` -> IgxCardType.`ELEVATED` +- IgxCardActionsLayout.`DEFAULT` -> IgxCardActionsLayout.`START` +- IgxDividerType.`DEFAULT` -> IgxDividerType.`SOLID` +- IgxProgressType.`DANGER` -> IgxProgressType.`ERROR` The `ng update` process will update all enumeration names, like `AvatarType`, `Type`, et al. to `IgxAvatarType` and `IgxBadgeType`, respectively. All other enumeration member names remain unchanged. ## From 8.1.x to 8.2.x -* IgxDrag - * Since `hideBaseOnDrag` and `visible` inputs are being deprecated, in order to achieve the same functionality in your application, you can use any way of hiding the base element that Angular provides. One example is setting the `visibility` style to `hidden`, since it will only make in invisible and keep its space that it takes in the DOM: +- IgxDrag + - Since `hideBaseOnDrag` and `visible` inputs are being deprecated, in order to achieve the same functionality in your application, you can use any way of hiding the base element that Angular provides. One example is setting the `visibility` style to `hidden`, since it will only make in invisible and keep its space that it takes in the DOM: - ```html -
- Drag me! -
- ``` + ```html +
+ Drag me! +
+ ``` - ```typescript - public targetDragged = false; + ```typescript + public targetDragged = false; - public onDragStarted(event) { - this.targetDragged = true; - } + public onDragStarted(event) { + this.targetDragged = true; + } - public onDragEnded(event) { - this.targetDragged = false; - } - ``` + public onDragEnded(event) { + this.targetDragged = false; + } + ``` - * Since `animateOnRelease` and `dropFinished()` are also being deprecated, any `dropFinished()` method usage should be replaced with `transitionToOrigin()`. Otherwise you would need to call `transitionToOrigin()` depending on when you would want the dragged element to transition back to its original location. Note that if the dragged element DOM position is changed, then its original location will also change based on that. + - Since `animateOnRelease` and `dropFinished()` are also being deprecated, any `dropFinished()` method usage should be replaced with `transitionToOrigin()`. Otherwise you would need to call `transitionToOrigin()` depending on when you would want the dragged element to transition back to its original location. Note that if the dragged element DOM position is changed, then its original location will also change based on that. -* IgxDrop - * Due to the default drop strategy provided with the `IxgDrop` directive is no longer applied by default, in order to continue having the same behavior, you need to set the new input `dropStrategy` to be the provided `IgxAppendDropStrategy` implementation. +- IgxDrop + - Due to the default drop strategy provided with the `IxgDrop` directive is no longer applied by default, in order to continue having the same behavior, you need to set the new input `dropStrategy` to be the provided `IgxAppendDropStrategy` implementation. + + ```html +
+ ``` + + ```typescript + import { IgxAppendDropStrategy } from 'igniteui-angular'; + // import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package - ```html -
- ``` - ```typescript - import { IgxAppendDropStrategy } from 'igniteui-angular'; - // import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package + public appendStrategy = IgxAppendDropStrategy; + ``` - public appendStrategy = IgxAppendDropStrategy; - ``` - * Any use of interfaces `IgxDropEnterEventArgs` and `IgxDropLeaveEventArgs` should be replaced with `IDragBaseEventArgs`. - * Also any use of the `IgxDropEventArgs` interface should be replaced with `IDropDroppedEventArgs`. + - Any use of interfaces `IgxDropEnterEventArgs` and `IgxDropLeaveEventArgs` should be replaced with `IDragBaseEventArgs`. + - Also any use of the `IgxDropEventArgs` interface should be replaced with `IDropDroppedEventArgs`. -* IgxRowDragDirective - * `IRowDragStartEventArgs` and `IRowDragEndEventArgs` have argument's name changed in order to be more clear to what it relates to. `owner` argument is renamed to `dragDirective`. +- IgxRowDragDirective + - `IRowDragStartEventArgs` and `IRowDragEndEventArgs` have argument's name changed in order to be more clear to what it relates to. `owner` argument is renamed to `dragDirective`. The `owner` argument now provides a reference to the owner component. If your code was like: - ```typescript - public dragStart(event) { - const directive = event.owner; - } - ``` - From version 8.2.x it should be updated to: - ```typescript - public dragStart(event) { - const directive = event.dragDirective; - const grid = event.owner; - } - ``` -* IgxCombo - * The way that the [`igx-combo`](../combo.md) handles selection and data binding is changed. + ```typescript + public dragStart(event) { + const directive = event.owner; + } + ``` + + From version 8.2.x it should be updated to: + + ```typescript + public dragStart(event) { + const directive = event.dragDirective; + const grid = event.owner; + } + ``` + +- IgxCombo + - The way that the [`igx-combo`](../combo.md) handles selection and data binding is changed. - - If the combo's [`valueKey`] input is defined, the control will look for that specific property in the passed array of data items when performing selection. + - If the combo's [`valueKey`] input is defined, the control will look for that specific property in the passed array of data items when performing selection. **All** selection events are handled with the value of the data items' `valueKey` property. All combos that have `valueKey` specified should have their selection/two-way binding consist only of the values for the object property specified in the input: + ```html ``` + ```typescript export class MyExampleCombo { public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...]; @@ -1282,11 +1369,13 @@ The `ng update` process will update all enumeration names, like `AvatarType`, `T } ``` - - If the combo **does not** have a `valueKey` defined, **all** selection events are handled with **equality (===)**. + - If the combo **does not** have a `valueKey` defined, **all** selection events are handled with **equality (===)**. All combos that **do not** have a `valueKey` specified should have their selection/two-way binding handled with **references** to their data items: + ```html ``` + ```typescript export class MyExampleCombo { public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...]; @@ -1301,7 +1390,8 @@ The `ng update` process will update all enumeration names, like `AvatarType`, `T You can read more about setting up the combo in the [readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md#value-binding) and in the [official documentation](../combo.md#selection-api). ## From 8.0.x to 8.1.x -* The `igx-paginator` component is introduced as a standalone component and is also used in the Grid components. + +- The `igx-paginator` component is introduced as a standalone component and is also used in the Grid components. Keep in mind that if you have set the `paginationTemplate`, you may have to modify your CSS to display the pagination correctly. This is due to the fact that the template is no longer applied under a paging-specific container with CSS rules to center content, so you might need to add them manually. The style should be something similar to: @@ -1315,53 +1405,59 @@ The style should be something similar to: ```css .pagination-container { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } ``` ## From 7.3.x to 8.0.x -* While updating, if you face the following error `Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5").`, you should update `@angular/core` package first. This is related to this known [Angular CLI issue](https://github.com/angular/angular-cli/issues/13095) -* While updating the `igniteui-angular` package, if you see the following error `Package "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208")`, you should update using `ng update igniteui-angular --force`. This could happen if you update `@angular/core` and `@angular/cli` before updating `igniteui-angular`. + +- While updating, if you face the following error `Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5").`, you should update `@angular/core` package first. This is related to this known [Angular CLI issue](https://github.com/angular/angular-cli/issues/13095) +- While updating the `igniteui-angular` package, if you see the following error `Package "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208")`, you should update using `ng update igniteui-angular --force`. This could happen if you update `@angular/core` and `@angular/cli` before updating `igniteui-angular`. ## From 7.2.x or 7.3.x to 7.3.4 -* If you use the `filterGlobal` method of `IgxGrid`, `IgxTreeGrid` or `IgxHierarchicalGrid`, you should know that the `condition` parameter is no longer optional. When the `filterGlobal` method is called with an invalid condition, it will not clear the existing filters for all columns. + +- If you use the `filterGlobal` method of `IgxGrid`, `IgxTreeGrid` or `IgxHierarchicalGrid`, you should know that the `condition` parameter is no longer optional. When the `filterGlobal` method is called with an invalid condition, it will not clear the existing filters for all columns. ## From 7.1.x to 7.2.x -* If you use an IgxCombo with `combo.value`, you should know that now `combo.value` is only a getter. -* If you use `IgxTextHighlightDirective`, you should know that the `page` input property is deprecated. `rowIndex`, `columnIndex` and `page` properties of the `IActiveHighlightInfo` interface are also deprecated. Instead, `row` and `column` optional properties are added. -* If you use the `button-theme`, you should know that the `$button-roundness` has been replaced for each button type with: `$flat-border-radius`, `$raised-border-radius`, `$outline-border-radius`, `$fab-border-radius`, `$icon-border-radius`. + +- If you use an IgxCombo with `combo.value`, you should know that now `combo.value` is only a getter. +- If you use `IgxTextHighlightDirective`, you should know that the `page` input property is deprecated. `rowIndex`, `columnIndex` and `page` properties of the `IActiveHighlightInfo` interface are also deprecated. Instead, `row` and `column` optional properties are added. +- If you use the `button-theme`, you should know that the `$button-roundness` has been replaced for each button type with: `$flat-border-radius`, `$raised-border-radius`, `$outline-border-radius`, `$fab-border-radius`, `$icon-border-radius`. ## From 7.0.x to 7.1.x - * If you use an IgxGrid with summaries in your application, you should know that now the `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of IgxSummaryResult with proper length. - Before version 7.1: +- If you use an IgxGrid with summaries in your application, you should know that now the `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of IgxSummaryResult with proper length. + + Before version 7.1: + ```typescript export class CustomSummary extends IgxNumberSummaryOperand { - public operate(data?: any[]): IgxSummaryResult[] { - return [{ - key: 'average', - label: 'average', - summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2) - }]; - } + public operate(data?: any[]): IgxSummaryResult[] { + return [{ + key: 'average', + label: 'average', + summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2) + }]; + } } ``` - Since version 7.1: + Since version 7.1: + ```typescript export class CustomSummary extends IgxNumberSummaryOperand { - public operate(data?: any[]): IgxSummaryResult[] { - return [{ - key: 'average', - label: 'average', - summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null - }]; - } + public operate(data?: any[]): IgxSummaryResult[] { + return [{ + key: 'average', + label: 'average', + summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null + }]; + } } ``` ## From 6.0.x to 6.1.x -* If you use an IgxCombo control in your application and you have set the `itemsMaxWidth` option, you should change this option to `itemsWidth` +- If you use an IgxCombo control in your application and you have set the `itemsMaxWidth` option, you should change this option to `itemsWidth` diff --git a/en/components/general/wpf-to-angular-guide/angular-events.md b/en/components/general/wpf-to-angular-guide/angular-events.md index fe55b852d5..6cc6192af7 100644 --- a/en/components/general/wpf-to-angular-guide/angular-events.md +++ b/en/components/general/wpf-to-angular-guide/angular-events.md @@ -15,6 +15,7 @@ Here is a simple example how you respond to a click event of a button in WPF: ```xml ``` + ```csharp private void Button_Click(object sender, RoutedEventArgs e) { @@ -23,9 +24,11 @@ private void Button_Click(object sender, RoutedEventArgs e) ``` The same thing in Angular would look like this: + ```html ``` + ```typescript onClicked() { console.log('Hello World'); @@ -37,6 +40,7 @@ In WPF we are used to getting information about the event, such as the sender an ```html ``` + ```typescript onClicked(event) { console.log(event.target); @@ -49,6 +53,7 @@ Sometimes passing the event object might not be very useful. Instead, you may wa ``` + ```typescript onClicked(message) { console.log(message); @@ -60,6 +65,7 @@ Let's say that we want to print the value of an input on pressing Enter. You cou ```html ``` + ```typescript onInputKeyup(event, message) { if (event.keyCode === 13) { @@ -73,13 +79,14 @@ Surprisingly, in Angular, there is an even easier way to do that. You could bind ```html ``` + ```typescript onInputKeyup(message) { console.log(message); } ``` -### Responding to Events of a Component +## Responding to Events of a Component In WPF, when you create your own custom controls, often you need to extend or modify some base events like this: @@ -132,12 +139,13 @@ this.taskCompleted.emit(new TaskEventArgs()); ``` ## Additional Resources -* [Desktop to Web: Responding to Events with Angular Event Binding](https://www.youtube.com/watch?v=V1Futz4W400&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=6) -* [Angular User Input](https://angular.io/guide/user-input) -* [Component Interaction: Parent listens for child events](https://angular.io/guide/component-interaction#parent-listens-for-child-event) + +- [Desktop to Web: Responding to Events with Angular Event Binding](https://www.youtube.com/watch?v=V1Futz4W400&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=6) +- [Angular User Input](https://angular.io/guide/user-input) +- [Component Interaction: Parent listens for child events](https://angular.io/guide/component-interaction#parent-listens-for-child-event)
Our community is active and always welcoming to new ideas. -* [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) +- [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/wpf-to-angular-guide/angular-pipes.md b/en/components/general/wpf-to-angular-guide/angular-pipes.md index f9fc446798..783b0593d6 100644 --- a/en/components/general/wpf-to-angular-guide/angular-pipes.md +++ b/en/components/general/wpf-to-angular-guide/angular-pipes.md @@ -81,19 +81,20 @@ export class ReplacePipe implements PipeTransform { ```html {{ name | replace:" ":"-" }} ``` + > [!NOTE] > Note that in order to be able to use the pipe in the component's html template, you have to add it to the module declarations. - > [!NOTE] > An important difference between the Angular pipe and the WPF converter is that the Angular pipe works only for one-way binding unlike the WPF converter which has [ConvertBack](https://docs.microsoft.com/en-us/dotnet/api/system.windows.data.ivalueconverter.convertback?view=netframework-4.8) method. ## Additional Resources -* [Desktop to Web: Transforming Data with Angular Pipes](https://www.youtube.com/watch?v=Gmz5kio50FE&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=9) -* [Angular Pipes](https://angular.io/guide/pipes) -* [List of Predefined Angular Pipes](https://angular.io/api?type=pipe) + +- [Desktop to Web: Transforming Data with Angular Pipes](https://www.youtube.com/watch?v=Gmz5kio50FE&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=9) +- [Angular Pipes](https://angular.io/guide/pipes) +- [List of Predefined Angular Pipes](https://angular.io/api?type=pipe)
Our community is active and always welcoming to new ideas. -* [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) \ No newline at end of file +- [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/wpf-to-angular-guide/create-first-angular-app.md b/en/components/general/wpf-to-angular-guide/create-first-angular-app.md index 2070943fb1..fde5739760 100644 --- a/en/components/general/wpf-to-angular-guide/create-first-angular-app.md +++ b/en/components/general/wpf-to-angular-guide/create-first-angular-app.md @@ -10,11 +10,11 @@ _keywords: create angular application, ignite ui for angular, infragistics Learn how to start creating an Angular application when you migrate from WPF to Angular. -### Prerequisites +## Prerequisites In order to start writing Angular applications, you need to install Node.js and the npm package manager. Node.js is a JavaScript runtime environment that executes JavaScript code outside of a browser. In order to get Node.js, go to [nodejs.org](https://nodejs.org). NPM is a package manager similar to the NuGet package manager for .NET. It is installed with Node.js by default. You will also need an IDE. One of the best environments for developing Angular applications is Visual Studio Code. It is free, open source, and runs on every platform. You can get it from [code.visualstudio.com](https://code.visualstudio.com/). -### Create new project +## Create new project If you are a WPF developer, creating new projects inside of Visual Studio is pretty straight forward. You would just click File -> New Project, select the project type, give it a name and press OK. Since you are going into the Angular world, you want to create a new project inside Visual Studio Code. However, there is no new project option here and that's because Visual Studio Code is file based and not project based. In order to create a new Angular application, we are going to use the command prompt. @@ -30,7 +30,7 @@ Then navigate in the command prompt to the folder where you want your applicatio ng new demo-app ``` -We are going to be prompted "Would we like to add Angular routing?". For this demo we will choose NO. Next, we are asked which stylesheet format would we like to use. We are going to stick with the basic CSS for now. It takes a few minutes, but eventually the process will complete and your new application will be created on the disk. +We are going to be prompted "Would we like to add Angular routing?". For this demo we will choose NO. Next, we are asked which stylesheet format would we like to use. We are going to stick with the basic CSS for now. It takes a few minutes, but eventually the process will complete and your new application will be created on the disk. Now we have to change directories to the demo-app folder that was just created and execute a command to open Visual Studio Code. @@ -41,12 +41,12 @@ code . This is going to launch a new instance of Visual Studio Code that contains your Angular application. Now this is the part that is probably the most overwhelming to desktop developers trying to learn Angular - the folder structure. -### Project structure +## Project structure Let's go ahead and take a look at each of these files and see how they relate to a WPF application. The best way to do that is to compare each project side by side. On the left we have our WPF app. On the right we have our Angular app. - - +WPF Project Structure +Angular Project Structure It is important to keep in mind that an Angular application is a single page application (SPA) which means there is only one page in the entire app, and that is your `index.html`. The `index.html` file could be compared to the `App.xaml` of the WPF application. They are both global and everything you put there will show up on every single page of your application. The `index.html` file contains a section `` which is similar to the `StartupUri` of the `App.xaml` file and specifies the first page we want to show when the app launches. @@ -61,6 +61,7 @@ In WPF we have a `packages.config` file which defines all our dependencies to nu Let's take a look at the `References` folder. In WPF we have a `References` node in our solution that shows all the references that are added to this project. In an Angular application that is actually going to be the `nodes_module` folder. Coming from WPF, you may be surprised how many dependencies an Angular project has. These are populated by using `npm`. Unfortunately, here the similarities end. Let us look at some of the other generated files and folders: + - `e2e` - stands for end-to-end testing and contains integration tests or tests with real-world scenarios like a login process. - `src` - most of the application's code is located here. - `assets` - contains your images or any other assets. @@ -69,7 +70,7 @@ Unfortunately, here the similarities end. Let us look at some of the other gener - `karma.conf.js` - contains configuration for the unit tests. - `style.css` - stylesheet with styles that are global for your application, it is similar to a resource dictionary defined in `App.xaml` in WPF. -### Run the application +## Run the application Now we are ready to run the application, but in Visual Studio Code you cannot just press F5. We are going to open the Visual Studio Code Terminal by clicking in the menu on Terminal -> New Terminal or by pressing Ctrl + Shift + `. In order to run the application, you should execute the following command: @@ -99,14 +100,15 @@ You could find those scripts defined in the `package.json` file and modify the ` Your first Angular application should look like this: - +First Angular App ## Additional Resources -* [Desktop to Web: Create your first Angular App](https://www.youtube.com/watch?v=dhjrAPPad54&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j) -* [Angular Application Shell](https://angular.io/tutorial/toh-pt0) + +- [Desktop to Web: Create your first Angular App](https://www.youtube.com/watch?v=dhjrAPPad54&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j) +- [Angular Application Shell](https://angular.io/tutorial/toh-pt0)
Our community is active and always welcoming to new ideas. -* [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) \ No newline at end of file +- [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/wpf-to-angular-guide/create-ui-with-components.md b/en/components/general/wpf-to-angular-guide/create-ui-with-components.md index 84b5c9a81e..7b8274ad08 100644 --- a/en/components/general/wpf-to-angular-guide/create-ui-with-components.md +++ b/en/components/general/wpf-to-angular-guide/create-ui-with-components.md @@ -12,25 +12,26 @@ When it comes to creating user interface in an Angular application you can use a Creating a UI in Angular is very similar to how we would create one in WPF. We normally use user controls, represented by the UserControl class. A `UserControl` groups markup and code into a reusable container, allowing the same interface and functionality to be used in several different places. This user control will have a .xaml file for the UI markup and a C# file for the logic, and then it may even have a resource dictionary, which would contain any type of styling information for this user control. While in Angular, we use what's called a `Component`. A component has an html file, which is used for any UI markup. It has a typescript file, which is used for its properties and logic, and then it uses a CSS file for all its styling information. Let's go ahead and see just how similar these two are. - +Component Structure On the left side, we have a WPF application, with a user control called `Sample`. It also has a resource dictionary called `SampleResources` that contains styling information. On the right side, we have an Angular application with an `AppComponent`. Let's go ahead and compare the Angular app component to that of the sample user control in the WPF application. Start by opening up the app component typescript file. We can think of this file as the code behind of the component, and the reason we think that way is because if we come over to the WPF and open up the Sample.xaml.cs, the code behind of the `Sample` user control, we can see a lot of similarities. - +Component Code Behind First we can see that we have a class that we're exporting called `AppComponent`. Now, this AppComponent also has a property in it called title. So within this class we're going to define all the properties, methods and events required for our component to run. This is extremely similar if not the exact same of a user control. We can see that we have a class, in this case called `Sample`, and within this class, we're going to define all the properties, methods and events required for the user control to function. Next, let’s move up a few lines in the typescript file and look at this little weird syntax with the little `@` symbol and then Component. This is actually called a decorator. This decorator is telling Angular how we're going to treat this class that we're exporting. In this case, we're going to treat it as a component and because we're treating it as a component, we have to provide some information in the decorator. Before we get to the information, let's first pay some attention to the very top line of the typescript file - `import { Component } from '@angular/core'`. You can think of this as a using statement. Essentially, we are importing the objects that are required for this component to function. In this case, we are importing the `Component` from the `@angular/core` module, so we can actually use the decorator for this component. That is extremely similar to a using statement inside of the code behind of our user control. We use `using` statements inside of C# to locate and use objects within our class that are required for the user control to function. Now, let's hop back inside of the component decorator. - - The line of code on line 4, is called a selector. The selector helps us determine how we're going to define these elements in html. This selector is called `app-root`, so if we go ahead and open up the index.html, we could see within the body an element called `app-root`. That element is using the selector defined in the component decorator to define an instance of this component. - - Next, on line 5, we have what's called a template URL. This is pointing to a file called `app.component.html` - the html file that represents the visual rendering of this component. This is extremely similar to the `Sample.xaml` file of the user control in WPF, where the xaml is the markup that represents how this control is going to render. - - On line 6, we see the style URLs. The style URL is pointing to a CSS file. This file represents the styling information of the component. So if we open up the `app.component.css` file, we can see that there's no styling information in here, but we can think of the CSS file as a direct mapping to a resource dictionary. The resource dictionary in XAML will contain all the styling information for the user control or elements within the user control, so that it renders according to our design. That is the exact same thing that you would do in CSS. -### Generate a component +- The line of code on line 4, is called a selector. The selector helps us determine how we're going to define these elements in html. This selector is called `app-root`, so if we go ahead and open up the index.html, we could see within the body an element called `app-root`. That element is using the selector defined in the component decorator to define an instance of this component. +- Next, on line 5, we have what's called a template URL. This is pointing to a file called `app.component.html` - the html file that represents the visual rendering of this component. This is extremely similar to the `Sample.xaml` file of the user control in WPF, where the xaml is the markup that represents how this control is going to render. +- On line 6, we see the style URLs. The style URL is pointing to a CSS file. This file represents the styling information of the component. So if we open up the `app.component.css` file, we can see that there's no styling information in here, but we can think of the CSS file as a direct mapping to a resource dictionary. The resource dictionary in XAML will contain all the styling information for the user control or elements within the user control, so that it renders according to our design. That is the exact same thing that you would do in CSS. + +## Generate a component Now that we've seen just how similar an Angular component is to a WPF user control, let's create a new component and add it to our application. If you're a desktop developer, in WPF when you want to add a new user control, you simply right click in your project and say **Add > User Control**. Well, of course if you try to do the same thing in Visual Studio Code, you do not have that option. You only have new file, new folder. That means we have to hop into our terminal and use the Angular CLI to generate our component. So let's toggle a terminal by typing `Control + Backtick`. In the terminal we just type **NG G** for generate, **C** for component, and then provide a name for our component, e.g. `sample`. @@ -40,7 +41,7 @@ ng g c sample When the command completes, you'll notice a number of things have happened. First, we have a new folder with the same name we have given to our component. We also have four new files - an html file, a SPEC file, a typescript file, and a CSS file. We also made an update to the `app.module.ts` file. - +Sample Component Look at the `sample` folder which contains our newly created component. We can see that all three files that are required for a component are there plus this extra SPEC file. This is actually a test file which we do not need for this article, so we're not going to bother with it now. We also made a modification to the app.module.ts, in which it added the sample component to the `declarations` section of our NgModule. > [!NOTE] @@ -49,6 +50,7 @@ Look at the `sample` folder which contains our newly created component. We can s Let's go back to our `sample.component.ts` file. It looks very similar to the `app.component.ts` file we covered above. In this case we have our import statement where we're importing our component. We have our component decorator where we are defining our selector as `app-sample`. We have our template URL as `sample.component.html` and we have our style URL `sample.component.css`. Let's go ahead and open up the html file where we can see a paragraph stating `sample works!`. We want to see this when we start the application so let's go to the app.component.html. We will delete most of the initial markup except for the title, and just add ``. + ```html

@@ -58,32 +60,36 @@ Let's go ahead and open up the html file where we can see a paragraph stating `s

``` -### Run the application +## Run the application By typing `npm start` in the terminal, it will compile and build our application and launch it inside the browser. If all went well, our application should be running in the browser. We have `welcome to app` - the markup from the app component and then `sample works!`. This is the markup from our sample component that we just added. Let's now change our sample component a little by changing the text to 'This sample works very well!'. + ```html

This sample works very well!

``` + Once we save and check the browser, we will see that we are indeed editing the html that is responsible for rendering the sample component. If we want to style our component, we need to look at our style URL. So let's open up our `sample.component.css` file and make the paragraph tag color red. + ```css p { color: red; } ``` + Once we save that and open up the browser, we should see that the styling in the CSS file has been applied to our sample component. ## Additional Resources -* [Desktop to Web: Create your UI with Angular components](https://www.youtube.com/watch?v=z1SZUezpRXY&t) -* [Angular Introduction to Components](https://angular.io/guide/architecture-components) + +- [Desktop to Web: Create your UI with Angular components](https://www.youtube.com/watch?v=z1SZUezpRXY&t) +- [Angular Introduction to Components](https://angular.io/guide/architecture-components)
Our community is active and always welcoming to new ideas. -* [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) - +- [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/wpf-to-angular-guide/layout.md b/en/components/general/wpf-to-angular-guide/layout.md index 6c9a5e88b7..e1ab0d0d62 100644 --- a/en/components/general/wpf-to-angular-guide/layout.md +++ b/en/components/general/wpf-to-angular-guide/layout.md @@ -8,7 +8,7 @@ _keywords: angular page layout elements, ignite ui for angular, infragistics In WPF, in order to layout the elements in your application, you need to put them inside a [`Panel`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.panel?view=netframework-4.8). The panel is a container element that controls the arrangement of its child elements. In Angular, in order to customize the page layout and its child elements, you have to use CSS. Let us go through some of the most popular panels in WPF and see how we can achieve similar layout with CSS. -### StackPanel +## StackPanel The [`StackPanel`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.stackpanel?view=netframework-4.8) arranges its child elements into a single line that can be oriented horizontally or vertically. Let us add several buttons in a StackPanel and see how they look like in WPF: @@ -22,7 +22,7 @@ The [`StackPanel`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.co ``` - +WPF StackPanel If we want to achieve similar layout in Angular, we may use CSS Flexbox layout. The Flexible Box Layout Module is a powerful mechanism which allows designing a flexible responsive layout structure. In order to use the Flexbox layout, we have to define a container which has its [`display`](https://www.w3schools.com/cssref/pr_class_display.asp) property set to `flex`. Also in order to stack the items vertically, we have to set the [`flex-direction`](https://www.w3schools.com/cssref/css3_pr_flex-direction.asp) property to `column`. @@ -45,11 +45,11 @@ If we want to achieve similar layout in Angular, we may use CSS Flexbox layout. Here is the final result in the browser: - +Angular StackPanel The default value of the [`flex-direction`](https://www.w3schools.com/cssref/css3_pr_flex-direction.asp) property is `row`, which is equivalent to a StackPanel with Horizontal orientation in WPF. The flexbox also supports `row-reverse` and `column-reverse` directions which stack the items right to left and bottom to top respectively. -### WrapPanel +## WrapPanel The [`WrapPanel`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.wrappanel?view=netframework-4.8) positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Subsequent ordering happens sequentially from top to bottom or right to left, depending on the value of the Orientation property. Let us add several buttons in a WrapPanel and see how they look like in WPF: @@ -68,7 +68,7 @@ The [`WrapPanel`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.con ``` - +WPF WrapPanel In order to achieve similar result in Angular, we will use the Flexbox layout again. As in the case with StackPanel, we have to set the [`display`](https://www.w3schools.com/cssref/pr_class_display.asp) property to `flex`, but we also have to set the [`flex-wrap`](https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp) property to `wrap`. @@ -95,9 +95,9 @@ button { Here is the final result in the browser: - +Angular WrapPanel -If you want to achieve a result similar to a WrapPanel with Orientation="Vertical", you have to set the [`flex-direction`](https://www.w3schools.com/cssref/css3_pr_flex-direction.asp) property to `column`. The [`flex-flow`](https://www.w3schools.com/cssref/css3_pr_flex-flow.asp) property is a shorthand property for setting both the `flex-direction` and `flex-wrap` properties. +If you want to achieve a result similar to a WrapPanel with Orientation="Vertical", you have to set the [`flex-direction`](https://www.w3schools.com/cssref/css3_pr_flex-direction.asp) property to `column`. The [`flex-flow`](https://www.w3schools.com/cssref/css3_pr_flex-flow.asp) property is a shorthand property for setting both the `flex-direction` and `flex-wrap` properties. ```css .flex-container { @@ -108,7 +108,7 @@ If you want to achieve a result similar to a WrapPanel with Orientation="Vertica The flexbox supports some more CSS properties for aligning the items. You can learn more about them in this [tutorial](https://www.w3schools.com/css/css3_flexbox.asp). -### Grid +## Grid The [`Grid`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.grid?view=netframework-4.8) defines a flexible grid area consisting of columns and rows. Let us add several buttons in a Grid and see how they look like in WPF: @@ -135,7 +135,7 @@ The [`Grid`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls ``` - +WPF Grid In Angular, we could use the CSS Grid Layout Module, which offers a grid-based layout system, with rows and columns. In order to use the Grid layout, we have to define a container which has its [`display`](https://www.w3schools.com/cssref/pr_class_display.asp) property set to `grid` or `inline-grid`. @@ -190,7 +190,7 @@ Now we will add the rows with height of 50px each using the [`grid-template-rows If we open the application now it looks like this: - +Angular Grid You could see one important difference between the WPF and CSS grids. In WPF the default value of Grid.Row and Grid.Column is 0, while the CSS grid layout automatically assigns the next available row and column to its children. @@ -228,18 +228,19 @@ Here is the full CSS and the final result in the browser: } ``` - +Angular Grid Span The `grid-row` and `grid-column` properties are shorthand properties for the [`grid-row-start`](https://www.w3schools.com/cssref/pr_grid-row-start.asp), [`grid-row-end`](https://www.w3schools.com/cssref/pr_grid-row-end.asp), [`grid-column-start`](https://www.w3schools.com/cssref/pr_grid-column-start.asp) and [`grid-column-end`](https://www.w3schools.com/cssref/pr_grid-column-end.asp) properties. You could learn more about the CSS Grid container and item properties in the tutorials in the **Additional Resources** section. ## Additional Resources -* [CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp) -* [CSS Grid Intro](https://www.w3schools.com/css/css_grid.asp) -* [CSS Grid Container](https://www.w3schools.com/css/css_grid_container.asp) -* [CSS Grid Item](https://www.w3schools.com/css/css_grid_item.asp) + +- [CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp) +- [CSS Grid Intro](https://www.w3schools.com/css/css_grid.asp) +- [CSS Grid Container](https://www.w3schools.com/css/css_grid_container.asp) +- [CSS Grid Item](https://www.w3schools.com/css/css_grid_item.asp)
Our community is active and always welcoming to new ideas. -* [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) \ No newline at end of file +- [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/wpf-to-angular-guide/one-way-binding.md b/en/components/general/wpf-to-angular-guide/one-way-binding.md index ed1ed1f071..2ed54e023e 100644 --- a/en/components/general/wpf-to-angular-guide/one-way-binding.md +++ b/en/components/general/wpf-to-angular-guide/one-way-binding.md @@ -6,13 +6,15 @@ _keywords: one-way data binding in angular, ignite ui for angular, infragistics # What is one-way data binding in Angular -One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data. This is similar to the one-way binding in WPF. +One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data. This is similar to the one-way binding in WPF. > [!Video https://www.youtube.com/embed/fP7iVhFNTOk] -### What is Angular data binding? +## What is Angular data binding? + Data binding is widely used by programmers as this type of services significantly streamlines the process of updating any UI and also reduces the amount of boilerplate when building an app. Data binding in Angular is super easy, and unlike in WPF we don't have to worry about a data context, a view model, or `INotifyPropertyChanged` (INPC). All we have to worry about is an HTML file and a typescript file. With any data binding, the first thing you need are properties to bind to. So let's add a property called `text` into the component class, and set its value. In WPF, we need to set the DataContext and bind the property in XAML: + ```csharp public class IgniteUIClass { @@ -30,10 +32,13 @@ public MainWindow() this.DataContext = new IgniteUIClass(); } ``` + ```xml ``` + In Angular, we are directly binding a DOM property to a component's property: + ```typescript export class SampleComponent implements OnInit { @@ -43,41 +48,56 @@ export class SampleComponent implements OnInit { ngOnInit() {} } ``` + ```html

{{ text }}

``` -### Angular Data Binding Interpolation +## Angular Data Binding Interpolation In the code from above, we simply display some text in the HTML by using a binding to the value of the `text` property. In this case, we are using `interpolation` to create a one-way binding. We do this by typing double curly braces, the name of the property - in our case `text`, and two closing curly braces. Another way to achieve the same result is to create h2 tag and bind the `text` property to its innerHTML property, by using the `interpolation` syntax again: + ```html

``` -There are two important things about `interpolation`. + +There are two important things about `interpolation`. + - First, everything inside the curly braces is rendered as a `string`. - Second, everything inside the curly braces is referred to as a `template expression`. This allows us to do more complex things, such as concatenation. For example, let's concatenate some text with the value of the `text` property: + ```html

{{"Welcome to " + text }}

``` + The use of template expressions allows us to bind to javascript properties and methods as well. For example, we can bind to the `text` property's length which will result in the number 20: + ```html

{{ text.length }}

``` + We can also bind to methods of that property, for example to `toUpperCase()`: + ```html

{{ text.toUpperCase() }}

``` + This is a lot more powerful than the data binding in WPF and a lot easier to use too. We can even make mathematical calculations inside the template expression. For example, we can simply put **2 + 2** into the expression, and it will display the result, which is equal to 4: + ```html

{{ 2 + 2 }}

``` + One more thing that we can do is to bind to actual methods from the typescript file. Here is a short example on how to achieve this: + ```html

{{ getTitle() }}

``` + This `getTitle()` is a method defined in the typescript file. The result on the page is the returned value of that method: + ```typescript getTitle() { return 'Simple Title'; @@ -86,6 +106,7 @@ getTitle() { Although the `interpolation` looks quite powerful, it has its limitations, for example - it only represents a **string**. So let's create a simple boolean property in the component class: + ```typescript export class SampleComponent implements OnInit { @@ -94,32 +115,37 @@ export class SampleComponent implements OnInit { constructor() { } ... ``` + We will now create a simple `input` of type text and bind the `isDisabled` property to the input's `disabled` property: + ```html ``` + The expected result is that the `input` should be enabled, but it's disabled. This is because the `interpolation` returns a string, but the input's disabled property is of boolean type and it requires a boolean value. -In order for this to work correctly, Angular provides `property binding`. +In order for this to work correctly, Angular provides `property binding`. -### Angular Property Binding +## Angular Property Binding Property binding in Angular is used to bind values for target properties of HTML elements or directives. The syntax here is a bit different than that of interpolation. With property binding, the property name is wrapped into square brackets, and its value does not contain curly braces - just the name of the property that it is bound to. ```html ``` + By using property binding, the input's `disabled` property is bound to a boolean result, **not** a string. The `isDisabled` value is false and running the app would display the input as enabled. > [!NOTE] > It is very important to remember that when a binding relies on the data type result, then a `property binding` should be used! If the binding simply relies on a string value, then `interpolation` should be used. ## Additional Resources -* [Desktop to Web: One-way data binding with Angular interpolation and property binding](https://www.youtube.com/watch?v=fP7iVhFNTOk&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j) -* [Two-way binding in Angular](two-way-binding.md) -* [Angular Displaying Data](https://angular.io/guide/displaying-data#displaying-data) + +- [Desktop to Web: One-way data binding with Angular interpolation and property binding](https://www.youtube.com/watch?v=fP7iVhFNTOk&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j) +- [Two-way binding in Angular](two-way-binding.md) +- [Angular Displaying Data](https://angular.io/guide/displaying-data#displaying-data)
Our community is active and always welcoming to new ideas. -* [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) +- [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/wpf-to-angular-guide/structural-directives.md b/en/components/general/wpf-to-angular-guide/structural-directives.md index df9ef3f62f..588043c2ea 100644 --- a/en/components/general/wpf-to-angular-guide/structural-directives.md +++ b/en/components/general/wpf-to-angular-guide/structural-directives.md @@ -12,25 +12,32 @@ When it comes to control the appearance of the visual tree elements’ appearanc In this topic, we are going to demonstrate the following three structural directives - `ngIf`, `ngSwitch` and `ngFor`. As one can tell from their names, each of these can be compared to a C# structure. The `ngIf` is the same thing as an "if-else" C# code block, the `ngSwitch` is the same thing as the C# switch-case statement and, lastly, the `ngFor` is the exact same thing as a C# "for-loop". -### `ngIf` Directive +## `ngIf` Directive + Let’s explore each of these directives, starting with the `ngIf`. This directive allows us to show or hide elements based on a boolean condition. We will start by creating a "div" element with an "h2" tag containing a name. + ```html

John

``` + If we save this, our browser will render the name John. However, let’s say we have some type of boolean expression that we want to base the condition of the visibility of this "h2" tag on. For example, we are going to add a property called "isFirstName" and set it to false. In order to tell our div to be rendered when isFirstName equals true, we should use the following syntax `*ngIf = "isFirstName"`. + ```typescript public isFirstName = false; ``` + ``` html

John

``` + Once we save the files, and because isFirstName is false, we will see that the name is no longer rendered in the browser. However, if we were to update isFirstName to be true, the "John" first name will be rendered in the browser. If we set isFirstName back to false, we'll notice that the first name is no longer rendered in our browser, instead it's empty. That's the default behavior of the `ngif` statement - if the expression is true we render the provided template otherwise it's empty. If we were to achieve the same behavior with WPF, we would need to use a visibility converter. The code would look similar to the following: + ```cs public bool IsFirstName { get; set; } public Sample() @@ -40,6 +47,7 @@ public Sample() this.IsFirstName = true; } ``` + ```xml @@ -48,7 +56,8 @@ public Sample() ``` -In Angular, it is a lot easier and more straightforward. + +In Angular, it is a lot easier and more straightforward. Let's create a requirement that states if the `isFirstName` property is false we want to provide a last name instead. To do that we're going to take advantage of the "else" clause of the `ngIf` directive. Let's start by creating an `ng-template` defining an "h2" tag which contains the last name. An `ng-template` is simply a placeholder that allows us to define content that is not part of the DOM, but can be added via code such as using the `ngIf` directive. But, in order to use this in the directive, we need to give it a template reference variable name such as "lastname". Now that we have named our `ng-template`, let's go into our `ngIf` directive, add "**; else lastname**" and save this. Because "isFirstName" is false, we are saying **else use the lastname**, which means are using the template with the last name. @@ -60,6 +69,7 @@ Let's create a requirement that states if the `isFirstName` property is false we

Doe

``` + Now, another way we can write this is we can say "**isFirstName; then firstname; else lastname**". So in order to do that, we need to create another template called "firstname". ```html @@ -72,9 +82,11 @@ Now, another way we can write this is we can say "**isFirstName; then firstname;

Doe

``` + If we change "isFirstName" to true, the first name will be rendered in the browser. And one final tip on using the `ngIf` directive is that the expression is not limited to a single property - you can actually use multiple properties and/or functions as long as the expression as a whole returns a boolean result. For example we can even use logical operators such as `" && isValid || getIsValidName()"`. -### `ngSwitch` Directive +## `ngSwitch` Directive + The next directive we will discuss is the `ngSwitch` directive. This allows us to compare one expression to multiple expressions to decide which templates to add or remove. Let’s say we have "h2" elements that represent makes of cars – Chevy, Ford and GMC. We would like to display only one of these items based on a value of a "make" property which we have defined in our typescript file with a default value of "Chevy". To achieve this we need to use the `ngSwitch` directive with the following syntax `[ngSwitch] = expression` where expression is our "make" property. Adding this to the "div" element wrapping the "h2" tags is not enough. Like in WPF, we need to add some "case" statements to each "h2" element. The syntax for that is `*ngSwitchCase = expression`. In this case, we are comparing directly against text, so we will add single quotes around the value which means that the final result would be `*ngSwitchCase = "'Chevy'"` /similar for the other two values/. @@ -89,61 +101,72 @@ make = "Chevy";

GMC

``` + Once we save that, we are only going to see the Chevy option rendered in the browser because the value of our "make" property is set to "Chevy". If we change it, to say "GMC", and save that, only the GMC option will be rendered in the browser. Now, what happens if we add an option that is not available, say the "Lambo". Nothing would be rendered because that did not match any of our conditions. When we normally use a switch statement inside of C#, we have not only the case but also default value. The same is available in Angular – we can add another option with the "Not Found" text and mark it with the `*ngSwitchDefault` which will act as the default value if none of the other values are found. ```html

Not Found

``` + In this case, if we are looking for Lambo, we don't have the Lambo option, so we switch to the default case which is “Not found”, and “Not found” is rendered in our browser. One thing we need to point out is that these are expressions so we can use even a function as long as it returns a result that matches the expression we are passing in. Pretty simple! -### `ngFor` Directive +## `ngFor` Directive Next up is the `ngFor` directive. This directive allows us to iterate through a collection of objects and add a template for each item in that collection. Let's start by adding a collection of objects in our typescript file. We are going to call this an array of makes and add Chevy, Ford, GMC and Dodge. Next we will create a "div" and for each "div" we're going to create an "h2" tag that lists out the name of that make. To do that we are going to use the `ngFor` directive - the syntax for that `*ngFor="let make of makes"`. That provides us the ability to use interpolation to use the "make" property that is defined via the "let make" portion of the expression and print that out in the "h2" tag. + ```typescript makes = ["Chevy", "Ford", "GMC", "Dodge"]; ``` + ```html

{{ make }}

``` + If all went well, we should see that for each item in that array we are using an h2 tag to represent that in the browser. In addition, the `ngFor` directive provides a few helper items that allow us to get more information about that collection such as: -- "index as i" - allows us to determine what the index of each item is + +- "index as i" - allows us to determine what the index of each item is ```html

{{ i }} - {{ make }}

``` -- "first as f" - allows us to get whether the item is the first one in the collection + +- "first as f" - allows us to get whether the item is the first one in the collection ```html

{{ f }} - {{ make }}

``` -- "last as l" - you can also get the last row or the last item in the collection + +- "last as l" - you can also get the last row or the last item in the collection ```html

{{ l }} - {{ make }}

``` -- "odd as o" or "even as e" - allow us to determine if the item in the collection is in an odd position or an even position + +- "odd as o" or "even as e" - allow us to determine if the item in the collection is in an odd position or an even position ```html

{{ o }} - {{ make }}

``` + That's how easy it is to add and remove elements to your view in your angular application - just use a structural directive and you are done. ## Additional Resources -* [Desktop to Web: Structural Directives in Angular](https://www.youtube.com/watch?v=vQe7R78Od8k&t) -* [Angular Structural Directives](https://angular.io/guide/structural-directives) + +- [Desktop to Web: Structural Directives in Angular](https://www.youtube.com/watch?v=vQe7R78Od8k&t) +- [Angular Structural Directives](https://angular.io/guide/structural-directives)
Our community is active and always welcoming to new ideas. -* [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) \ No newline at end of file +- [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/wpf-to-angular-guide/two-way-binding.md b/en/components/general/wpf-to-angular-guide/two-way-binding.md index 9871aae0ae..8ff2823839 100644 --- a/en/components/general/wpf-to-angular-guide/two-way-binding.md +++ b/en/components/general/wpf-to-angular-guide/two-way-binding.md @@ -10,16 +10,18 @@ The two-way data binding in Angular enables data to flow from the component to t > [!Video https://www.youtube.com/embed/MrjTTDEj7cA] -### How does data binding work in Angular? +## How does data binding work in Angular? -Angular data binding works by synchronizing the data in the [angular components](https://www.infragistics.com/products/ignite-ui-angular) with the UI. This way it can always show the current value of the data. In terms of the two-way binding, the automatic data synchronization happens between the Model and the View, keeping both synced all the time. Because of this, any change made in the Model is immediately reflected in the View as well. And vice versa – changes made in the View are updated in the Model too. +Angular data binding works by synchronizing the data in the [angular components](https://www.infragistics.com/products/ignite-ui-angular) with the UI. This way it can always show the current value of the data. In terms of the two-way binding, the automatic data synchronization happens between the Model and the View, keeping both synced all the time. Because of this, any change made in the Model is immediately reflected in the View as well. And vice versa – changes made in the View are updated in the Model too. The two-way data binding in Angular is used to display information to the end user and allows the end user to make changes to the underlying data using the UI. This makes a two-way connection between the view (the template) and the component class. This is similar to the two-way binding in WPF. A one-way binding is taking the state from our component class and displaying it in our view. Let's look at this code: + ```html

{{ text }}

``` + ```typescript export class SampleComponent implements OnInit { @@ -30,25 +32,31 @@ keyup(value) { } ... ``` + Here we are simply using `interpolation` to bind the text property to the HTML. This will display the value of the text property in the UI. The `input` element handles the user interaction and updates the underlying `text` property through the UI by using the [event binding](angular-events.md). Essentially, the input does the opposite of the one-way binding, it takes the information from the UI and updates the property in the component class. The method which is hooked up to the input's keyup event updates the text property each time the event occurs. Once the text property value is changed by the event method, that change is reflected in the UI by the one-way binding using `interpolation` of the h2 element. So if the user types something into the input element, that will immediately update the h2 text - this behavior is basically a simulation of a two-way binding. The same can also be achieved in WPF by using a one-way binding and a keyup event handler, but the two-way binding is way more convenient to use. -### How to implement two-way data binding in Angular +## How to implement two-way data binding in Angular Fortunately, we can implement the logic of the sample from above in a much easier way and this is where the two-way binding steps in! The direction of a two-way binding is not just **component class to UI**, but **UI to component class** as well. To achieve this, we are going to use a [directive](https://angular.io/api/core/Directive) called [`ngModel`](https://angular.io/api/forms/NgModel). Let's update the sample from above with the `ngModel` directive. The syntax for that is - an open bracket followed by an open parenthesis, and of course the corresponding closing parenthesis and bracket. This is called a **banana in the box**, so let's see it in action! + ```html

{{ text }}

``` + And the equivalent bindings in WPF would be: + ```xml ``` + The Angular binding is a matter of syntax, and in WPF it is more like a setup - in particular the value of `Binding.Mode`. If we run this code, an error would occur in the console - saying that the `ngModel` is an unknown property of the input element. This is due to the fact, that in order to use the `ngModel` directive, it's necessary to import the [`FormsModule`](https://angular.io/api/forms/FormsModule). It needs to be imported into the `app.module.ts` file: + ```typescript import { FormsModule } from '@angular/forms'; ... @@ -58,23 +66,27 @@ import { FormsModule } from '@angular/forms'; FormsModule ] ... -``` +``` + If we run the sample, the initial input's value would be equal to **default value**, which is the `text` property's value. Since the input is editable, changing its value will reflect over the h2 element immediately. So typing into the input updates the `text` property, and then the h2 element displays that value via the `interpolation`. Another equivalent way to achieve this is: + ```html ``` + This is actually similar to the first sample, which used a property binding and an event binding. ## Additional Resources -* [Desktop to Web: Desktop to Web: Angular Two-Way Binding with ngModel](https://www.youtube.com/watch?v=MrjTTDEj7cA&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j) -* [One-way binding in Angular](one-way-binding.md) -* [Angular NgModel](https://angular.io/api/forms/NgModel) + +- [Desktop to Web: Desktop to Web: Angular Two-Way Binding with ngModel](https://www.youtube.com/watch?v=MrjTTDEj7cA&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j) +- [One-way binding in Angular](one-way-binding.md) +- [Angular NgModel](https://angular.io/api/forms/NgModel)
Our community is active and always welcoming to new ideas. -* [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) +- [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/wpf-to-angular-guide/wpf-to-angular-guide.md b/en/components/general/wpf-to-angular-guide/wpf-to-angular-guide.md index a45c6d8336..8b5b1a30d6 100644 --- a/en/components/general/wpf-to-angular-guide/wpf-to-angular-guide.md +++ b/en/components/general/wpf-to-angular-guide/wpf-to-angular-guide.md @@ -9,39 +9,40 @@ _keywords: wpf to angular tutorial, igniteui for angular, infragistics WPF to Angular tutorial is the first step that you should take in order to make a smooth transition from a `desktop` to `web` framework transition. The tutorial targets WPF developers, who make their first steps to web development and it examines some differences and similarities of both frameworks - applications structure, data binding, events, components, etc.

- + WPF to Angular Guide

The guide is divided into the following topics and has included video tutorials: -#### [Create your first Angular application](create-first-angular-app.md) +## [Create your first Angular application](create-first-angular-app.md) Before you begin on your path of learning Angular, you’ll need to install the prerequisites for modern web app dev with Angular. This section covers using the Node.js package manager, installing the Visual Studio Code IDE, and a few of the basic concepts that are necessary for modern web development. Check out the [video tutorial](https://youtu.be/dhjrAPPad54) for this topic. -#### [Create your UI with Angular components](create-ui-with-components.md) +## [Create your UI with Angular components](create-ui-with-components.md) + Creating a UI in Angular is very similar to how we would create one in WPF. We normally use user controls, represented by the UserControl class. A UserControl groups markup and code into a reusable container, allowing the same interface and functionality to be used in several different places. Understanding components in Angular is key to the rest of this series – so let’s get started by understanding how WPF components translate to components in Angular. Check out the [video tutorial](https://youtu.be/z1SZUezpRXY) for this topic. -#### [One-way data binding in Angular](one-way-binding.md) +## [One-way data binding in Angular](one-way-binding.md) One of the most powerful and widely used features in WPF is data binding. It makes a developers' life much easier, by synchronizing the business logic with the view and vice versa, without having to write a single extra line of code. Without the power of it, WPF would just be a better-looking Windows Forms. Luckily, Angular supports data binding! There are two types of data binding - one-way binding and two-way binding. This section shows you how to accomplish one-way data binding and how it compares to WPF. Check out the [video tutorial](https://youtu.be/fP7iVhFNTOk) for this topic. -#### [Angular Events](angular-events.md) +## [Angular Events](angular-events.md) Binding to user input events is core to every app. It’s hard to imagine writing a new app that doesn’t respond to some type of user interaction one way or another. The most common way to do that is with some type of event system. WPF provides routed events, CLR events, and commands. While in Angular, there are DOM events. This section you’ll learn about DOM events and how to handle user inputs. Check out the [video tutorial](https://youtu.be/V1Futz4W400) for this topic. -#### [Two-way data binding in Angular](two-way-binding.md) +## [Two-way data binding in Angular](two-way-binding.md) In Angular, one-way binding updates the view with data coming from the component class. Like WPF, we can do the opposite operation - update the component class from the view. In that case we need to use a two-way binding. This section compares two-way binding in WPF and shows how easy it is to get started. Check out the [video tutorial](https://youtu.be/MrjTTDEj7cA) for this topic. -#### [Transforming Data with Angular Pipes](angular-pipes.md) +## [Transforming Data with Angular Pipes](angular-pipes.md) In WPF we use a IValueConverter to transform data, in an Angular application, we use Angular Pipes. The pipe is very similar to the WPF converter. It takes data as an input and then transforms that data into a desired output for display. This section shows some of the pre-defined Angular Pipes, and how to use them in an app. Check out the [video tutorial](https://youtu.be/Gmz5kio50FE) for this topic. -#### [Structural Directives in Angular](structural-directives.md) +## [Structural Directives in Angular](structural-directives.md) As WPF developers, anytime we want to add or remove an element from the visual tree we have to jump into some code-behind and write some C# or we can use a combination of binding and a visibility converter, which again requires some custom logic and static resources. That's the way we have always done it in WPF, but Angular makes it so much easier. This section demonstrates how structural directives enable the manipulation of elements in an Angular app. Check out the [video tutorial](https://youtu.be/vQe7R78Od8k) for this topic. -#### [Layout Elements](layout.md) +## [Layout Elements](layout.md) In WPF, in order to layout the elements in your application, you need to put them inside a Panel. In Angular, we use CSS. This topic discusses Layout, and how to use CSS features like Flexbox and CSS Grid. @@ -49,5 +50,5 @@ In WPF, in order to layout the elements in your application, you need to put the
Our community is active and always welcoming to new ideas. -* [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) \ No newline at end of file +- [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/geo-map-binding-data-csv.md b/en/components/geo-map-binding-data-csv.md index 9e00efe8c1..9294f0bdfc 100644 --- a/en/components/geo-map-binding-data-csv.md +++ b/en/components/geo-map-binding-data-csv.md @@ -129,10 +129,10 @@ export class MapBindingDataCsvComponent implements AfterViewInit { ## API References -* [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) -* `DataSource` -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) -* [`heatMaximumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor) -* [`heatMinimumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) -* [`pointExtent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#pointExtent) +- [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- `DataSource` +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) +- [`heatMaximumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor) +- [`heatMinimumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) +- [`pointExtent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#pointExtent) diff --git a/en/components/geo-map-binding-data-json-points.md b/en/components/geo-map-binding-data-json-points.md index 1a762271da..74f446bb91 100644 --- a/en/components/geo-map-binding-data-json-points.md +++ b/en/components/geo-map-binding-data-json-points.md @@ -120,9 +120,9 @@ export class MapBindingDataJsonPointsComponent implements AfterViewInit { ## API References -* [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) -* [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) -* `GeographicMap` -* `DataSource` -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) +- [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- `GeographicMap` +- `DataSource` +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) diff --git a/en/components/geo-map-binding-data-model.md b/en/components/geo-map-binding-data-model.md index 703187a6cd..702c41d19f 100644 --- a/en/components/geo-map-binding-data-model.md +++ b/en/components/geo-map-binding-data-model.md @@ -166,15 +166,15 @@ export class MapBindingDataModelComponent implements AfterViewInit { ## API References -* [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) -* [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) -* [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) -* [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) -* [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) -* [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) -* `ItemsSource` -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) -* [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) -* [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) +- [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) +- [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) +- [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) +- [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) +- [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) +- [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) diff --git a/en/components/geo-map-binding-data-overview.md b/en/components/geo-map-binding-data-overview.md index f58ddfa185..23fb9e58a0 100644 --- a/en/components/geo-map-binding-data-overview.md +++ b/en/components/geo-map-binding-data-overview.md @@ -13,8 +13,8 @@ The Ignite UI for Angular map component is designed to display geo-spatial data The following section list some of data source that you can bind in the geographic map component -- [Binding Shape Files](geo-map-binding-shp-file.md) -- [Binding JSON Files](geo-map-binding-data-json-points.md) -- [Binding CSV Files](geo-map-binding-data-csv.md) -- [Binding Data Models](geo-map-binding-data-model.md) -- [Binding Multiple Sources](geo-map-binding-multiple-sources.md) +- [Binding Shape Files](geo-map-binding-shp-file.md) +- [Binding JSON Files](geo-map-binding-data-json-points.md) +- [Binding CSV Files](geo-map-binding-data-csv.md) +- [Binding Data Models](geo-map-binding-data-model.md) +- [Binding Multiple Sources](geo-map-binding-multiple-sources.md) diff --git a/en/components/geo-map-binding-multiple-shapes.md b/en/components/geo-map-binding-multiple-shapes.md index 864b0282f4..3bcd444b17 100644 --- a/en/components/geo-map-binding-multiple-shapes.md +++ b/en/components/geo-map-binding-multiple-shapes.md @@ -23,9 +23,9 @@ In the Ignite UI for Angular map, you can add multiple geographic series objects This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) object. -* [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) – displays locations of major cities -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) – displays routes between major ports -* [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) – displays shapes of countries of the world +- [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) – displays locations of major cities +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) – displays routes between major ports +- [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) – displays shapes of countries of the world You can use geographic series in above or other combinations to plot desired data. @@ -362,7 +362,7 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit { ## API References -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) -* [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) -* [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) -* [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/en/components/geo-map-binding-multiple-sources.md b/en/components/geo-map-binding-multiple-sources.md index 93ab664540..e8b461439d 100644 --- a/en/components/geo-map-binding-multiple-sources.md +++ b/en/components/geo-map-binding-multiple-sources.md @@ -22,9 +22,9 @@ In the Ignite UI for Angular map, you can add multiple geographic series objects This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data: -* [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) – displays locations of major airports -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) – displays flights between airports -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) – displays gridlines of major coordinates +- [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) – displays locations of major airports +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) – displays flights between airports +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) – displays gridlines of major coordinates You can use geographic series in this or other combinations to plot desired data. @@ -203,5 +203,5 @@ export class MapBindingMultipleSourcesComponent implements AfterViewInit { ## API References -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) -* [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) diff --git a/en/components/geo-map-binding-shp-file.md b/en/components/geo-map-binding-shp-file.md index 3026f8daf7..239511ceea 100644 --- a/en/components/geo-map-binding-shp-file.md +++ b/en/components/geo-map-binding-shp-file.md @@ -45,7 +45,7 @@ The [`IgxShapefileRecord`]({environment:dvApiBaseUrl}/products/ignite-ui-angular | Property | Description | |--------------|---------------| -|`Points`|Contains all the points in one geo-spatial shape loaded from a shape file (.shp). For example, the country of Japan in shape file would be represented as a list of a list of points object, where:
  • The first list of points describes shape of Hokkaido island
  • The second list of points describes shape of Honshu island
  • The third list of points describes shape of Kyushu island
  • The fourth list of points describes shape of Shikoku island +|`Points`|Contains all the points in one geo-spatial shape loaded from a shape file (.shp). For example, the country of Japan in shape file would be represented as a list of a list of points object, where:
    • The first list of points describes shape of Hokkaido island
    • The second list of points describes shape of Honshu island
    • The third list of points describes shape of Kyushu island
    • The fourth list of points describes shape of Shikoku island
      • |
    | | `Fields` |Contains a row of data from the shape database file (.dbf) keyed by a column name. For example, a data about county of Japan which includes population, area, name of a capital, etc.| @@ -140,9 +140,9 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit { ## API References -* `Fields` -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) -* `ImportCompleted` -* `ItemsSource` -* `Points` -* [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) +- `Fields` +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- `ImportCompleted` +- `ItemsSource` +- `Points` +- [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/en/components/geo-map-display-azure-imagery.md b/en/components/geo-map-display-azure-imagery.md index bf7e9ba431..ad69eccd2f 100644 --- a/en/components/geo-map-display-azure-imagery.md +++ b/en/components/geo-map-display-azure-imagery.md @@ -11,7 +11,7 @@ The Angular [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-u ## Angular Displaying Imagery from Azure Maps Example - +Angular Displaying Imagery from Azure Maps Example
    @@ -22,7 +22,7 @@ The Angular [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-u -## Code Snippet +## Angular Displaying Imagery from Azure Maps Example Code Snippet The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) class. @@ -51,23 +51,23 @@ this.map.backgroundContent = tileSource; When working with the [`IgxGeographicTileSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html), you can combine **overlays** (traffic, weather, labels) on top of a **base map style** such as eg. **Satellite**, **Road**, or **DarkGrey**. Using **TerraOverlay** with eg. **Satellite** to visualize terrain. -* **Base Styles**: Satellite, Road, Terra, and DarkGrey provide the core background tiles. -* **Overlay Styles**: Traffic and Weather imagery (e.g., `TrafficRelativeOverlay`, `WeatherRadarOverlay`) are designed to be layered on top of a base style by assigning them to a tile series. -* **Hybrid Styles**: Variants like `HybridRoadOverlay` and `HybridDarkGreyOverlay` already combine a base style with overlays (labels, roads, etc.), so you don’t need to manage multiple layers manually. +- **Base Styles**: Satellite, Road, Terra, and DarkGrey provide the core background tiles. +- **Overlay Styles**: Traffic and Weather imagery (e.g., `TrafficRelativeOverlay`, `WeatherRadarOverlay`) are designed to be layered on top of a base style by assigning them to a tile series. +- **Hybrid Styles**: Variants like `HybridRoadOverlay` and `HybridDarkGreyOverlay` already combine a base style with overlays (labels, roads, etc.), so you don’t need to manage multiple layers manually. This design allows you to build richer maps, for example: -* Displaying **Satellite imagery** with a **TrafficOverlay** to highlight congestion on real-world images. -* Using **Terra** with **WeatherRadarOverlay** to visualize terrain with precipitation. -* Applying **DarkGrey** with **LabelsRoadOverlay** for a dashboard-friendly, contrast-heavy view. +- Displaying **Satellite imagery** with a **TrafficOverlay** to highlight congestion on real-world images. +- Using **Terra** with **WeatherRadarOverlay** to visualize terrain with precipitation. +- Applying **DarkGrey** with **LabelsRoadOverlay** for a dashboard-friendly, contrast-heavy view. - +Azure Traffic Tile Series With Background
    -## Code Snippet +## Angular Displaying Tile Series Overlays over Imagery from Azure Maps Example Code Snippet -The following code snippet shows how to display geographic imagery tiles ontop of a background imagery joining eg. traffic with a dark grey map for the Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) and [`IgxGeographicTileSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html) classes. +The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) and [`IgxGeographicTileSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html) classes. ```html @@ -106,10 +106,10 @@ The following table summarizes properties of the [`IgxAzureMapsImagery`]({enviro | Property Name | Property Type | Description | |----------------|-----------------|---------------| |[`apiKey`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#apiKey)|string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| -|[`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle)|[`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html)|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) enumeration values:
    • Satellite - Specifies the Satellite map style without road or labels overlay
    • Road - Specifies the Aerial map style with road and labels overlay
    • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
    • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
    • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
    • HybridRoadOverlay - Satellite background combined with road and label overlays
    • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
    • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
    • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
    • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
    • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
    • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
    • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
    • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
    +|[`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle)|[`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html)|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) enumeration values:
    • Satellite - Specifies the Satellite map style without road or labels overlay
    • Road - Specifies the Aerial map style with road and labels overlay
    • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
    • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
    • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
    • HybridRoadOverlay - Satellite background combined with road and label overlays
    • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
    • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
    • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
    • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
    • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
    • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
    • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
    • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
    • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
    | ## API References -* [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) -* [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) +- [`IgxAzureMapsImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-display-bing-imagery.md b/en/components/geo-map-display-bing-imagery.md index 84707ff5d4..2f8d03fa96 100644 --- a/en/components/geo-map-display-bing-imagery.md +++ b/en/components/geo-map-display-bing-imagery.md @@ -19,7 +19,7 @@ The Angular [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite - +Angular Displaying Imagery from Bing Maps Example
    @@ -75,6 +75,6 @@ The following table summarized properties of the [`IgxBingMapsMapImagery`]({envi ## API References -* [`BingMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.bingmapsimagerystyle.html) -* [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`BingMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.bingmapsimagerystyle.html) +- [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-display-esri-imagery.md b/en/components/geo-map-display-esri-imagery.md index b383b0fcbd..27ffa94383 100644 --- a/en/components/geo-map-display-esri-imagery.md +++ b/en/components/geo-map-display-esri-imagery.md @@ -63,5 +63,5 @@ this.geoMap.backgroundContent = tileSource; ## API References -* [`IgxArcGISOnlineMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxarcgisonlinemapimagery.html) -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxArcGISOnlineMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxarcgisonlinemapimagery.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-display-heat-imagery.md b/en/components/geo-map-display-heat-imagery.md index d3bf984575..4a90435bfd 100644 --- a/en/components/geo-map-display-heat-imagery.md +++ b/en/components/geo-map-display-heat-imagery.md @@ -139,14 +139,14 @@ constructor() { ## API References -* [`IgxGeographicTileSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html) -* [`IgxHeatTileGenerator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html) -* [`maximumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#maximumColor) -* [`minimumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#minimumColor) -* [`IgxShapefileRecord`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) -* [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) -* [`IgxTileGeneratorMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxtilegeneratormapimagery.html) -* [`tileGenerator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxtilegeneratormapimagery.html#tileGenerator) -* [`tileImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html#tileImagery) -* [`useBlurRadiusAdjustedForZoom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#useBlurRadiusAdjustedForZoom) -* [`useLogarithmicScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#useLogarithmicScale) +- [`IgxGeographicTileSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html) +- [`IgxHeatTileGenerator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html) +- [`maximumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#maximumColor) +- [`minimumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#minimumColor) +- [`IgxShapefileRecord`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) +- [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) +- [`IgxTileGeneratorMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxtilegeneratormapimagery.html) +- [`tileGenerator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxtilegeneratormapimagery.html#tileGenerator) +- [`tileImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html#tileImagery) +- [`useBlurRadiusAdjustedForZoom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#useBlurRadiusAdjustedForZoom) +- [`useLogarithmicScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#useLogarithmicScale) diff --git a/en/components/geo-map-display-osm-imagery.md b/en/components/geo-map-display-osm-imagery.md index 9f2772bc59..a88b9600d5 100644 --- a/en/components/geo-map-display-osm-imagery.md +++ b/en/components/geo-map-display-osm-imagery.md @@ -45,5 +45,5 @@ this.map.backgroundContent = tileSource; ## API References -* `BackgroundContent` -* [`IgxOpenStreetMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxopenstreetmapimagery.html) +- `BackgroundContent` +- [`IgxOpenStreetMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxopenstreetmapimagery.html) diff --git a/en/components/geo-map-navigation.md b/en/components/geo-map-navigation.md index 6f7791dece..1fec09679a 100644 --- a/en/components/geo-map-navigation.md +++ b/en/components/geo-map-navigation.md @@ -24,8 +24,8 @@ Navigation in the [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/produ You navigate map content within geographic region bound by these coordinates: -* horizontally from 180°E (negative) to 180°W (positive) longitudes -* vertically from 85°S (negative) to 85°N (positive) latitudes +- horizontally from 180°E (negative) to 180°W (positive) longitudes +- vertically from 85°S (negative) to 85°N (positive) latitudes This code snippet shows how navigate the map using geographic coordinates: @@ -33,8 +33,8 @@ This code snippet shows how navigate the map using geographic coordinates: Also, you can navigate map content within window rectangle bound by these relative coordinates: -* horizontally from 0.0 to 1.0 values -* vertically from 0.0 to 1.0 values +- horizontally from 0.0 to 1.0 values +- vertically from 0.0 to 1.0 values This code snippet shows how navigate the map using relative window coordinates: @@ -55,7 +55,7 @@ The following table summarizes properties that can be used in navigation of the ## API References -* [`actualWindowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#actualWindowRect) -* [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) -* [`zoomable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#zoomable) +- [`actualWindowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#actualWindowRect) +- [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`zoomable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#zoomable) diff --git a/en/components/geo-map-resources-esri.md b/en/components/geo-map-resources-esri.md index 70338846fc..86cdebebc0 100644 --- a/en/components/geo-map-resources-esri.md +++ b/en/components/geo-map-resources-esri.md @@ -80,5 +80,5 @@ export enum EsriStyle { ## API References -* [`IgxArcGISOnlineMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxarcgisonlinemapimagery.html) -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxArcGISOnlineMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxarcgisonlinemapimagery.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-resources-shape-styling-utility.md b/en/components/geo-map-resources-shape-styling-utility.md index 1aae00ab66..70dbad324d 100644 --- a/en/components/geo-map-resources-shape-styling-utility.md +++ b/en/components/geo-map-resources-shape-styling-utility.md @@ -252,5 +252,5 @@ export class ShapeComparison { ## API References -* [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-resources-world-connections.md b/en/components/geo-map-resources-world-connections.md index d03da2e777..d465222fd3 100644 --- a/en/components/geo-map-resources-world-connections.md +++ b/en/components/geo-map-resources-world-connections.md @@ -140,4 +140,4 @@ export default class WorldConnections { ## API References -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-resources-world-locations.md b/en/components/geo-map-resources-world-locations.md index b7d551bbed..691a87f0bb 100644 --- a/en/components/geo-map-resources-world-locations.md +++ b/en/components/geo-map-resources-world-locations.md @@ -656,4 +656,4 @@ export default class WorldLocations { ## API References -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-resources-world-util.md b/en/components/geo-map-resources-world-util.md index 5e63913a6e..67176d5817 100644 --- a/en/components/geo-map-resources-world-util.md +++ b/en/components/geo-map-resources-world-util.md @@ -194,4 +194,4 @@ export default class WorldUtils { ## API References -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-shape-files-reference.md b/en/components/geo-map-shape-files-reference.md index c938edbacc..e2eae867c8 100644 --- a/en/components/geo-map-shape-files-reference.md +++ b/en/components/geo-map-shape-files-reference.md @@ -17,23 +17,23 @@ This topic provides resources about maps and geo-spatial related material as wel Before plotting geo-spatial data in the control, one should get familiar with the following resources which provide general information about maps and geo-spatial data. -* [Wikipedia – Cartography](http://en.wikipedia.org/wiki/Cartography) +- [Wikipedia – Cartography](http://en.wikipedia.org/wiki/Cartography) -* [National Atlas of the United States – Geographic Locations](http://nationalatlas.gov/articles/mapping/a_latlong.html) +- [National Atlas of the United States – Geographic Locations](http://nationalatlas.gov/articles/mapping/a_latlong.html) -* [National Atlas of the United States – Map Projections](http://nationalatlas.gov/articles/mapping/a_projections.html) +- [National Atlas of the United States – Map Projections](http://nationalatlas.gov/articles/mapping/a_projections.html) -* [U.S. Geological Survey](http://www.usgs.gov/) +- [U.S. Geological Survey](http://www.usgs.gov/) -* [Wikipedia – Map Projections](http://en.wikipedia.org/wiki/Map_projection) +- [Wikipedia – Map Projections](http://en.wikipedia.org/wiki/Map_projection) -* [University of Colorado – Map Projections](http://www.colorado.edu/geography/gcraft/notes/mapproj/mapproj_f.html) +- [University of Colorado – Map Projections](http://www.colorado.edu/geography/gcraft/notes/mapproj/mapproj_f.html) -* [CSISS – Map Projections](http://www.csiss.org/map-projections/index.html) +- [CSISS – Map Projections](http://www.csiss.org/map-projections/index.html) ## Shape Files Format -The Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control uses popular [Shape Files](http://en.wikipedia.org/wiki/Shapefile#Overview) format as one of the sources for geo-spatial data. Shape files are usually shipped with other file types, generally files with *.shp*, *.shx*, and *.dbf* extensions. +The Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control uses popular [Shape Files](http://en.wikipedia.org/wiki/Shapefile#Overview) format as one of the sources for geo-spatial data. Shape files are usually shipped with other file types, generally files with _.shp_, _.shx_, and _.dbf_ extensions. The following table provides basic information and purpose for each type of shape files. @@ -45,67 +45,67 @@ The following table provides basic information and purpose for each type of shap Refer to the following resources for detailed information and specifications on how geo-spatial data is stored in shape files. -* [ESRI - Shape File Technical Description](http://www.esri.com/library/whitepapers/pdfs/shapefile.pdf) +- [ESRI - Shape File Technical Description](http://www.esri.com/library/whitepapers/pdfs/shapefile.pdf) -* [Wikipedia - Shape File Description](http://en.wikipedia.org/wiki/Shapefile#Overview) +- [Wikipedia - Shape File Description](http://en.wikipedia.org/wiki/Shapefile#Overview) ## Shape File Tools The following list provides resource tools for editing shape files. -* [MapWindow – Shape (.shp) and Database (.dbf) File Editor](http://www.mapwindow.org/) +- [MapWindow – Shape (.shp) and Database (.dbf) File Editor](http://www.mapwindow.org/) -* [Open Office – Database (.dbf) File Editor](http://openoffice.org/) +- [Open Office – Database (.dbf) File Editor](http://openoffice.org/) -* [DBF Editor - Database (.dbf) File Editor](http://dbfeditor.com/) +- [DBF Editor - Database (.dbf) File Editor](http://dbfeditor.com/) -* [DBF View - Database (.dbf) File Editor](http://dbfview.com/view-dbf-file.html) +- [DBF View - Database (.dbf) File Editor](http://dbfview.com/view-dbf-file.html) -* [Satellite Signals – Geo-spatial Calculator](http://www.satsig.net/degrees-minutes-seconds-calculator.htm) +- [Satellite Signals – Geo-spatial Calculator](http://www.satsig.net/degrees-minutes-seconds-calculator.htm) -* [RITA – NORTAD to Shape Files Converter](http://www.bts.gov/publications/north_american_transportation_atlas_data/html/data_converter.html) +- [RITA – NORTAD to Shape Files Converter](http://www.bts.gov/publications/north_american_transportation_atlas_data/html/data_converter.html) ## Shape Files Data Sources The following list provides resources for obtaining shape files. Also, samples for the [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control are good source of shape files. These shape files are included in the installer for the Samples Browser. -* [ESRI - World Map Data](http://www.esri.com/data/download/basemap/index.html) +- [ESRI - World Map Data](http://www.esri.com/data/download/basemap/index.html) -* [ESRI - Census 2010 Tiger/Line® - Shape Files](http://www.census.gov/geo/www/tiger/tgrshp2010/tgrshp2010.html) +- [ESRI - Census 2010 Tiger/Line® - Shape Files](http://www.census.gov/geo/www/tiger/tgrshp2010/tgrshp2010.html) -* [National Atlas of the United States – Shape Files](http://www.nationalatlas.gov/atlasftp.html) +- [National Atlas of the United States – Shape Files](http://www.nationalatlas.gov/atlasftp.html) -* [U.S. Census Bureau – Cartographic Boundary Files](http://www.census.gov/geo/www/cob/index.html) +- [U.S. Census Bureau – Cartographic Boundary Files](http://www.census.gov/geo/www/cob/index.html) -* [U.S. Census Bureau - 2007 Tiger/Line® - Shape Files](http://www.census.gov/cgi-bin/geo/shapefiles/national-files) +- [U.S. Census Bureau - 2007 Tiger/Line® - Shape Files](http://www.census.gov/cgi-bin/geo/shapefiles/national-files) -* [U.S. Federal Executive Branch – Raw Data](https://explore.data.gov/catalog/raw/) +- [U.S. Federal Executive Branch – Raw Data](https://explore.data.gov/catalog/raw/) -* [NOAA – Shape Files](http://www.nws.noaa.gov/geodata/) +- [NOAA – Shape Files](http://www.nws.noaa.gov/geodata/) -* [CDC - Shape Files](http://wwwn.cdc.gov/epiinfo/script/shapefiles.aspx) +- [CDC - Shape Files](http://wwwn.cdc.gov/epiinfo/script/shapefiles.aspx) -* [Massachusetts Geographic Information System](http://www.mass.gov/mgis/massgis.htm) +- [Massachusetts Geographic Information System](http://www.mass.gov/mgis/massgis.htm) -* [Geo Commons – Shape Files](http://geocommons.com/searches?query=shapefiles) +- [Geo Commons – Shape Files](http://geocommons.com/searches?query=shapefiles) -* [Geo Community – Shape Files](http://data.geocomm.com/catalog/) +- [Geo Community – Shape Files](http://data.geocomm.com/catalog/) -* [RITA – NORTAD Files (Must-be converted to Shape Files)](http://www.bts.gov/publications/north_american_transportation_atlas_data/) +- [RITA – NORTAD Files (Must-be converted to Shape Files)](http://www.bts.gov/publications/north_american_transportation_atlas_data/) -* [MapCruzin – Shape Files](http://www.mapcruzin.com/download-free-arcgis-shapefiles.htm) +- [MapCruzin – Shape Files](http://www.mapcruzin.com/download-free-arcgis-shapefiles.htm) ## Additional Resources The following topics provide additional information related to this topic. -* [Binding Shape Files](geo-map-binding-shp-file.md) +- [Binding Shape Files](geo-map-binding-shp-file.md) ## API References -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) -* [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) -* `ItemsSource` -* [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) -* [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- `ItemsSource` +- [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) +- [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/en/components/geo-map-shape-styling.md b/en/components/geo-map-shape-styling.md index 766c543e34..4156e96026 100644 --- a/en/components/geo-map-shape-styling.md +++ b/en/components/geo-map-shape-styling.md @@ -33,10 +33,10 @@ import { IgxShapefileRecord } from 'igniteui-angular-core'; Note that the following code examples are using the [Shape Styling Utility](geo-map-resources-shape-styling-utility.md) file that provides four different ways of styling shapes: -* [Shape Comparison Styling](#shape-comparison-styling) -* [Shape Random Styling](#shape-random-styling) -* [Shape Range Styling](#shape-range-styling) -* [Shape Scale Styling](#shape-scale-styling) +- [Shape Comparison Styling](#shape-comparison-styling) +- [Shape Random Styling](#shape-random-styling) +- [Shape Range Styling](#shape-range-styling) +- [Shape Scale Styling](#shape-scale-styling) ## Shape Random Styling @@ -169,5 +169,5 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) ## API References -* [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-type-scatter-area-series.md b/en/components/geo-map-type-scatter-area-series.md index bb99649c26..91bc8174ef 100644 --- a/en/components/geo-map-type-scatter-area-series.md +++ b/en/components/geo-map-type-scatter-area-series.md @@ -167,13 +167,13 @@ export class MapTypeScatterAreaSeriesComponent implements AfterViewInit { ## API References -* [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) -* [`colorScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorScale) -* [`IgxCustomPaletteColorScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html) -* [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) -* [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) -* `ItemsSource` -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) -* [`trianglesSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) -* `TriangulationSource` +- [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) +- [`colorScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorScale) +- [`IgxCustomPaletteColorScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html) +- [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) +- [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) +- [`trianglesSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) +- `TriangulationSource` diff --git a/en/components/geo-map-type-scatter-bubble-series.md b/en/components/geo-map-type-scatter-bubble-series.md index c5e6cdb61d..7fd5a48c13 100644 --- a/en/components/geo-map-type-scatter-bubble-series.md +++ b/en/components/geo-map-type-scatter-bubble-series.md @@ -153,9 +153,9 @@ export class MapTypeScatterBubbleSeriesComponent implements AfterViewInit { ## API References -* [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) -* `ItemsSource` -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath) -* [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) -* [`radiusScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusScale) +- [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath) +- [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) +- [`radiusScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusScale) diff --git a/en/components/geo-map-type-scatter-contour-series.md b/en/components/geo-map-type-scatter-contour-series.md index 3b177f7074..8f2ac8c391 100644 --- a/en/components/geo-map-type-scatter-contour-series.md +++ b/en/components/geo-map-type-scatter-contour-series.md @@ -159,13 +159,13 @@ export class MapTypeScatterContourSeriesComponent implements AfterViewInit { ## API References -* [`fillScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#fillScale) -* [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) -* [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) -* `ItemsSource` -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) -* [`trianglesSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) -* `TriangulationSource` -* [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluebrushscalecomponent.html) -* [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) +- [`fillScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#fillScale) +- [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) +- [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) +- [`trianglesSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) +- `TriangulationSource` +- [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluebrushscalecomponent.html) +- [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) diff --git a/en/components/geo-map-type-scatter-density-series.md b/en/components/geo-map-type-scatter-density-series.md index a3afdc2aa8..e4f56c7ac0 100644 --- a/en/components/geo-map-type-scatter-density-series.md +++ b/en/components/geo-map-type-scatter-density-series.md @@ -133,10 +133,10 @@ export class MapTypeScatterDensitySeriesComponent implements AfterViewInit { ## API References -* [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) -* [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) -* [`heatMaximumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor) -* [`heatMinimumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) -* `ItemsSource` -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) +- [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`heatMaximumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor) +- [`heatMinimumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) +- `ItemsSource` +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) diff --git a/en/components/geo-map-type-scatter-symbol-series.md b/en/components/geo-map-type-scatter-symbol-series.md index 8adaceec9c..8bdf076c0e 100644 --- a/en/components/geo-map-type-scatter-symbol-series.md +++ b/en/components/geo-map-type-scatter-symbol-series.md @@ -107,8 +107,8 @@ export class MapTypeScatterSymbolSeriesComponent implements AfterViewInit { ## API References -* [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) -* `ItemsSource` -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) -* [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) +- [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) +- [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/en/components/geo-map-type-series.md b/en/components/geo-map-type-series.md index dfc8b2aa68..689daf8321 100644 --- a/en/components/geo-map-type-series.md +++ b/en/components/geo-map-type-series.md @@ -16,14 +16,14 @@ All types of geographic series are always rendered on top of the geographic imag The Angular Geographic Map component supports the following types of geographic series: -- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md) -- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md) -- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md) -- [Using Scatter Density Series](geo-map-type-scatter-density-series.md) -- [Using Scatter Area Series](geo-map-type-scatter-area-series.md) -- [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md) -- [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md) +- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md) +- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md) +- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md) +- [Using Scatter Density Series](geo-map-type-scatter-density-series.md) +- [Using Scatter Area Series](geo-map-type-scatter-area-series.md) +- [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md) +- [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md) - ## API Members + ## API Members -- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxgeographicmapcomponent.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-type-shape-polygon-series.md b/en/components/geo-map-type-shape-polygon-series.md index 3131ccd8d3..d8f1e0a8c3 100644 --- a/en/components/geo-map-type-shape-polygon-series.md +++ b/en/components/geo-map-type-shape-polygon-series.md @@ -150,8 +150,8 @@ export class MapTypeShapePolygonSeriesComponent implements AfterViewInit { ## API References -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) -* [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) -* `ItemsSource` -* [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) -* [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- `ItemsSource` +- [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) +- [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/en/components/geo-map-type-shape-polyline-series.md b/en/components/geo-map-type-shape-polyline-series.md index 59ba264052..6c13c71f19 100644 --- a/en/components/geo-map-type-shape-polyline-series.md +++ b/en/components/geo-map-type-shape-polyline-series.md @@ -139,7 +139,7 @@ export class MapTypeShapePolylineSeriesComponent implements AfterViewInit { ## API References -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) -* [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) -* `ItemsSource` -* [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- `ItemsSource` +- [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/en/components/geo-map.md b/en/components/geo-map.md index 4cde8d60c5..7a581f365e 100644 --- a/en/components/geo-map.md +++ b/en/components/geo-map.md @@ -9,7 +9,7 @@ mentionedTypes: ["XamGeographicMap", "Series"] The Ignite UI for Angular map component allows you to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps. -# Angular Map Example +## Angular Map Example The following sample demonstrates how display data in [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) also known as Bubble Series. @@ -61,7 +61,7 @@ import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; imports: [ // ... IgxGeographicMapModule, - IgxDataChartInteractivityModule + IgxDataChartInteractivityModule // ... ] }) @@ -113,27 +113,27 @@ Now that the map module is imported, next step is to create geographic map. The You can find more information about related Angular map features in these topics: -* [Geographic Map Navigation](geo-map-navigation.md) +- [Geographic Map Navigation](geo-map-navigation.md) -* [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md) -* [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md) -* [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md) -* [Using Scatter Density Series](geo-map-type-scatter-density-series.md) -* [Using Scatter Area Series](geo-map-type-scatter-area-series.md) -* [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md) -* [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md) +- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md) +- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md) +- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md) +- [Using Scatter Density Series](geo-map-type-scatter-density-series.md) +- [Using Scatter Area Series](geo-map-type-scatter-area-series.md) +- [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md) +- [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md) ## API References The following is a list of API members mentioned in the above sections: -* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) -* [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) -* [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) -* [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) -* [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) -* [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) -* [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) +- [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) +- [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) diff --git a/en/components/grid/grid.md b/en/components/grid/grid.md index f112e3a039..7126e45680 100644 --- a/en/components/grid/grid.md +++ b/en/components/grid/grid.md @@ -44,9 +44,9 @@ _keywords: angular data grid, angular grid component, angular data grid componen
    Angular Data Grid
    @@ -79,7 +79,7 @@ To get started with the Ignite UI for Angular Data Grid component, first you nee ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](../general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. The next step is to import the `IgxGridModule` in your **app.module.ts** file. @@ -133,9 +133,11 @@ The **data** property binds the grid, in this case to local array of objects. The [`autoGenerate`]({environment:angularApiUrl}/classes/igxgridcomponent.html#autoGenerate) property tells the `igx-grid` to auto generate the grid's [`IgxColumnComponent`s]({environment:angularApiUrl}/classes/igxcolumncomponent.html) based on the data source fields. It will also try to deduce the appropriate data type for the column if possible. Developers can also explicitly [define the columns](#angular-grid-column-configuration) and the mapping to the data source fields. ## Angular Bootstrap Grid Definition +

    Ignite UI for Angular includes a powerful bootstrap grid like flex-based layout system. Any modern application today is expected to follow a responsive web design approach, meaning it can gracefully adjust layout of HTML elements based on the device size, or from simply resizing the browser. An Angular bootstrap grid layout was the most used approach in the past, but a flex-based layout system like CSS grid has become more popular, as it works in any browser. The Ignite UI for Angular Layout Directive allows vertical and horizontal flow, including content / text wrapping, justification, and alignment. The Ignite UI for Angular grid supports a responsive layout using CSS, giving you the ultimate flexibility in how the grid behaves on resize.

    ## Angular Grid Styling Configuration +> > [!NOTE] > The [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) uses **css grid layout**, which is **not supported in IE without prefixing**, consequently it will not render properly. @@ -157,6 +159,7 @@ To facilitate your work, apply the comment in the `src/styles.scss` file. ``` ## Editable Grid Angular +

    Each operation for Angular grid editing includes Batch operations, meaning the API gives you the option to group edits into a single server call, or you can perform grid edit / update operations as they occur with grid interactions. Along with a great developer experience as an editable Angular grid with CRUD operations, the Angular grid includes Excel-like keyboard navigation. Common default grid navigation is included, plus the option to override any navigation option to meet the needs of your customers. An editable grid in Angular with a great navigation scheme is critical to any modern line of business application, with the Ignite UI grid we make it easy.

    Following this topic you will learn more about [cell template](grid.md#cell-template) and [cell editing template](grid.md#cell-editing-template) and editing. @@ -215,7 +218,7 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1 ``` >[!NOTE] ->Whenever a header template is used along with grouping/moving functionality the *column header area* becomes **draggable** and you cannot access the custom elements part of the header template until you mark them as **not draggable**. Example below. +>Whenever a header template is used along with grouping/moving functionality the _column header area_ becomes **draggable** and you cannot access the custom elements part of the header template until you mark them as **not draggable**. Example below. ```html ``` -As you can see, we are adding **draggable** attribute set to *false*. + +As you can see, we are adding **draggable** attribute set to _false_. ### Cell Template @@ -358,6 +362,7 @@ const pipeArgs: IColumnPipeArgs = { digitsInfo: '1.1-2' } ``` + ```html @@ -406,9 +411,9 @@ const POJO = [{ }]; ``` + >[!WARNING] >**The key values must not contain arrays**. - >If you use [autoGenerate]({environment:angularApiUrl}/classes/igxgridcomponent.html#autoGenerate) columns **the data keys must be identical.** ## Angular Grid Data Binding @@ -431,7 +436,7 @@ We're importing the `Injectable` decorator which is an [essential ingredient](ht **Note**: Before Angular 5 the `HttpClient` was located in `@angular/http` and was named `Http`. -Since we will receive a JSON response containing an array of records, we may as well help ourselves by specifing what kind of data we're expecting to be returned in the observable by defining an interface with the correct shape. Type checking is always recommended and can save you some headaches down the road. +Since we will receive a JSON response containing an array of records, we may as well help ourselves by specifying what kind of data we're expecting to be returned in the observable by defining an interface with the correct shape. Type checking is always recommended and can save you some headaches down the road. ```typescript // northwind.service.ts @@ -539,9 +544,10 @@ and in the template of the component: ## Complex Data Binding -The [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) supports binding to complex objects (inluding nesting deeper than one level) through a "path" of properties in the data record. +The [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) supports binding to complex objects (including nesting deeper than one level) through a "path" of properties in the data record. Take a look at the following data model: + ```typescript interface AminoAcid { name: string; @@ -560,11 +566,14 @@ interface AminoAcid { ... } ``` + For example, in order to display the weights of a given amino acid in the grid the following snippet will suffice + ```html ``` + Refer to the sample below for additional information. This type of binding supports all the default functionality that you would expect from the grid. That is all sorting and filtering operations work out of the box without any additional @@ -584,7 +593,7 @@ configuration. Same goes for grouping and editing operations with or without tra An alternative way to bind complex data, or to visualize composite data (from more than one column) in the **IgxGrid** is to use a custom body template for the column. Generally, one can: - use the `value` of the cell, that contains the nested data - - use the `cell` object in the template, from which to access the `row.data`, therefore retrieve any value from it, i.e `cell.row.data[field]` and `cell.row.data[field][nestedField]` + - use the `cell` object in the template, from which to access the `row.data`, therefore retrieve any value from it, i.e `cell.row.data[field]` and `cell.row.data[field][nestedField]` and interpolate it those in the template. @@ -644,6 +653,7 @@ export const EMPLOYEE_DATA = [ }, ... ``` + The custom template for the column, that will render the nested data: ```html @@ -694,6 +704,7 @@ The flat data binding approach is similar to the one that we already described a Since the Angular grid is a component for **rendering**, **manipulating** and **preserving** data records, having access to **every data record** gives you the opportunity to customize the approach of handling it. The [`data`]({environment:angularApiUrl}/classes/igxgridrow.html#data) property provides you this opportunity. Below is the data that we are going to use: + ```typescript export const DATA: any[] = [ { @@ -758,6 +769,7 @@ Keep in mind that with the above defined template you will not be able to make e ... ``` + And the result is: @@ -770,12 +782,14 @@ And the result is:
    ## Keyboard Navigation + Grid's keyboard navigation provides a rich variety of keyboard interactions for the user. It enhances accessibility and allows intuitive navigation through any type of elements inside (cell, row, column header, toolbar, footer, etc.). Check out these resources for more information: - - [Grid Keyboard Navigation](../grid/keyboard-navigation.md) - - [TreeGrid Keyboard Navigation](../treegrid/keyboard-navigation.md) - - [Hierarchical Grid Keyboard Navigation](../hierarchicalgrid/keyboard-navigation.md) - - [Blog post](https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility) - Improving Usability, Accessibility and ARIA Compliance with Grid keyboard navigation + +- [Grid Keyboard Navigation](../grid/keyboard-navigation.md) +- [TreeGrid Keyboard Navigation](../treegrid/keyboard-navigation.md) +- [Hierarchical Grid Keyboard Navigation](../hierarchicalgrid/keyboard-navigation.md) +- [Blog post](https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility) - Improving Usability, Accessibility and ARIA Compliance with Grid keyboard navigation ## State Persistence @@ -787,7 +801,7 @@ See the [Grid Sizing](sizing.md) topic. ## Performance (Experimental) -The `IgxGridComponent`'s design allows it to take advantage of the Event Coalescing feature that has Angular introduced. This feature allows for improved performance with roughly around **`20%`** in terms of interactions and responsiveness. This feature can be enabled on application level by simply setting the `ngZoneEventCoalescing ` and `ngZoneRunCoalescing` properties to `true` in the `bootstrapModule` method: +The `IgxGridComponent`'s design allows it to take advantage of the Event Coalescing feature that has Angular introduced. This feature allows for improved performance with roughly around **`20%`** in terms of interactions and responsiveness. This feature can be enabled on application level by simply setting the `ngZoneEventCoalescing` and `ngZoneRunCoalescing` properties to `true` in the `bootstrapModule` method: ```typescript platformBrowserDynamic() @@ -797,7 +811,6 @@ platformBrowserDynamic() >[!NOTE] > This is still in experimental feature for the `IgxGridComponent`. This means that there might be some unexpected behaviors in the Grid. In case of encountering any such behavior, please contact us on our [Github](https://github.com/IgniteUI/igniteui-angular/discussions) page. - >[!NOTE] > Enabling it can affects other parts of an Angular application that the `IgxGridComponent` is not related to. @@ -810,8 +823,8 @@ platformBrowserDynamic() |Grid [`width`]({environment:angularApiUrl}/classes/igxgridcomponent.html#width) does not depend on the column widths | The [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) of all columns does not determine the spanning of the grid itself. It is determined by the parent container dimensions or the defined grid's [`width`]({environment:angularApiUrl}/classes/igxgridcomponent.html#width).| |Grid nested in parent container | When grid's [`width`]({environment:angularApiUrl}/classes/igxgridcomponent.html#width) is not set and it is placed in a parent container with defined dimensions, the grid spans to this container.| |Grid `OnPush` ChangeDetectionStrategy |The grid operates with `ChangeDetectionStrategy.OnPush` so whenever some customization appears make sure that the grid is notified about the changes that happens.| -| Columns have a minimum allowed column width. Depending on the value of [`--ig-size`] CSS variable, they are as follows:
    "small": 56px
    "medium": 64px
    "large ": 80px | If width less than the minimum allowed is set it will not affect the rendered elements. They will render with the minimum allowed width for the corresponding [`--ig-size`]. This may lead to an unexpected behavior with horizontal virtualization and is therefore not supported. -| Row height is not affected by the height of cells that are not currently rendered in view. | Because of virtualization a column with a custom template (that changes the cell height) that is not in the view will not affect the row height. The row height will be affected only while the related column is scrolled in the view. +| Columns have a minimum allowed column width. Depending on the value of [`--ig-size`] CSS variable, they are as follows:
    "small": 56px
    "medium": 64px
    "large ": 80px | If width less than the minimum allowed is set it will not affect the rendered elements. They will render with the minimum allowed width for the corresponding [`--ig-size`]. This may lead to an unexpected behavior with horizontal virtualization and is therefore not supported.| +| Row height is not affected by the height of cells that are not currently rendered in view. | Because of virtualization a column with a custom template (that changes the cell height) that is not in the view will not affect the row height. The row height will be affected only while the related column is scrolled in the view. | > [!NOTE] > `igxGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxGrid`. For more details see [igxForOf Known Issues](../for-of.md#known-limitations) section. @@ -819,47 +832,51 @@ platformBrowserDynamic()
    ## API References -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) + +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) -* [IgxChip Theme]({environment:sassApiUrl}/themes#function-chip-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) -* [IgxSnackBar Theme]({environment:sassApiUrl}/themes#function-snackbar-theme) -* [IgxBadge Theme]({environment:sassApiUrl}/themes#function-badge-theme) + +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxChip Theme]({environment:sassApiUrl}/themes#function-chip-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) +- [IgxSnackBar Theme]({environment:sassApiUrl}/themes#function-snackbar-theme) +- [IgxBadge Theme]({environment:sassApiUrl}/themes#function-badge-theme) ## Tutorial video + Learn more about creating an Angular data grid in our short tutorial video: > [!Video https://www.youtube.com/embed/Xv_fQVQ8fmM] ## Additional Resources +
    -* [Grid Sizing](sizing.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Pinning](column-pinning.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) -* [Column Data Types](column-types.md#default-template) -* [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) +- [Grid Sizing](sizing.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md) +- [Column Data Types](column-types.md#default-template) +- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/grid/groupby.md b/en/components/grid/groupby.md index c6c2f35a5e..63598b1c0c 100644 --- a/en/components/grid/groupby.md +++ b/en/components/grid/groupby.md @@ -9,11 +9,12 @@ _keywords: angular group by, igniteui for angular, infragistics A Group By behavior in an Ignite UI for Angular Table or UI Grid creates grouped data rows based on the column values. The Group By in [`igxGrid`]({environment:angularApiUrl}/classes/igxgridcomponent.html) allows for visualizing the groups in a hierarchical structure. The grouped data rows can be expanded or collapsed and the order of grouping may be changed through the UI or API. When Row Selection is enabled, a Group By row selector is rendered in the left-most area of the group row. In case the [`rowSelection`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowSelection) property is set to single, checkboxes are disabled and only serve as an indication for the group where selection is placed. If the [`rowSelection`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowSelection) property is set to multiple, clicking over the Group By row selector selects all records belonging to this group. ## Angular Grid Group By Example + This example presents the grouping capabilities of a large amount of data. Dragging the column headers to the top (grouping area) allows users to see the data for the selected column in a hierarchical structure. They can do group by in multiple fields by dragging more column headers to the top. These grouping options come in handy when you have tables with numerous rows and columns where users want to present the data in a much faster and visually acceptable way. - @@ -88,7 +89,7 @@ As with [`groupingExpressions`]({environment:angularApiUrl}/classes/igxgridcompo groupRow.expanded = false; ``` -Groups can be created expanded (***default***) or collapsed and the expansion states would generally only contain the state opposite to the default behavior. You can control whether groups should be created expanded or not through the [`groupsExpanded`]({environment:angularApiUrl}/classes/igxgridcomponent.html#groupsExpanded) property. +Groups can be created expanded (_**default**_) or collapsed and the expansion states would generally only contain the state opposite to the default behavior. You can control whether groups should be created expanded or not through the [`groupsExpanded`]({environment:angularApiUrl}/classes/igxgridcomponent.html#groupsExpanded) property. ### Select/Deselect all rows in a group API @@ -177,8 +178,8 @@ Groups that span multiple pages are split between them. The group row is visible ### Angular group by with paging example - @@ -192,16 +193,16 @@ Integration between Group By and Summaries is described in the [Summaries](summa The grouping UI supports the following keyboard interactions: - For group rows (focus should be on the row or the expand/collapse cell) - - ALT + RIGHT - Expands the group - - ALT + LEFT - Collapses the group - - SPACE - selects all rows in the group, if rowSelection property is set to multiple + - ALT + RIGHT - Expands the group + - ALT + LEFT - Collapses the group + - SPACE - selects all rows in the group, if rowSelection property is set to multiple - For group [`igxChip`]({environment:angularApiUrl}/classes/igxchipcomponent.html) components in the group by area (focus should be on the chip) - - SHIFT + LEFT - moves the focused chip left, changing the grouping order, if possible - - SHIFT + RIGHT - moves the focused chip right, changing the grouping order, if possible - - SPACE - changes the sorting direction - - DELETE - ungroups the field - - The separate elements of the chip are also focusable and can be interacted with using the ENTER key. + - SHIFT + LEFT - moves the focused chip left, changing the grouping order, if possible + - SHIFT + RIGHT - moves the focused chip right, changing the grouping order, if possible + - SPACE - changes the sorting direction + - DELETE - ungroups the field + - The separate elements of the chip are also focusable and can be interacted with using the ENTER key. ## Angular Grid Custom Group By @@ -215,8 +216,8 @@ The sample below demonstrates custom grouping by `Date`, where the date values a ### Angular custom group by example - @@ -297,7 +298,7 @@ A [`groupingComparer`]({environment:angularApiUrl}/interfaces/igroupingexpressio } ``` -From version 15.1.0, you can also use the built-in sorting strategy `GroupMemberCountSortingStrategy` to sort items based on members count. +From version 15.1.0, you can also use the built-in sorting strategy `GroupMemberCountSortingStrategy` to sort items based on members count. ```typescript public sortByGroup() { @@ -312,7 +313,7 @@ public sortByGroup() { ## Styling -The igxGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The grid's [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The grid's [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the grid's Group By styling. @@ -325,7 +326,7 @@ To begin the customization of the Group By feature, you need to import the `inde // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` ### Defining custom theme @@ -359,7 +360,7 @@ $custom-chips-theme: chip-theme( ### Defining a custom color palette -In the approach that we described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. +In the approach that we described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `palette` generates a color palette, based on provided primary, secondary and surface colors. ```scss @@ -373,7 +374,8 @@ $custom-palette: palette( $surface: $grey-color ); ``` -After a custom palette has been generated, the `color` function can be used to obtain different varieties of the primary and the secondary colors. + +After a custom palette has been generated, the `color` function can be used to obtain different varieties of the primary and the secondary colors. ```scss $custom-theme: grid-theme( @@ -395,9 +397,11 @@ $custom-chips-theme: chip-theme( $hover-text-color:contrast-color($custom-palette, "primary", 600) ); ``` + ### Defining custom schemas -You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. -Extend one of the two predefined schemas, that are provided for every component. In our case, we would use [`light-grid`]({environment:sassApiUrl}/schemas#variable-light-material-schema). + +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +Extend one of the two predefined schemas, that are provided for every component. In our case, we would use [`light-grid`]({environment:sassApiUrl}/schemas#variable-light-material-schema). ```scss $custom-grid-schema: extend( @@ -415,7 +419,8 @@ $custom-grid-schema: extend( ) ); ``` -In order for the custom schema to be applied, either ([`light`]({environment:sassApiUrl}/schemas#variable-light-material-schema) or [`dark`]({environment:sassApiUrl}/schemas#variable-dark-material-schema)) globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. + +In order for the custom schema to be applied, either ([`light`]({environment:sassApiUrl}/schemas#variable-light-material-schema) or [`dark`]({environment:sassApiUrl}/schemas#variable-dark-material-schema)) globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. ```scss $my-custom-schema: extend( @@ -461,12 +466,12 @@ In our example, we need to use `::ng-deep` for our chip theme: } ``` -### Demo +### Demo @@ -477,34 +482,35 @@ In our example, we need to use `::ng-deep` for our chip theme: |Limitation|Description| |--- |--- | -|Maximum amount of grouped columns is 10. | If more than 10 columns are grouped an error is thrown. +|Maximum amount of grouped columns is 10. | If more than 10 columns are grouped an error is thrown. | ## API References -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGroupByRow]({environment:angularApiUrl}/classes/igxgroupbyrow.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -* [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IGroupByExpandState]({environment:angularApiUrl}/interfaces/igroupbyexpandstate.html) -* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) -* [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGroupByRow]({environment:angularApiUrl}/classes/igxgroupbyrow.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IGroupByExpandState]({environment:angularApiUrl}/interfaces/igroupbyexpandstate.html) +- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) +- [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme) ## Additional Resources +
    -* [Grid overview](grid.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Column Moving](column-moving.md) -* [Summaries](summaries.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) +- [Grid overview](grid.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Column Moving](column-moving.md) +- [Summaries](summaries.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/grid/master-detail.md b/en/components/grid/master-detail.md index 6e6dc4702d..07260678db 100644 --- a/en/components/grid/master-detail.md +++ b/en/components/grid/master-detail.md @@ -13,13 +13,12 @@ This mode is useful when you need to display master-detail style data in a hiera ## Angular Grid Master-Detail Example - - ## Configuration To configure the `igxGrid` to display in master-detail mode you need to specify a template inside the grid, marked with the `igxGridDetail` directive: @@ -57,6 +56,7 @@ The expansion states can be controlled via the [`expansionStates`]({environment: ``` Additional API methods for controlling the expansion states are also exposed: + - [`expandAll`]({environment:angularApiUrl}/classes/igxgridcomponent.html#expandAll) - [`collapseAll`]({environment:angularApiUrl}/classes/igxgridcomponent.html#collapseAll) - [`toggleRow`]({environment:angularApiUrl}/classes/igxgridcomponent.html#toggleRow) @@ -67,14 +67,14 @@ Additional API methods for controlling the expansion states are also exposed: - When focus is on a detail row: - - `Arrow Up` - navigates one row up, focusing a cell from the previous row. - - `Arrow Down` - navigates one row down, focusing a cell from the next row. - - `Tab` - Allows focus to move to the next focusable element inside the template if there are focusable elements, otherwise moves to the next grid row. - - `Shift + Tab` - moves the focus to the previous row. + - `Arrow Up` - navigates one row up, focusing a cell from the previous row. + - `Arrow Down` - navigates one row down, focusing a cell from the next row. + - `Tab` - Allows focus to move to the next focusable element inside the template if there are focusable elements, otherwise moves to the next grid row. + - `Shift + Tab` - moves the focus to the previous row. - When focus is on a data row with expander: - - `Alt + Arrow Right/ Down` - expands the row. - - `Alt + Arrow Left/Down` - collapses the row. + - `Alt + Arrow Right/ Down` - expands the row. + - `Alt + Arrow Left/Down` - collapses the row. ## Known Issues and Limitations @@ -83,17 +83,17 @@ Additional API methods for controlling the expansion states are also exposed: | --- | --- | | Tab navigation inside the custom detail template may not update the master grid scroll position in case the next focused element is outside the visible view port.| Tab navigation inside the custom detail template is left up to the browser. | | Details template will not be exported to Excel.| As the details template can contain any type of content we cannot export it to excel out of the box.| -| The search feature will not hightlight elements from the details template. | | - +| The search feature will not highlight elements from the details template. | |
    ## API References -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) -* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) -* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) + +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) +- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) +- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) diff --git a/en/components/grid/paste-excel.md b/en/components/grid/paste-excel.md index 784e9c48ed..1d1c82ccc0 100644 --- a/en/components/grid/paste-excel.md +++ b/en/components/grid/paste-excel.md @@ -22,8 +22,8 @@ On the top there is a dropdown button with 2 options: The new data after the paste is decorated in Italic. - @@ -132,6 +132,7 @@ You should add the `paste-handler` directive (you can find its code in the next } } ``` +
    ## Paste Handler Directive @@ -218,15 +219,17 @@ export class PasteHandler { ``` ## API References -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) + +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) ## Additional Resources +
    -* [Excel Exporter](export-excel.md) - Use the Excel Exporter service to export data to Excel from IgxGrid. It also provides the option to only export the selected data from the IgxGrid. The exporting functionality is encapsulated in the IgxExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the IgxExcelExporterService's export method and pass the IgxGrid component as first argument. +- [Excel Exporter](export-excel.md) - Use the Excel Exporter service to export data to Excel from IgxGrid. It also provides the option to only export the selected data from the IgxGrid. The exporting functionality is encapsulated in the IgxExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the IgxExcelExporterService's export method and pass the IgxGrid component as first argument.
    Our community is active and always welcoming to new ideas. -* [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) +- [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/grid/selection-based-aggregates.md b/en/components/grid/selection-based-aggregates.md index e66ea94329..104d979fbf 100644 --- a/en/components/grid/selection-based-aggregates.md +++ b/en/components/grid/selection-based-aggregates.md @@ -10,63 +10,67 @@ With the sample, illustrated beyond, you may see how multiple selection is being ## Topic Overview -To achieve the selection-based aggregates functionality, you can use our [`Grid Selection`]({environment:angularApiUrl}/components/grid/selection.html) feature, together with the [`Grid Summaries`]({environment:angularApiUrl}/components/grid/summaries.html). -The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classess, [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html), depending on the column data type and your needs. +To achieve the selection-based aggregates functionality, you can use our [`Grid Selection`]({environment:angularApiUrl}/components/grid/selection.html) feature, together with the [`Grid Summaries`]({environment:angularApiUrl}/components/grid/summaries.html). +The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classes, [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html), depending on the column data type and your needs. ## Selection -To start working with the data in the selected grid range, you will have to subscribe to events that are notifying of changes in the grid selection. That can be done by subscribing to the [`selected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selected) event and to the [`rangeSelected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rangeSelected) event. You need to bind to both of them because the Selection feature differentiates between selecting a single cell and selecting a range of cells. + +To start working with the data in the selected grid range, you will have to subscribe to events that are notifying of changes in the grid selection. That can be done by subscribing to the [`selected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selected) event and to the [`rangeSelected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rangeSelected) event. You need to bind to both of them because the Selection feature differentiates between selecting a single cell and selecting a range of cells. In the events subscription logic, you can extract the selected data using the grid's [`getSelectedData`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getSelectedData) function and pass the selected data to the custom summary operand. ## Summary -Within the custom summary class, you'd have to be differentiating the types of data in the grid. For instance, in the scenario below, there are four different columns, whose type of data is suitable for custom summaries. These are the Unit Price, the Units in Stock, Discontinued status and the Order Date. + +Within the custom summary class, you'd have to be differentiating the types of data in the grid. For instance, in the scenario below, there are four different columns, whose type of data is suitable for custom summaries. These are the Unit Price, the Units in Stock, Discontinued status and the Order Date. The `operate` method of the derived class of the `IgxSummaryOperand`, is where you will process the data, starting by casing it in different categories based on the data types: ```typescript const numberData = data.filter(rec => typeof rec === "number"); const boolData = data.filter(rec => typeof rec === "boolean"); const dates = data.filter(rec => isDate(rec)); -``` +``` > [!NOTE] -> Bear in mind, that `isDate` is a custom function. +> Bear in mind, that `isDate` is a custom function. -After having the data types grouped accordingly, you can proceed to the aggregation itself. For that reason, you could use the already exposed methods of the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`. +After having the data types grouped accordingly, you can proceed to the aggregation itself. For that reason, you could use the already exposed methods of the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`. After that, you'd have to put the aggregated data in the same array, which would be returned to the template. For the visualization of the data, you might want to use the ``, which in a combination with the `custom-summaries` class will give the natural look of the Summary. ### Demo -Change the selection to see summaries of the currently selected range. + +Change the selection to see summaries of the currently selected range. - ## API References -* [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources -
    -* [Grid overview](grid.md) -* [Selection Service]({environment:angularApiUrl}/classes/igxgridselectionservice.html) -* [Row Selection](row-selection.md) -* [Cell Selection](cell-selection.md) -* [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) -* [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) -* [Summaries](summaries.md) -* [Paging](paging.md) +
    + +- [Grid overview](grid.md) +- [Selection Service]({environment:angularApiUrl}/classes/igxgridselectionservice.html) +- [Row Selection](row-selection.md) +- [Cell Selection](cell-selection.md) +- [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) +- [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) +- [Summaries](summaries.md) +- [Paging](paging.md)
    -Our community is active and always welcoming to new ideas. +Our community is active and always welcoming to new ideas. -* [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) +- [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/grids-and-lists.md b/en/components/grids-and-lists.md index 45cbf3a421..a29c3233ca 100644 --- a/en/components/grids-and-lists.md +++ b/en/components/grids-and-lists.md @@ -204,13 +204,14 @@ In this angular grid example, you can see how users can customize their _data vi
    ## What is an Angular Data Grid? + An Angular data grid is a component used to display tabular data in a series of rows and columns. Data grids, also known as tables, are well known in the desktop world with popular software such as Microsoft Excel. While grids have been available on desktop platforms for a long time, they have recently become part of web app UIs, such as Angular UI. Modern grids can be complex and may include a range of functionalities, including data binding, editing, Excel-like filtering, custom sorting, grouping, row reordering, row and column freezing, row aggregation, and exporting to Excel, CSV, and pdf formats. @@ -219,6 +220,7 @@ An Angular data grid is a component used to display tabular data in a series of Angular data grids are essential in use cases where lots of data must be stored and sorted through quickly. This can include industries such as financial or insurance that use high-volume, high-velocity data frequently. Often the success of these companies is dependent on the functionality and performance of these data grids. When stock decisions need to be made in microseconds, for example, it’s imperative that the data grid performs with no lag time or flicker. ## Key Features +
    The Ignite UI for Angular Data Grid is not just for high-volume and real-time data. It is a feature-rich Angular grid that gives you capabilities that you would never be able to accomplish with so little code on your own. @@ -242,6 +244,7 @@ This example demonstrates a few of the data grid’s key features: - [**Size**](grid/display-density.md) to adjust the height and sizing of the rows - Column templates like [**Sparkline Column**](charts/types/sparkline-chart.md) and Image Column +
    @@ -254,6 +257,7 @@ This example demonstrates a few of the data grid’s key features:
    ### Data Virtualization and Performance +
    Seamlessly scroll through unlimited rows and columns in your Angular grid, with the data grid’s column and row level virtualization. With support for local or remote data sources, you get the best performance no matter where your data lives. Your users will experience Excel-like scrolling, with enterprise speed — no lag, screen flicker, or visual delay — giving you the best user experience (UX) without compromising performance. @@ -318,12 +322,12 @@ Enable [multi-column headers](grid/multi-column-headers.md), allowing you to gro With Ignite UI for Angular you can customize cell appearance with CSS or re-template any cell with ng-template to give any cell render appearance. With full support for Material Design, you can customize your branded experience with our simple-to-use theming engine. -
    Animation of different grids design showing the themeing and templating capabilities of the Angular Data Grid +
    Animation of different grids design showing the theming and templating capabilities of the Angular Data Grid
    ### Excel Library for the Angular Grid -Full support for exporting data grids to XLXS, XLS, TSV or CSV. The Ignite UI for Angular [Excel library](excel-library.md) includes 300+ formulas, Table support, Conditional Formatting, Chart creation and more – all without needing Microsoft Excel on the client machine. +Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI for Angular [Excel library](excel-library.md) includes 300+ formulas, Table support, Conditional Formatting, Chart creation and more – all without needing Microsoft Excel on the client machine.
    Icon representation of Microsoft Excel-like features on the Angular Data Grid
    @@ -331,6 +335,7 @@ Full support for exporting data grids to XLXS, XLS, TSV or CSV. The Ignite UI fo
    ## Angular Grid Features +
    @@ -360,6 +365,7 @@ Full support for exporting data grids to XLXS, XLS, TSV or CSV. The Ignite UI fo - [Remote Data Load on Demand](grid/virtualization.md#remote-virtualization) - [Cell Templates](grid/grid.md#cell-template) - [ARIA/a11y Support](interactivity/accessibility-compliance.md) +
    @@ -415,6 +421,7 @@ There are multiple options to get access to our award-winning support at Infragi
    ## Ignite UI for Angular Trial License and Commercial +

    Ignite UI for Angular is a commercially licensed product available via a subscription model. You can try the Ignite UI for Angular product for free when you register for a 30-day trial. When you are done with your Trial Period, you can purchase a license from our web site or by calling sales in your region.

    diff --git a/en/components/grids_templates/advanced-filtering.md b/en/components/grids_templates/advanced-filtering.md index 54e99f06ed..91d1fe5375 100644 --- a/en/components/grids_templates/advanced-filtering.md +++ b/en/components/grids_templates/advanced-filtering.md @@ -1,46 +1,51 @@ + @@if(igxName === 'IgxGrid'){ --- + title: Advanced Filtering in Angular Data Grid - Ignite UI for Angular _description: Learn how to configure advanced filter of data with the Angular table. The grid advanced filtering is more convenient and engaging than ever. _keywords: advanced filter, igniteui for angular, infragistics --- + } @@if(igxName !== 'IgxGrid'){ --- + title: Advanced Filtering in Angular Data Grid - Ignite UI for Angular _description: Learn how to configure advanced filter of data with the Angular table. The grid advanced filtering is more convenient and engaging than ever. _keywords: advanced filter, igniteui for angular, infragistics _canonicalLink: grid/advanced-filtering --- + } # Angular @@igComponent Advanced Filtering -The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any [Angular table](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) like the @@igComponent. +The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any [Angular table](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) like the @@igComponent. ## Angular @@igComponent Advanced Filtering Example @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -59,30 +64,37 @@ In order to filter the data once you are ready with creating the filtering condi To enable the advanced filtering, the [`allowAdvancedFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowAdvancedFiltering) input property should be set to `true`. @@if (igxName === 'IgxGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } The advanced filtering generates a [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) which is stored in the [`advancedFilteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#advancedFilteringExpressionsTree) input property. You could use this property to set an initial state of the advanced filtering. @@if (igxName !== 'IgxHierarchicalGrid') { + ```typescript ngAfterViewInit(): void { const tree = new FilteringExpressionsTree(FilteringLogic.And); @@ -110,9 +122,11 @@ ngAfterViewInit(): void { this.@@igObjectRef.advancedFilteringExpressionsTree = tree; } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```TypeScript ngAfterViewInit(): void { const tree = new FilteringExpressionsTree(FilteringLogic.Or); @@ -140,7 +154,7 @@ ngAfterViewInit(): void { } ``` -The advanced filtering in the `IgxHierarchicalGrid` can be used to filter root grid data based on child grids data using the *IN / NOT-IN* operators. This way, subqueries can be created to define more complex filtering logic. More information about this functionality can be found in [`Query Builder's Using Sub-Queries section`](../query-builder-model.md#using-sub-queries). Here's a sample [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) with a subquery: +The advanced filtering in the `IgxHierarchicalGrid` can be used to filter root grid data based on child grids data using the _IN / NOT-IN_ operators. This way, subqueries can be created to define more complex filtering logic. More information about this functionality can be found in [`Query Builder's Using Sub-Queries section`](../query-builder-model.md#using-sub-queries). Here's a sample [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) with a subquery: ```TypeScript ngAfterViewInit(): void { @@ -179,8 +193,8 @@ As you see the demo above the Advanced filtering dialog is hosted in an overlay @@if (igxName === 'IgxGrid') { - @@ -188,8 +202,8 @@ As you see the demo above the Advanced filtering dialog is hosted in an overlay @@if (igxName === 'IgxTreeGrid') { - @@ -197,8 +211,8 @@ As you see the demo above the Advanced filtering dialog is hosted in an overlay @@if (igxName === 'IgxHierarchicalGrid') { - @@ -209,25 +223,31 @@ As you see the demo above the Advanced filtering dialog is hosted in an overlay It's super easy to configure the advanced filtering to work outside of the @@igComponent. All you need to do is to create the dialog and set its [`grid`]({environment:angularApiUrl}/classes/igxgridtoolbaradvancedfilteringcomponent.html#grid) property: @@if (igxName === 'IgxGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } -You can also see how our [drag and drop App Builder™](https://www.infragistics.com/products/appbuilder) can streamline the entire design-to-Angular-code story. +You can also see how our [drag and drop App Builder™](https://www.infragistics.com/products/appbuilder) can streamline the entire design-to-Angular-code story.
    @@ -240,7 +260,7 @@ To get started with styling the Advanced Filtering dialog, we need to import the // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Since the Advanced Filtering dialog uses the [`IgxQueryBuilder`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) component, you can use the [`query-builder-theme`]({environment:sassApiUrl}/themes#query-builder-theme) to style it. To style the header title, you can create a custom theme that extends the [`query-builder-theme`]({environment:sassApiUrl}/themes#query-builder-theme) and set the `$header-foreground` parameter. @@ -272,7 +292,6 @@ igx-advanced-filtering-dialog { >[!NOTE] >We include the created **query-builder-theme** within `igx-advanced-filtering-dialog`, so that this custom theme will affect only the query builder nested in the advanced filtering dialog. Otherwise other query builder components in the application would be affected too. - >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -299,27 +318,27 @@ $custom-query-builder: query-builder-theme( @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -330,29 +349,31 @@ $custom-query-builder: query-builder-theme(
    ## API References +
    -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources +
    -* [@@igComponent overview](@@igMainTopic.md) -* [Filtering](filtering.md) -* [Excel Style Filtering](excel-style-filtering.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Pinning](column-pinning.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Filtering](filtering.md) +- [Excel Style Filtering](excel-style-filtering.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/batch-editing.md b/en/components/grids_templates/batch-editing.md index f660e8050c..2899463ff6 100644 --- a/en/components/grids_templates/batch-editing.md +++ b/en/components/grids_templates/batch-editing.md @@ -15,7 +15,7 @@ The Batch Editing feature of the @@igxName is based on the [`HierarchicalTransac } @@if (igxName === 'IgxHierarchicalGrid') { -In order to use the [`HierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) with [`@@igxName`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html), but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as [`IgxHierarchicalTransactionServiceFactory`]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory). +In order to use the [`HierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) with [`@@igxName`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html), but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as [`IgxHierarchicalTransactionServiceFactory`]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory). } Below is a detailed example of how is Batch Editing enabled for the @@igComponent component. @@ -25,24 +25,24 @@ Below is a detailed example of how is Batch Editing enabled for the @@igComponen The following sample demonstrates a scenario, where the @@igObjectRef has [`batchEditing`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#batchEditing) enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed. @@if (igxName === 'IgxGrid') { -
    } @@if (igxName === 'IgxTreeGrid') { -
    } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -83,6 +83,7 @@ This will ensure a proper instance of `Transaction` service is provided for the After batch editing is enabled, define a `@@igxName` with bound data source and [`rowEditable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable) set to true and bind: @@if (igxName === 'IgxGrid') { + ```html @@ -96,8 +97,10 @@ After batch editing is enabled, define a `@@igxName` with bound data source and ... ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -111,8 +114,10 @@ After batch editing is enabled, define a `@@igxName` with bound data source and (click)="openCommitDialog()">Commit ... ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -136,6 +141,7 @@ After batch editing is enabled, define a `@@igxName` with bound data source and ... ``` + } @@if (igxName === 'IgxGrid') { @@ -163,9 +169,11 @@ export class GridBatchEditingSampleComponent { } } ``` + } @@if (igxName === 'IgxTreeGrid') { The following code demonstrates the usage of the [`HierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) API - undo, redo, commit. + ```typescript export class TreeGridBatchEditingSampleComponent { @ViewChild('treeGrid', { read: IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent; @@ -188,6 +196,7 @@ export class TreeGridBatchEditingSampleComponent { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { The following code demonstrates the usage of the [`transactions`]({environment:angularApiUrl}/classes/igxtransactionservice.html#) API - undo, redo, commit. @@ -216,9 +225,10 @@ export class HierarchicalGridBatchEditingSampleComponent { } } ``` + } -> [!NOTE] +> [!NOTE] > The transactions API won't handle end of edit and you'd need to do it by yourself. Otherwise, `@@igComponent` would stay in edit mode. One way to do that is by calling [`endEdit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#endEdit) in the respective method. @@if (igxName === 'IgxTreeGrid') { @@ -234,38 +244,40 @@ Deleting a parent node in `@@igComponent` has some peculiarities. If you are usi [Check out the full demo configuration](remote-data-operations.md#remote-paging-with-batch-editing) - } + ## API References @@if (igxName === 'IgxGrid') { -* [transactions]({environment:angularApiUrl}/classes/@@igTypeDoc.html#transactions) -* [igxTransactionService]({environment:angularApiUrl}/classes/igxtransactionservice.html) + +- [transactions]({environment:angularApiUrl}/classes/@@igTypeDoc.html#transactions) +- [igxTransactionService]({environment:angularApiUrl}/classes/igxtransactionservice.html) } @@if (igxName === 'IgxTreeGrid') { -* [HierarchicalTransactionService]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) -* [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable) -* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [HierarchicalTransactionService]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) +- [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable) +- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) } @@if (igxName === 'IgxHierarchicalGrid') { -* [igxHierarchicalTransactionServiceFactory]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory) +- [igxHierarchicalTransactionServiceFactory]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory) } ## Additional Resources -* [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) -* [@@igComponent Overview](@@igMainTopic.md) -* [@@igComponent Editing](editing.md) -* [@@igComponent Row Editing](row-editing.md) -* [@@igComponent Row Adding](row-adding.md) +- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) +- [@@igComponent Overview](@@igMainTopic.md) +- [@@igComponent Editing](editing.md) +- [@@igComponent Row Editing](row-editing.md) +- [@@igComponent Row Adding](row-adding.md)
    Our community is active and always welcoming to new ideas. -* [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) \ No newline at end of file +- [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/grids_templates/cascading-combos.md b/en/components/grids_templates/cascading-combos.md index 23ec665283..1463c39684 100644 --- a/en/components/grids_templates/cascading-combos.md +++ b/en/components/grids_templates/cascading-combos.md @@ -5,19 +5,22 @@ _keywords: angular cascading combos with grid, ignite ui for angular, infragisti --- # Angular Grid with Cascading Combos + The Grid's Editing functionality provides with the opportunity to use [Cascading Combos](../simple-combo.md#cascading-scenario). By selecting the value in any preceding [Combos](../combo.md), the users will receive only the data that is relevant to their selection within the next Combo. ## Angular Grid with Cascading Combos Sample Overview + The sample below demonstrates how `Grid` works with nested `Cascading Combos`. @@if (igxName === 'IgxGrid') { - } ## Setup + In order enable column editing, make sure [`editable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable) property is set to **true**. Once the column editing is enabled, you can start by adding your [Single Select ComboBox](../simple-combo.md). Please note that here in order to have only one single selection available, you will need to use [igxSimpleCombo](../simple-combo.md) instead of modifying the igxCombo. @@ -39,7 +42,7 @@ export class AppModule {} Then, in the template, you should bind the combos [igx-simple-combo]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) to some data. -- `displayKey` - *Required for object arrays* - Specifies which property will be used for the items' text. If no value is specified for [displayKey]({environment:angularApiUrl}/classes/IgxSimpleComboComponent.html#displayKey), the simple combobox will use the specified `valueKey` (if any). +- `displayKey` - _Required for object arrays_ - Specifies which property will be used for the items' text. If no value is specified for [displayKey]({environment:angularApiUrl}/classes/IgxSimpleComboComponent.html#displayKey), the simple combobox will use the specified `valueKey` (if any). ```typescript export class MySimpleComboComponent implements OnInit { @@ -83,16 +86,17 @@ The [`id`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.htm ``` ## API Summary +
    -* [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) -* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) -* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) +- [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) +- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) +- [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) +- [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) ## Additional Resources -* [@@igComponent Editing](editing.md) -* [Single Select ComboBox](../simple-combo.md) -* [Cascading Combos](../simple-combo.md#cascading-scenario) -* [Linear Progress](../linear-progress.md) +- [@@igComponent Editing](editing.md) +- [Single Select ComboBox](../simple-combo.md) +- [Cascading Combos](../simple-combo.md#cascading-scenario) +- [Linear Progress](../linear-progress.md) diff --git a/en/components/grids_templates/cell-editing.md b/en/components/grids_templates/cell-editing.md index 30f14c1b25..21e5cc034c 100644 --- a/en/components/grids_templates/cell-editing.md +++ b/en/components/grids_templates/cell-editing.md @@ -1,25 +1,32 @@ + @@if (igxName === 'IgxGrid') { --- + title: Cell Editing in Angular Data Grid - Ignite UI for Angular _description: The Grid is using in-cell editing. It has a default cell editing template, but it also lets you define your own custom templates for update-data action. Try it now! _keywords: data manipulation, ignite ui for angular, infragistics, excel editing --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Cell Editing in Angular TreeGrid - Ignite UI for Angular _description: The Grid is using in-cell editing. It has a default cell editing template, but it also lets you define your own custom templates for update-data action. Try it now! _keywords: data manipulation, ignite ui for angular, infragistics _canonicalLink: grid/cell-editing --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- + title: Cell Editing in Angular HierarchicalGrid - Ignite UI for Angular _description: The Grid is using in-cell editing. It has a default cell editing template, but it also lets you define your own custom templates for update-data action. Try it now! _keywords: data manipulation, ignite ui for angular, infragistics _canonicalLink: grid/cell-editing --- + } # Angular @@igComponent Cell Editing @@ -63,21 +70,24 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation You can enter edit mode for specific cell, when an editable cell is focused in one of the following ways: - - on double click; - - on single click - Single click will enter edit mode only if the previously selected cell was in edit mode and currently selected cell is editable. If the previously selected cell was not in edit mode, single click will select the cell without entering edit mode; - - on key press `Enter`; - - on key press `F2`; + +- on double click; +- on single click - Single click will enter edit mode only if the previously selected cell was in edit mode and currently selected cell is editable. If the previously selected cell was not in edit mode, single click will select the cell without entering edit mode; +- on key press `Enter`; +- on key press `F2`; You can exit edit mode **without committing** the changes in one of the following ways: - - on key press `Escape`; - - when you perform *sorting*, *filtering*, *searching* and *hiding* operations; + +- on key press `Escape`; +- when you perform _sorting_, _filtering_, _searching_ and _hiding_ operations; You can exit edit mode and **commit** the changes in one of the following ways: - - on key press `Enter`; - - on key press `F2`; - - on key press `Tab`; - - on single click to another cell - when you click on another cell in the @@igComponent, your changes will be submitted. - - operations like paging, resize, pin or move will exit edit mode and changes will be submitted. + +- on key press `Enter`; +- on key press `F2`; +- on key press `Tab`; +- on single click to another cell - when you click on another cell in the @@igComponent, your changes will be submitted. +- operations like paging, resize, pin or move will exit edit mode and changes will be submitted. > [!NOTE] > The cell remains in edit mode when you scroll vertically or horizontally or click outside the @@igComponent. This is valid for both cell editing and row editing. @@ -87,30 +97,37 @@ You can exit edit mode and **commit** the changes in one of the following ways: You can also modify the cell value through the @@igxName API but only if primary key is defined: @@if (igxName === 'IgxGrid') { + ```typescript public updateCell() { this.grid1.updateCell(newValue, rowID, 'ReorderLevel'); } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript public updateCell() { this.treeGrid.updateCell(newValue, rowID, 'Age'); } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript public updateCell() { this.hierarchicalGrid.updateCell(newValue, rowID, 'Age'); } ``` + } Another way to update cell is directly through [`update`]({environment:angularApiUrl}/classes/igxgridcell.html#update) method of [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html): @@if (igxName === 'IgxGrid') { + ```typescript public updateCell() { const cell = this.grid1.getCellByColumn(rowIndex, 'ReorderLevel'); @@ -119,8 +136,10 @@ public updateCell() { cell.update(70); } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript public updateCell() { const cell = this.treeGrid.getCellByColumn(rowIndex, 'Age'); @@ -129,8 +148,10 @@ public updateCell() { cell.update(9999); } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript public updateCell() { const cell = this.hierarchicalGrid.getCellByColumn(rowIndex, 'ReorderLevel'); @@ -139,6 +160,7 @@ public updateCell() { cell.update(70); } ``` + } ### Cell Editing Templates @@ -158,6 +180,7 @@ If you want to provide a custom template which will be applied when a cell is in ``` + This code is used in the sample below which implements an [`IgxSelectComponent`](../select.md) in the cells of the `Race`, `Class` and `Alignment` columns. @@ -170,11 +193,9 @@ This code is used in the sample below which implements an [`IgxSelectComponent`] > [!NOTE] > Any changes made to the cell's [`editValue`]({environment:angularApiUrl}/classes/igxgridcell.html#editValue) in edit mode, will trigger the appropriate [editing event](editing.md#event-arguments-and-sequence) on exit and apply to the [transaction state](batch-editing.md) (if transactions are enabled). - > [!NOTE] > The cell template [`igxCell`](../grid/grid.md#cell-template) controls how a column's cells are shown when outside of edit mode. > The cell editing template directive `igxCellEditor`, handles how a column's cells in edit mode are displayed and controls the edited cell's edit value. - > [!NOTE] >By using `igxCellEditor` with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the `focus` will remain on the `cell element`, not on the editor component that we've added - [`igxSelect`](../select.md), [`igxCombo`](../combo.md), etc. This is why we should take leverage of the `igxFocus` directive, which will move the focus directly in the in-cell component and will preserve `a fluent editing flow` of the cell/row. @@ -190,7 +211,7 @@ Using Excel Style Editing allows the user to navigate trough the cells just as h Implementing this custom functionality can be done by utilizing the events of the grid. First we hook up to the grid's keydown events, and from there we can implement two functionalities: -* Constant edit mode +- Constant edit mode ```typescript public keydownHandler(event) { @@ -218,7 +239,7 @@ public keydownHandler(event) { } ``` - * `Enter`/ `Shift+Enter` navigation +- `Enter`/ `Shift+Enter` navigation ```typescript if (key == 13) { @@ -237,6 +258,7 @@ if (key == 13) { }); } ``` + Key parts of finding the next eligible index would be: ```typescript @@ -282,14 +304,17 @@ The [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) The @@igComponent component exposes the [`addRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#addRow) method which will add the provided data to the data source itself. @@if (igxName === 'IgxGrid') { + ```typescript // Adding a new record // Assuming we have a `getNewRecord` method returning the new row data. const record = this.getNewRecord(); this.grid.addRow(record); ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript public addNewChildRow() { // Adding a new record @@ -299,8 +324,10 @@ public addNewChildRow() { this.treeGrid.addRow(record, 1); } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript public addRow() { // Adding a new record @@ -309,6 +336,7 @@ public addRow() { this.hierarchicalGrid.addRow(record, 1); } ``` + } ### Updating data in the @@igComponent @@ -316,6 +344,7 @@ public addRow() { Updating data in the @@igComponent is achieved through [`updateRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#updateRow) and [`updateCell`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#updateCell) methods but **only if primary key for the grid is defined**. You can also directly update a cell and/or a row value through their respective `update` methods. @@if (igxName === 'IgxGrid') { + ```typescript // Updating the whole row this.grid.updateRow(newData, this.selectedCell.cellID.rowID); @@ -330,8 +359,10 @@ this.selectedCell.update(newData); const row = this.grid.getRowByKey(rowID); row.update(newData); ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript // Updating the whole row this.treeGrid.updateRow(newData, this.selectedCell.cellID.rowID); @@ -346,8 +377,10 @@ this.selectedCell.update(newData); const row = this.treeGrid.getRowByKey(rowID); row.update(newData); ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript // Updating the whole row this.hierarchicalGrid.updateRow(newData, this.selectedCell.cellID.rowID); @@ -362,6 +395,7 @@ this.selectedCell.update(newData); const row = this.hierarchicalGrid.getRowByKey(rowID); row.update(newData); ``` + } ### Deleting data from the @@igComponent @@ -369,6 +403,7 @@ row.update(newData); Please keep in mind that [`deleteRow()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deleteRow) method will remove the specified row only if primary key is defined. @@if (igxName === 'IgxGrid') { + ```typescript // Delete row through Grid API this.grid.deleteRow(this.selectedCell.cellID.rowID); @@ -376,8 +411,10 @@ this.grid.deleteRow(this.selectedCell.cellID.rowID); const row = this.grid.getRowByIndex(rowIndex); row.delete(); ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript // Delete row through Tree Grid API this.treeGrid.deleteRow(this.selectedCell.cellID.rowID); @@ -385,8 +422,10 @@ this.treeGrid.deleteRow(this.selectedCell.cellID.rowID); const row = this.treeGrid.getRowByIndex(rowIndex); row.delete(); ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript // Delete row through Grid API this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); @@ -394,8 +433,10 @@ this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); const row = this.hierarchicalGrid.getRowByIndex(rowIndex); row.delete(); ``` + } These can be wired to user interactions, not necessarily related to the **@@igSelector**; for example, a button click: + ```html ``` @@ -403,6 +444,7 @@ These can be wired to user interactions, not necessarily related to the **@@igSe
    ### Cell validation on edit event + Using the grid's editing events we can alter how the user interacts with the grid. In this example, we'll validate a cell based on the data entered in it by binding to the [`cellEdit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#cellEdit) event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event (`event.cancel = true`). We'll also display a custom error message using [`IgxToast`](../toast.md). @@ -418,6 +460,7 @@ The first thing we need to is bind to the grid's event: The `cellEdit` emits whenever **any** cell's value is about to be committed. In our `handleCellEdit` definition, we need to make sure that we check for our specific column before taking any action: @@if (igxName === 'IgxGrid') { + ```typescript export class MyGridEventsComponent { public handleCellEdit(event: IGridEditEventArgs): void { @@ -435,9 +478,11 @@ export class MyGridEventsComponent { } } ``` + If the value entered in a cell under the **Ordered** column is larger than the available amount (the value under **Units in Stock**), the editing will be cancelled and a toast with an error message will be displayed. } @@if (igxName === 'IgxTreeGrid') { + ```typescript export class MyTreeGridEventsComponent { public handleCellEdit(event: IGridEditEventArgs): void { @@ -458,9 +503,11 @@ export class MyTreeGridEventsComponent { } } ``` + Here, we are validating two columns. If the user tries to set an invalid value for an employee's **Age** (below 18) or their **Hire Date** (a future date), the editing will be cancelled (the value will not be submitted) and a toast with an error message will be displayed. } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript export class MyHGridEventsComponent { public handleCellEdit(event: IGridEditEventArgs) { @@ -482,6 +529,7 @@ export class MyHGridEventsComponent { } } ``` + Here, we are validating two columns. If the user tries to change an artist's **Debut** year or an album's **Launch Date**, the grid will not allow any dates that are greater than today. } @@ -528,6 +576,7 @@ In order to use the [`Ignite UI Theming Library`](../themes/sass/component-theme // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` + Now we can make use of all of the functions exposed by the Ignite UI for Angular theme engine. ### Defining a palette @@ -605,29 +654,30 @@ In addition to the steps above, we can also style the controls that are used for ## API References -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)} -* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) -* [IgxDatePickerComponent Styles]({environment:sassApiUrl}/themes#function-date-picker-theme) -* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) -* [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme) -* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +@@if (igxName !== 'IgxTreeGrid') {_[IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {_ [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)} +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) +- [IgxDatePickerComponent Styles]({environment:sassApiUrl}/themes#function-date-picker-theme) +- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) +- [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme) +- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources +
    -* [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) -* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Pinning](column-pinning.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) +- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md) @@if (igxName !== 'IgxHierarchicalGrid') {* [Searching](search.md)} diff --git a/en/components/grids_templates/cell-merging.md b/en/components/grids_templates/cell-merging.md index 694bb9ffb2..58933c9a4e 100644 --- a/en/components/grids_templates/cell-merging.md +++ b/en/components/grids_templates/cell-merging.md @@ -11,20 +11,20 @@ The Ignite UI for Angular @@igComponent provides a Cell Merging feature that com ## Angular Cell Merging Example @@if(igxName === 'IgxGrid'){ - } @@if(igxName === 'IgxHierarchicalGrid'){ - } @@if(igxName === 'IgxTreeGrid'){ - } @@ -32,24 +32,29 @@ The Ignite UI for Angular @@igComponent provides a Cell Merging feature that com ## Enabling and Using Cell Merging Cell merging in the grid is controlled at two levels: - - Grid-level merge mode – determines when merging is applied. - - Column-level merge toggle – determines which columns can merge cells. + +- Grid-level merge mode – determines when merging is applied. +- Column-level merge toggle – determines which columns can merge cells. ### Grid Merge Mode + The grid exposes a `cellMergeMode` property that accepts values from the `GridCellMergeMode` enum: - - `always` - Merges any adjacent cells that meet the merging condition, regardless of sort state. - - `onSort` - Merges adjacent cells only when the column is sorted **(default value)**. + +- `always` - Merges any adjacent cells that meet the merging condition, regardless of sort state. +- `onSort` - Merges adjacent cells only when the column is sorted **(default value)**. ```html <@@igSelector [data]="data" [cellMergeMode]="cellMergeMode"> ... ``` + ```ts protected cellMergeMode: GridCellMergeMode = 'always'; ``` ### Column Merge Toggle + At the column level, merging can be enabled or disabled with the `merge` property. ```html @@ -58,8 +63,9 @@ At the column level, merging can be enabled or disabled with the `merge` propert ``` In the above example: - - The **OrderID** column will merge adjacent duplicate values. - - The **ShipperName** column will render normally without merging. + +- The **OrderID** column will merge adjacent duplicate values. +- The **ShipperName** column will render normally without merging. ### Combined Example @@ -70,15 +76,19 @@ In the above example: ``` + ```ts protected cellMergeMode: GridCellMergeMode = 'onSort'; ``` + Here, the grid is set to merge only when columns are sorted, and both Category and Product columns are configured for merging. ## Custom Merge Conditions + In addition to the built-in `always` and `onSort` modes, the grid allows you to define a custom condition for merging cells through the `mergeStrategy` property. This strategy controls both how cells are compared and how merged ranges are calculated. ### Merge Strategy Interface + A custom merge strategy must implement the `IGridMergeStrategy` interface: ```ts @@ -95,10 +105,12 @@ export interface IGridMergeStrategy { comparer: (prevRecord: any, record: any, field: string) => boolean; } ``` + - `merge` - defines how merged cells are produced. - `comparer` - defines the condition to decide if two adjacent records should be merged. @@if(igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid'){ + ### Extending the Default Strategy If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in `DefaultMergeStrategy` and override the relevant methods. @@ -115,10 +127,13 @@ export class MyCustomStrategy extends DefaultMergeStrategy { } } ``` + } @@if(igxName === 'IgxTreeGrid'){ + The `IgxTreeGrid` provides two built-in strategies that implement the `IGridMergeStrategy` interface: `DefaultTreeGridMergeStrategy` and `ByLevelTreeGridMergeStrategy`. `DefaultTreeGridMergeStrategy` merges all cells with the same value, regardless of their hierarchical level. In contrast, `ByLevelTreeGridMergeStrategy` only merges cells if they have the same value and are located at the same level, making level a required condition for merging. + ### Extending the Default Strategy If you only want to customize part of the behavior (for example, the comparer logic), you can extend one of the built-in strategies, either `DefaultTreeGridMergeStrategy` or `ByLevelTreeGridMergeStrategy`, and override the relevant methods. @@ -135,30 +150,39 @@ export class MyCustomStrategy extends DefaultTreeGridMergeStrategy { } } ``` + } ### Applying a Custom Strategy + Once defined, assign the strategy to the grid through the `mergeStrategy` property: + ```html <@@igSelector [data]="data" [mergeStrategy]="customStrategy"> ``` + ```ts protected customStrategy = new MyCustomStrategy(); ``` + @@if(igxName === 'IgxGrid'){ + ### Demo - } -## Feature Integration +## Feature Integration + Due to the specific behavior of merged cells it has to be noted how exactly it ties together with some of the other features of the grid: @@if(igxName === 'IgxGrid'){ + - **Expand/Collapse**: if a feature (such as master-detail, grouping, etc.) generates a non-data row, then the cell merging is interrupted and the group will be split. } - **Excel export**: merged cells remain merged when exported to Excel. @@ -173,23 +197,28 @@ Due to the specific behavior of merged cells it has to be noted how exactly it t - **Row selection**: if selected rows intersect merged cells, all related merged cells should be marked as part of the selection. @@if(igxName === 'IgxGrid'){ + ## Limitations + |Known Limitations| Description| | --- | --- | | Cell merging is not supported in combination with Multi-row Layout. | Both span complex layouts that don't make sense when combined. A warning will be thrown if such invalid configuration is detected. | + } ## API References -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) + +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources +
    -* [@@igComponent overview](@@igMainTopic.md) +- [@@igComponent overview](@@igMainTopic.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/cell-selection.md b/en/components/grids_templates/cell-selection.md index 0c300a65bd..fdd61a9918 100644 --- a/en/components/grids_templates/cell-selection.md +++ b/en/components/grids_templates/cell-selection.md @@ -1,39 +1,48 @@ + @@if (igxName === 'IgxGrid') { --- + title: Angular Grid Cell Selection - Ignite UI for Angular _description: Check how easy it is to use cell data selection using variety of events, rich API or mouse interactions. The Grid supports 3 modes for cell selection. Try it now! _keywords: data select, igniteui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Angular Tree Grid Cell Selection - Ignite UI for Angular _description: Check how easy it is to use cell data selection using variety of events, rich API or mouse interactions. The Grid supports 3 modes for cell selection. Try it now! _keywords: data select, igniteui for angular, infragistics _canonicalLink: grid/cell-selection --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- -title: Angular Hierarchical Grid Cell Selection - Ignite UI for Angular  + +title: Angular Hierarchical Grid Cell Selection - Ignite UI for Angular _description: Check how easy it is to use cell data selection using variety of events, rich API or mouse interactions. The Grid supports 3 modes for cell selection. Try it now! _keywords: data select, igniteui for angular, infragistics _canonicalLink: grid/cell-selection --- + } # Angular Cell Selection -The selection feature enables rich data select capabilities in the Material UI based @@igComponent. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The @@igComponent now supports three modes for cell selection, and you can easily switch between them by changing [`cellSelection`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellSelection) property. You can disable cell selection, you can *select only one cell within the grid* or to *select multiple cells in the grid*, which is provided as default option. + +The selection feature enables rich data select capabilities in the Material UI based @@igComponent. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The @@igComponent now supports three modes for cell selection, and you can easily switch between them by changing [`cellSelection`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellSelection) property. You can disable cell selection, you can _select only one cell within the grid_ or to _select multiple cells in the grid_, which is provided as default option. @@if (igxName === 'IgxHierarchicalGrid') { In the Hierarchical Grid you can specify the cell selection mode on grid level. So for example in the parent grid multi-cell selection can be enabled, but in child grids cell selection mode can be single or disabled. }But let's dive deeper in each of these options. ## Angular Cell Selection Example + The sample below demonstrates the three types of @@igComponent's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
    @@if (igxName === 'IgxGrid') { - @@ -42,8 +51,8 @@ The sample below demonstrates the three types of @@igComponent's **cell selectio @@if (igxName === 'IgxTreeGrid') { - @@ -51,8 +60,8 @@ The sample below demonstrates the three types of @@igComponent's **cell selectio } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -60,12 +69,14 @@ The sample below demonstrates the three types of @@igComponent's **cell selectio } ## Selection types + ### @@igComponent Multiple-cell Selection @@if (igxName === 'IgxHierarchicalGrid') { This is the default cell selection mode in both parent and child grids. Please keep in mind that you can make cell selection one grid at a time, you can not make cross grid range selection or to have a selected cells in multiple grids. Each key combination related to range selection and mouse drag functionality can be used only in the same grid. } How to select cells: + - By `Mouse drag` - Rectangular data selection of cells would be performed. - By `Ctrl key` press + `Mouse drag` - Multiple range selections would be performed. Any other existing cell selection will be persisted. - Instant multi-cell selection by using Shift key. Select single cell and select another single cell by holding the Shift key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding `Shift key` the cell selection range will be updated based on the first selected cell position (starting point). @@ -75,11 +86,12 @@ How to select cells: - Continuous multiple cell selection is available, by clicking with the mouse and dragging. @@if (igxName === 'IgxGrid') { + #### Demo - @@ -89,8 +101,8 @@ How to select cells: #### Demo - @@ -105,18 +117,22 @@ When you set the `[cellSelection]="'single'"`, this allows you to have only one > When single cell is selected [`selected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selected) event is emitted, no matter if the `selection mode` is `single` or `multiple`. In multi-cell selection mode when you select a range of cells [`rangeSelected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rangeSelected) event is emitted. ### @@igComponent None selection + If you want to disable cell selection you can just set `[cellSelection]="'none'"` property. In this mode when you click over the cell or try to navigate with keyboard, the cell is **not selected**, only the `activation style` is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below. @@if (igxName !== 'IgxHierarchicalGrid') { + ## Keyboard navigation interactions ### While Shift key is pressed + - Shift + Arrow Up to add above cell to the current selection. - Shift + Arrow Down to add below cell to the current selection. - Shift + Arrow Left to add left cell to the current selection. - Shift + Arrow Right to add right cell to the current selection. ### While Ctrl + Shift keys are pressed + - Ctrl + Shift + Arrow Up to select all cells above the focused cell in the column. - Ctrl + Shift + Arrow Down to select all cells below the focused cell in the column. - Ctrl + Shift + Arrow Left to select all cells till the start of the row. @@ -128,6 +144,7 @@ If you want to disable cell selection you can just set `[cellSelection]="'none'" > Continuous scroll is possible only within Grid's body. ## Api usage + Below are the methods that you can use in order to select ranges, clear selection or get selected cells data. ### Select range @@ -166,6 +183,7 @@ this.grid1.selectRange(range); @@if (igxName === 'IgxHierarchicalGrid') { [`clearCellSelection()`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#clearCellSelection) will clear the current cell selection. } + ### Get selected data @@if (igxName === 'IgxGrid') { @@ -179,57 +197,63 @@ this.grid1.selectRange(range); } 1. If three different single cells are selected: -``` -expectedData = [ - { CompanyName: 'Infragistics' }, - { Name: 'Michael Langdon' }, - { ParentID: 147 } -]; -``` + + ``` + expectedData = [ + { CompanyName: 'Infragistics' }, + { Name: 'Michael Langdon' }, + { ParentID: 147 } + ]; + ``` 2. If three cells from one column are selected: -``` -expectedData = [ - { Address: 'Obere Str. 57'}, - { Address: 'Avda. de la Constitución 2222'}, - { Address: 'Mataderos 2312'} -]; -``` + + ``` + expectedData = [ + { Address: 'Obere Str. 57'}, + { Address: 'Avda. de la Constitución 2222'}, + { Address: 'Mataderos 2312'} + ]; + ``` 3. If three cells are selected with mouse drag from one row and three columns: -``` -expectedData = [ - { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' } -]; -``` + + ``` + expectedData = [ + { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' } + ]; + ``` 4. If three cells are selected with mouse drag from two rows and three columns: -``` -expectedData = [ - { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'}, - { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'} -]; -``` + + ``` + expectedData = [ + { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'}, + { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'} + ]; + ``` 5. If two different ranges are selected: -``` -expectedData = [ - { ContactName: 'Martín Sommer', ContactTitle: 'Owner'}, - { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'}, - { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'}, - { Address: 'Fauntleroy Circus', City: 'London'} -]; -``` + + ``` + expectedData = [ + { ContactName: 'Martín Sommer', ContactTitle: 'Owner'}, + { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'}, + { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'}, + { Address: 'Fauntleroy Circus', City: 'London'} + ]; + ``` 6. If two overlapping ranges are selected, the format would be: -``` -expectedData = [ - { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'}, - { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'}, - { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'}, - { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'} -]; -``` + + ``` + expectedData = [ + { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'}, + { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'}, + { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'}, + { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'} + ]; + ``` @@if (igxName === 'IgxGrid') { @@ -250,6 +274,7 @@ expectedData = [ ## Features integration + The multi-cell selection is index based (DOM elements selection). - `Sorting` - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending. @@ -275,7 +300,7 @@ To get started with styling the selection, we need to import the `index` file, w // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` ### Define colors @@ -313,23 +338,25 @@ Afterwards, all we need to do is include the mixin in our component's style (cou With the custom theme applied, the selected grid cells are highlighted with our selected colors: @@if (igxName === 'IgxGrid'){ + ### Demo - } @@if (igxName === 'IgxHierarchicalGrid'){ + ### Demo - @@ -337,11 +364,12 @@ With the custom theme applied, the selected grid cells are highlighted with our @@if (igxName === 'IgxTreeGrid'){ + ### Demo - @@ -352,27 +380,28 @@ With the custom theme applied, the selected grid cells are highlighted with our ## API References -* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} -* [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +@@if (igxName !== 'IgxTreeGrid') {_[IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {_ [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} +- [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources +
    -* [@@igComponent overview](@@igMainTopic.md) -* [Selection](selection.md) -* [Row selection](row-selection.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Pinning](column-pinning.md) -* [Column Resizing](column-resizing.md) -* [Virtualization and Performance](virtualization.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Selection](selection.md) +- [Row selection](row-selection.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Virtualization and Performance](virtualization.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/clipboard-interactions.md b/en/components/grids_templates/clipboard-interactions.md index 900b0ccc07..ca4b2d0faa 100644 --- a/en/components/grids_templates/clipboard-interactions.md +++ b/en/components/grids_templates/clipboard-interactions.md @@ -1,20 +1,26 @@ + @@if (igxName === 'IgxGrid') { --- -title: Angular Grid Clipboard Interactions - Ignite UI for Angular  + +title: Angular Grid Clipboard Interactions - Ignite UI for Angular _description: The Angular Data Grid Clipboard functionality provides fast, easy and customizable way to copy, paste and export data to Excel or other programs. Try it now! _keywords: copy data, igniteui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- -title: Angular TreeGrid Clipboard Interactions - Ignite UI for Angular  + +title: Angular TreeGrid Clipboard Interactions - Ignite UI for Angular _description: The Angular TreeGrid Clipboard functionality provides fast, easy and customizable way to copy, paste and export data to Excel or other programs. Try it now! _keywords: copy data, igniteui for angular, infragistics _canonicalLink: grid/clipboard-interactions --- + } # Angular @@igComponent Clipboard Interactions + Copy to clipboard operations are now available in the @@igComponent. This functionality provides a fast, easy and customizable way to copy data of the Angular Data Grid through the current multi cell data select. System Clipboard behavior gives the user ability to copy data from the @@igComponent into Excel or other external programs. ## Angular @@igComponent Clipboard Interactions Example @@ -22,8 +28,8 @@ Copy to clipboard operations are now available in the @@igComponent. This functi @@if (igxName === 'IgxGrid') { - @@ -31,8 +37,8 @@ Copy to clipboard operations are now available in the @@igComponent. This functi } @@if (igxName === 'IgxTreeGrid') { - @@ -40,6 +46,7 @@ Copy to clipboard operations are now available in the @@igComponent. This functi } ## Functionality + Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are: - Windows/Unix based @@ -53,9 +60,11 @@ Copy behavior is working with the default interaction defined by the browser and ## Limitations + - Both the **cut** and **copy** events are not natively supported in Internet Explorer. The exception is the -**paste** event (IE 11) which is emitted but does not expose the `clipboardData` property in the event. -> [!NOTE] +**paste** event (IE 11) which is emitted but does not expose the `clipboardData` property in the event. + +> [!NOTE] > In order to `copy` cells in IE 11, you can use the keyboard selection. Hold the `shift key` in order to make a multi-cell selection, press `Ctrl + C` in order to copy. - The copy behavior is disabled while the grid is in edit mode. @@ -63,32 +72,35 @@ Copy behavior is working with the default interaction defined by the browser and @@if (igxName === 'IgxGrid') { You can use a custom paste handler in order to configure `paste` behavior, have a look at our [Paste from Excel topic](paste-excel.md). } ## API Usage + We expose [`clipboardOptions`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardOptions) @Input property, which handles the following options: + - [`enabled`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardoptions.enabled) Enables/disables copying of selected cells. - [`copyHeaders`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardoptions.copyHeaders) Include the associated headers when copying. - [`copyFormatters`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardoptions.copyFormatters) Apply any existing column formatters to the copied data. - [`separator`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardoptions.separator) The string separator to use the for formatting the data in the clipboard. Default is `/t` -> [!NOTE] +> [!NOTE] > Excel can automatically detect text that is separated by tabs (tab-delimited `/t`) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs. - [`gridCopy`]({environment:angularApiUrl}/classes/igxgridcomponent.html#gridCopy) Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`clipboardOptions`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardОptions) ## Additional Resources +
    -* [@@igComponent overview](@@igMainTopic.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Pinning](column-pinning.md) -* [Selection](selection.md) -* [Virtualization and Performance](virtualization.md) -* [Multi-column headers](multi-column-headers.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Pinning](column-pinning.md) +- [Selection](selection.md) +- [Virtualization and Performance](virtualization.md) +- [Multi-column headers](multi-column-headers.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/collapsible-column-groups.md b/en/components/grids_templates/collapsible-column-groups.md index 0c08a56b76..6bd17ccfc2 100644 --- a/en/components/grids_templates/collapsible-column-groups.md +++ b/en/components/grids_templates/collapsible-column-groups.md @@ -1,17 +1,22 @@ + @@if(igxName==='IgxGrid') { --- + title: Collapsible Column Groups in Angular Data Grid - Infragistics _description: Take advantage of the capability to show\hide smaller and concise set of data with the use of collapsible column groups in our Angular Data Grid. Try it now! _keywords: collapsible column headers, ignite ui for angular, infragistics --- + } @@if(igxName!=='IgxGrid') { --- + title: Collapsible Column Groups in Angular @@igComponent - Infragistics _description: Take advantage of the capability to show\hide smaller and concise set of data with the use of collapsible column groups in our Angular @@igComponent. Try it now! _keywords: collapsible column headers, ignite ui for angular, infragistics _canonicalLink: grid/collapsible-column-groups --- + } # Collapsible Column Groups in Angular Data Grid @@ -22,8 +27,8 @@ Multi-column headers allow you to have multiple levels of nested columns and col @@if (igxName === 'IgxGrid') { - @@ -32,8 +37,8 @@ Multi-column headers allow you to have multiple levels of nested columns and col @@if (igxName === 'IgxTreeGrid') { - @@ -41,8 +46,8 @@ Multi-column headers allow you to have multiple levels of nested columns and col } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -56,13 +61,14 @@ To get started with the @@igxName and the **Collapsible multi-column headers** , ```cmd ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](../general/getting-started.md) topic. -The next step is to import the `@@igxNameModule` in the app.module.ts file. Also, we strongly suggest that you take a brief look at [*multi-column groups*](./multi-column-headers.md) topic, to see more detailed information on how to setup the column groups in your grid. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. + +The next step is to import the `@@igxNameModule` in the app.module.ts file. Also, we strongly suggest that you take a brief look at [_multi-column groups_](./multi-column-headers.md) topic, to see more detailed information on how to setup the column groups in your grid. ## Usage -*Collapsible Column Groups* is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. +_Collapsible Column Groups_ is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. In order to define a column group as `collapsible`, you need to set the property to `[collapsible]="true"` and also keep in mind that you need to define the property `visibleWhenCollapsed` to at least two child columns: at least one column must be visible when the group is collapsed (`[visibleWhenCollapsed]="true"`) and at least one column must be hidden when the group is expanded (`[visibleWhenCollapsed]="false"`), otherwise the **collapsible functionality will be disabled**. If `visibleWhenCollapsed` is not specified for some of the child columns, then this column will be always visible no matter whether the parent state is expanded or collapsed. @@ -88,23 +94,25 @@ So let's see the markup below: ``` And now let's sum up: every child column has three states: -- Can be always visible, no matter the expanded state of its parent; -- Can be visible, when its parent is collapsed; -- Can be hidden, when its parent is collapsed; -The initial state of the column group which is specified as collapsible is `[expanded]="true"`. But you can easily change this behavour by setting the property `[expanded]="false"`. +- Can be always visible, no matter the expanded state of its parent; +- Can be visible, when its parent is collapsed; +- Can be hidden, when its parent is collapsed; + +The initial state of the column group which is specified as collapsible is `[expanded]="true"`. But you can easily change this behavior by setting the property `[expanded]="false"`. ## Expand/Collapse indicator template Default expand indicator for the igxGrid is the following: - + Expand Indicator Default collapse indicator for the igxGrid is the following: - +Collapsed Indicator Also, if you need to change the default expand/collapse indicator, we provide two easy ways to do so - via an input property or through a directive. + ### Using an input property You can define custom expand/collapse template and provide it to each of the collapsible column groups using **collapsibleIndicatorTemplate** input property. Check the markup below: @@ -122,6 +130,7 @@ You can define custom expand/collapse template and provide it to each of the col ``` + ### Using igxCollapsibleIndicator directive Another way to achieve this behavior is to use the igxCollapsibleIndicator directive as shown in the example below: @@ -147,27 +156,29 @@ Another way to achieve this behavior is to use the igxCollapsibleIndicator direc ## API References +
    -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#mixin-grid) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#mixin-grid) ## Additional Resources +
    -* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Pinning](column-pinning.md) -* [Selection](selection.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column-pinning.md) +- [Selection](selection.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/column-hiding.md b/en/components/grids_templates/column-hiding.md index 3e5853c9d9..6a2660e49b 100644 --- a/en/components/grids_templates/column-hiding.md +++ b/en/components/grids_templates/column-hiding.md @@ -1,25 +1,32 @@ + @@if (igxName === 'IgxGrid') { --- + title: Column Hiding in Angular Data Grid - Ignite UI for Angular _description: Learn how to use the Column Hiding feature that allows users to change the visible state of the columns directly through the UI of the Ignite Material UI table. _keywords: column hiding, ignite ui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Column Hiding in Angular Tree Grid - Ignite UI for Angular _description: Learn how to use the Column Hiding feature that allows users to change the visible state of the columns directly through the UI of the Ignite Material UI table. _keywords: column hiding, ignite ui for angular, infragistics _canonicalLink: grid/column-hiding --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- + title: Column Hiding in Angular Hierarchical Grid - Ignite UI for Angular _description: Learn how to use the Column Hiding feature that allows users to change the visible state of the columns directly through the UI of the Ignite Material UI table. _keywords: column hiding, ignite ui for angular, infragistics _canonicalLink: grid/column-hiding --- + } # Angular @@igComponent Column Hiding @@ -30,8 +37,8 @@ The Ignite UI for Angular @@igComponent provides an [`IgxColumnActionsComponent` @@if (igxName === 'IgxGrid') { - @@ -39,8 +46,8 @@ The Ignite UI for Angular @@igComponent provides an [`IgxColumnActionsComponent` } @@if (igxName === 'IgxTreeGrid') { - @@ -48,8 +55,8 @@ The Ignite UI for Angular @@igComponent provides an [`IgxColumnActionsComponent` } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -58,9 +65,11 @@ The Ignite UI for Angular @@igComponent provides an [`IgxColumnActionsComponent` } ## @@igComponent Setup + Let's start by creating our @@igComponent and binding it to our data. We will also enable both filtering and sorting for the columns. @@if (igxName === 'IgxGrid') { + ```html @@ -77,8 +86,10 @@ Let's start by creating our @@igComponent and binding it to our data. We will al     ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -97,8 +108,10 @@ Let's start by creating our @@igComponent and binding it to our data. We will al ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -137,6 +150,7 @@ Let's start by creating our @@igComponent and binding it to our data. We will al ``` + } ## Toolbar's Column Hiding UI @@ -145,6 +159,7 @@ The built-in Column Hiding UI is placed inside an [`IgxDropDownComponent`]({envi For this purpose all we have to do is set both the [`IgxGridToolbarActionsComponent`]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html) and the [`IgxGridToolbarHidingComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html) inside of the @@igComponent. We will also add a title to our toolbar by using the [`IgxGridToolbarTitleComponent`]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html) and a custom style for our @@igComponent's wrapper. @@if (igxName === 'IgxHierarchicalGrid') { + ```html
    @@ -159,6 +174,7 @@ For this purpose all we have to do is set both the [`IgxGridToolbarActionsCompon
    ``` + ```css /* columnHiding.component.css */ .photo { @@ -169,9 +185,11 @@ For this purpose all we have to do is set both the [`IgxGridToolbarActionsCompon margin: 1px } ``` + } @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { + ```html @@ -195,6 +213,7 @@ For this purpose all we have to do is set both the [`IgxGridToolbarActionsCompon margin: 10px; } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { @@ -205,6 +224,7 @@ The @@igComponent provides us with some useful properties when it comes to using By using the `igx-grid-toolbar-hiding` [`title`]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html#title) property, we will set the title that is displayed inside the dropdown button in the toolbar. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { + ```html @@ -219,8 +239,10 @@ By using the `igx-grid-toolbar-hiding` [`title`]({environment:angularApiUrl}/cla
    ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html
    @@ -233,6 +255,7 @@ By using the `igx-grid-toolbar-hiding` [`title`]({environment:angularApiUrl}/cla
    ``` + } By using the [`columnsAreaMaxHeight`]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html#columnsAreaMaxHeight) property of the IgxGridToolbarHidingComponent, we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want. @@ -245,7 +268,7 @@ public ngAfterViewInit() { } ``` -In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's [`columnsAreaMaxHeight `]({environment:angularApiUrl}/classes/IgxColumnActionsComponent.html#columnsAreaMaxHeight) property. This way we can use it according to our application's requirements. +In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's [`columnsAreaMaxHeight`]({environment:angularApiUrl}/classes/IgxColumnActionsComponent.html#columnsAreaMaxHeight) property. This way we can use it according to our application's requirements. You can see the result of the code from above at the beginning of this article in the Angular Column Hiding Example section. @@ -275,6 +298,7 @@ export class AppModule {} Now let's create our [`IgxColumnActionsComponent`]({environment:angularApiUrl}/classes/igxcolumnactionscomponent.html). In our application, we will place it next to the grid (which is not the case with the toolbar's column hiding UI, where the component is inside a dropdown by design). We will also set the [`columns`]({environment:angularApiUrl}/classes/igxcolumnactionscomponent.html#columns) property of the component to the columns of our @@igComponent and include some custom styles to make our application look even better! @@if (igxName === 'IgxGrid') { + ```html @@ -288,8 +312,10 @@ Now let's create our [`IgxColumnActionsComponent`]({environment:angularApiUrl}/c
``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -303,9 +329,11 @@ Now let's create our [`IgxColumnActionsComponent`]({environment:angularApiUrl}/c
``` + } @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { + ```css /* columnHiding.component.css */ @@ -343,6 +371,7 @@ Now let's create our [`IgxColumnActionsComponent`]({environment:angularApiUrl}/c margin-left: 30px; } ``` + } ### Add title and filter prompt @@ -406,9 +435,11 @@ Now all we have to do is bind the [`checked`]({environment:angularApiUrl}/classe ``` ### Disable hiding of a column + We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their [`disableHiding`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disableHiding) property to true. @@if (igxName === 'IgxGrid') { + ```html @@ -421,8 +452,10 @@ We can easily prevent the user from being able to hide columns through the colum
``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -435,14 +468,15 @@ We can easily prevent the user from being able to hide columns through the colum
``` + } If all went well, this is how our column hiding UI component should look like: @@if (igxName === 'IgxGrid') { - @@ -450,8 +484,8 @@ If all went well, this is how our column hiding UI component should look like: } @@if (igxName === 'IgxTreeGrid') { - @@ -468,7 +502,7 @@ To get started with styling the column actions component, we need to import the // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` By using the simplest approach, we create a new theme that extends the [`column-actions-theme`]({environment:sassApiUrl}/themes#function-column-actions-theme) and accepts the `$title-color` and the `$background-color` parameters. @@ -493,7 +527,7 @@ $custom-button: button-theme( In this example we only changed the text-color of the flat buttons and the button disabled color, but the [`button-theme`]({environment:sassApiUrl}/themes#function-button-theme) provides way more parameters to control the button style. -The last step is to **include** the component mixins, each with its respective theme: +The last step is to **include** the component mixins, each with its respective theme: ```scss @include css-vars($custom-column-actions-theme); @@ -505,7 +539,6 @@ The last step is to **include** the component mixins, each with its respective t >[!NOTE] >We include the created **button-theme** within `.igx-column-actions`, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too. - >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` for the components inside the column action component (buttons, checkboxes ...etc): @@ -525,9 +558,9 @@ The last step is to **include** the component mixins, each with its respective t @@if (igxName === 'IgxGrid') { - @@ -535,9 +568,9 @@ The last step is to **include** the component mixins, each with its respective t } @@if (igxName === 'IgxTreeGrid') { - @@ -545,9 +578,9 @@ The last step is to **include** the component mixins, each with its respective t } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -565,52 +598,58 @@ In this article we learned how to use the built-in column hiding UI in the @@igC The column hiding UI has a few more APIs to explore, which are listed below. -* [IgxColumnActionsComponent]({environment:angularApiUrl}/classes/igxcolumnactionscomponent.html) -* [IgxColumnActionsComponent Styles]({environment:sassApiUrl}/themes#function-column-actions-theme) +- [IgxColumnActionsComponent]({environment:angularApiUrl}/classes/igxcolumnactionscomponent.html) +- [IgxColumnActionsComponent Styles]({environment:sassApiUrl}/themes#function-column-actions-theme) Additional components and/or directives with relative APIs that were used: [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) properties: -* [hiddenColumnsCount]({environment:angularApiUrl}/classes/@@igTypeDoc.html#hiddenColumnsCount) + +- [hiddenColumnsCount]({environment:angularApiUrl}/classes/@@igTypeDoc.html#hiddenColumnsCount) [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) properties: -* [disableHiding]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding) + +- [disableHiding]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding) [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) properties: -* [showProgress]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress) + +- [showProgress]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress) [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) components: -* [IgxGridToolbarTitleComponent]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html) -* [IgxGridToolbarActionsComponent]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html) + +- [IgxGridToolbarTitleComponent]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html) +- [IgxGridToolbarActionsComponent]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html) [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) methods: [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) events: -* [columnVisibilityChanged]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnVisibilityChanged) + +- [columnVisibilityChanged]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnVisibilityChanged) [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html) Styles: -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme) ## Additional Resources +
-* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Filtering](filtering.md) -* [Paging](paging.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Pinning](column-pinning.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Filtering](filtering.md) +- [Paging](paging.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md) @@if (igxName !== 'IgxHierarchicalGrid') {* [Searching](search.md)}
Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/column-moving.md b/en/components/grids_templates/column-moving.md index a8f4b6302c..e0efcd87f2 100644 --- a/en/components/grids_templates/column-moving.md +++ b/en/components/grids_templates/column-moving.md @@ -1,25 +1,32 @@ + @@if (igxName === 'IgxGrid') { --- + title: Column Reordering & Moving in Angular Data Grid - Infragistics _description: Set custom column order & enable columns reordering via drag/drop mouse or touch gestures, or by using the Angular Column Moving API. Try Ignite UI for Angular! _keywords: column order, igniteui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Column Reordering & Moving in Angular Tree Grid - Infragistics _description: Set custom column order & enable columns reordering via drag/drop mouse or touch gestures, or by using the Angular Column Moving API. Try Ignite UI for Angular! _keywords: column order, igniteui for angular, infragistics _canonicalLink: grid/column-moving --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- + title: Column Reordering & Moving in Angular Hierarchical Grid - Infragistics _description: Set custom column order & enable columns reordering via drag/drop mouse or touch gestures, or by using the Angular Column Moving API. Try Ignite UI for Angular! _keywords: column order, igniteui for angular, infragistics _canonicalLink: grid/column-moving --- + } # @@igComponent Column Reordering & Moving @@ -28,10 +35,8 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin > [!NOTE] > Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns. - > [!NOTE] > If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the **draggable** attribute set to **false**! This allows to attach handlers for any event emitted by the element, otherwise the event is consumed by the `igxDrag` directive. - > [!NOTE] > If the pinned area exceeds its maximum allowed width (80% of the total @@igComponent width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area. @@ -45,8 +50,8 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin @@if (igxName === 'IgxGrid') { - @@ -54,8 +59,8 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin } @@if (igxName === 'IgxTreeGrid') { - @@ -63,8 +68,8 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -77,26 +82,33 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin @@if (igxName === 'IgxGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ... ``` + } ## API -In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically: + +In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically: [`moveColumn`]({environment:angularApiUrl}/classes/igxgridcomponent.html#moveColumn) - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `position` (representing a [`DropPosition`]({environment:angularApiUrl}/enums/dropposition.html) value), which determines whether to place the column before or after the target column. @@ -116,14 +128,15 @@ const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` -Note that when using the API, only the [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the `moving` property to true. +Note that when using the API, only the [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the `moving` property to true. ## Events -There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are [`columnMovingStart`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingStart), [`columnMoving`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMoving) and [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd). +There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are [`columnMovingStart`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingStart), [`columnMoving`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMoving) and [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd). You can subscribe to the [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) event of the [`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category after the Change On Year(%) column. @@if (igxName === 'IgxGrid') { + ```html @@ -138,9 +151,11 @@ public onColumnMovingEnd(event) { } } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -155,8 +170,10 @@ public onColumnMovingEnd(event) { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -171,6 +188,7 @@ public onColumnMovingEnd(event) { } } ``` + } ## Styling @@ -182,7 +200,7 @@ To get started with styling the @@igComponent column moving headers, we need to // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the `$ghost-header-background`, `$ghost-header-text-color` and the `$ghost-header-icon-color` parameters. @@ -208,9 +226,9 @@ The last step is to **include** the component mixins with its respective theme: @@if (igxName === 'IgxGrid') { - @@ -220,7 +238,7 @@ The last step is to **include** the component mixins with its respective theme: @@ -228,9 +246,9 @@ The last step is to **include** the component mixins with its respective theme: @@if (igxName === 'IgxHierarchicalGrid') { - @@ -240,27 +258,29 @@ The last step is to **include** the component mixins with its respective theme: >The sample will not be affected by the selected global theme from `Change Theme`. ## API References +
-* [ColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [ColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) ## Additional Resources +
-* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Pinning](column-pinning.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md) @@if (igxName !== 'IgxHierarchicalGrid') {* [Searching](search.md)}
Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/column-pinning.md b/en/components/grids_templates/column-pinning.md index a2d92a8835..fa992406bd 100644 --- a/en/components/grids_templates/column-pinning.md +++ b/en/components/grids_templates/column-pinning.md @@ -1,52 +1,60 @@ + @@if (igxName === 'IgxGrid') { --- + title: Angular Grid Column Pinning - Ignite UI for Angular _description: Want to use the Pinning feature of the Ignite UI for Angular when you develop your next app? Easily lock column or change column order with rich API. -_keywords: lock column, ignite ui for angular, infragistics  +_keywords: lock column, ignite ui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Angular Tree Grid Column Pinning - Ignite UI for Angular _description: Want to use the Pinning feature of the Ignite UI for Angular when you develop your next app? Easily lock column or change column order with rich API. -_keywords: lock column, ignite ui for angular, infragistics  +_keywords: lock column, ignite ui for angular, infragistics _canonicalLink: grid/column-pinning --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- + title: Angular Hierarchical Grid Column Pinning - Ignite UI for Angular _description: Want to use the Pinning feature of the Ignite UI for Angular when you develop your next app? Easily lock column or change column order with rich API. -_keywords: lock column, ignite ui for angular, infragistics  +_keywords: lock column, ignite ui for angular, infragistics _canonicalLink: grid/column-pinning --- + } -# Angular @@igComponent Column Pinning +# Angular @@igComponent Column Pinning + A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. **Column Pinning** in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the @@igComponent. The Material UI Grid has a built-in column pinning UI, which can be used through the @@igComponent's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API. ## Angular @@igComponent Column Pinning Example @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -57,6 +65,7 @@ A column or multiple columns can be pinned to the left or right side of the Angu Column pinning is controlled through the `pinned` input of the [`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html). Pinned columns are rendered on the left side of the @@igComponent by default and stay fixed through horizontal scrolling of the unpinned columns in the @@igComponent body. @@if (igxName === 'IgxGrid') { + ```html @@ -67,8 +76,10 @@ Column pinning is controlled through the `pinned` input of the [`igx-column`]({e ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -76,9 +87,11 @@ Column pinning is controlled through the `pinned` input of the [`igx-column`]({e ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -86,27 +99,34 @@ Column pinning is controlled through the `pinned` input of the [`igx-column`]({e ``` + } You may also use the @@igComponent's [`pinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pinColumn) or [`unpinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#unpinColumn) methods of the [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to pin or unpin columns by their field name: @@if (igxName === 'IgxGrid') { + ```typescript this.grid.pinColumn('AthleteNumber'); this.grid.unpinColumn('Name'); ``` + } @@if (igxName === 'IgxTreeGrid') { + ```typescript this.treeGrid.pinColumn('Title'); this.treeGrid.unpinColumn('Name'); ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript this.hierarchicalGrid.pinColumn('Artist'); this.hierarchicalGrid.unpinColumn('Debut'); ``` + } Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state. @@ -114,6 +134,7 @@ Both methods return a boolean value indicating whether their respective operatio A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the [`columnPin`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnPin) event and changing the [`insertAtIndex`]({environment:angularApiUrl}/interfaces/ipincolumneventargs.html#insertAtIndex) property of the event arguments to the desired position index. @@if (igxName === 'IgxGrid') { + ```html ``` @@ -125,8 +146,10 @@ public columnPinning(event) { } } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` @@ -138,8 +161,10 @@ public columnPinning(event) { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } ```typescript public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` + ### Demo @@if (igxName === 'IgxGrid') { - @@ -195,8 +228,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; @@if (igxName === 'IgxHierarchicalGrid') { - @@ -204,8 +237,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; @@if (igxName === 'IgxTreeGrid') { - @@ -215,8 +248,8 @@ Additionally, you can specify each column pinning location separately, allowing @@if (igxName === 'IgxGrid') { - @@ -224,8 +257,8 @@ Additionally, you can specify each column pinning location separately, allowing @@if (igxName === 'IgxHierarchicalGrid') { - @@ -233,8 +266,8 @@ Additionally, you can specify each column pinning location separately, allowing @@if (igxName === 'IgxTreeGrid') { - @@ -323,6 +356,7 @@ This can be done by creating a header template for the column with a custom icon ``` + } On click of the custom icon the pin state of the related column can be changed using the column's API methods. @@ -337,24 +371,24 @@ public toggleColumn(col: ColumnType) { @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -363,28 +397,32 @@ public toggleColumn(col: ColumnType) { ## Pinning Limitations -* Setting column widths in percentage (%) explicitly makes the @@igComponent body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the @@igComponent. +- Setting column widths in percentage (%) explicitly makes the @@igComponent body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the @@igComponent.
@@if (igxName === 'IgxGrid') { -## Styling -The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +## Styling + +The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the grid's Pinning styling. ### Importing global theme + To begin the customization of the Pinning feature, you need to import the `index` file, where all styling functions and mixins are located. + ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` ### Defining custom theme -Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the Pinning feature as desired. + +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the Pinning feature as desired. ```scss $custom-theme: grid-theme( @@ -393,13 +431,14 @@ $custom-theme: grid-theme( $pinned-border-color: #ffcd0f, $cell-active-border-color: #ffcd0f ); -``` +``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. ### Applying the custom theme -The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + +The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: ```scss @include css-vars($custom-theme); @@ -408,9 +447,9 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the ### Demo - @@ -420,24 +459,26 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the } ## API References -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) + +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) ## Additional Resources +
-* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md)
Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/column-resizing.md b/en/components/grids_templates/column-resizing.md index 706418e279..47bdbdc046 100644 --- a/en/components/grids_templates/column-resizing.md +++ b/en/components/grids_templates/column-resizing.md @@ -1,25 +1,32 @@ + @@if (igxName === 'IgxGrid') { --- + title: Angular Grid Column Resizing - Ignite UI for Angular _description: Start using Angular Grid Column Resizing in order to change the grid column width in an instant. Angular drag resizing has never been so easy. Try for free! _keywords: grid column resizing, igniteui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Angular Tree Grid Column Resizing - Ignite UI for Angular _description: Start using Angular Tree Grid Column Resizing in order to change the grid column width in an instant. Angular drag resizing has never been so easy. Try for free! _keywords: grid column resizing, igniteui for angular, infragistics _canonicalLink: grid/column-resizing --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- + title: Angular Hierarchical Grid Column Resizing - Ignite UI for Angular _description: Start using Angular Hierarchical Grid Column Resizing in order to change the grid column width in an instant. Angular drag resizing has never been so easy. Try for free! _keywords: grid column resizing, igniteui for angular, infragistics _canonicalLink: grid/column-resizing --- + } # Angular @@igComponent Column Resizing @@ -30,8 +37,8 @@ With deferred grid column resizing, the user will see a temporary resize indicat @@if (igxName === 'IgxGrid') { - @@ -39,8 +46,8 @@ With deferred grid column resizing, the user will see a temporary resize indicat } @@if (igxName === 'IgxTreeGrid') { - @@ -48,8 +55,8 @@ With deferred grid column resizing, the user will see a temporary resize indicat } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -59,18 +66,23 @@ With deferred grid column resizing, the user will see a temporary resize indicat **Column resizing** is also enabled per-column level, meaning that the [**@@igSelector**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#resizable) input of the [`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html). @@if (igxName !== 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } You can subscribe to the [`columnResized`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnResized) event of the [`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) object, are exposed through the event arguments. @@if (igxName === 'IgxGrid') { + ```html @@ -85,8 +97,10 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -101,8 +115,10 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -110,6 +126,7 @@ public onResize(event) { ... ``` + ```typescript public onResize(event) { this.col = event.column; @@ -117,6 +134,7 @@ public onResize(event) { this.nWidth = event.newWidth; } ``` + } ## Resizing columns in pixels/percentages @@ -126,6 +144,7 @@ Depending on the user scenario, the column width may be defined in pixels, perce This means that the following configuration is possible: @@if (igxName === 'IgxGrid') { + ```html @@ -133,8 +152,10 @@ This means that the following configuration is possible: ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -142,8 +163,10 @@ This means that the following configuration is possible: ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -153,6 +176,7 @@ This means that the following configuration is possible: ... ``` + } >[!NOTE] @@ -171,16 +195,20 @@ When resizing columns with width in percentages, the horizontal amount of the mo You can also configure the minimum and maximum allowable column widths. This is done via the [`minWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#minWidth) and [`maxWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#maxWidth) inputs of the [`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html). In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by [`minWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#minWidth) and [`maxWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#maxWidth). @@if (igxName !== 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } Mixing the minimum and maximum column width value types (pixels or percentages) is allowed. If the values set for minimum and maximum are set to percentages, the respective column size will be limited to those exact sizes similar to pixels. @@ -188,31 +216,39 @@ Mixing the minimum and maximum column width value types (pixels or percentages) This means the following configurations are possible: @@if (igxName !== 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } or @@if (igxName !== 'IgxHierarchicalGrid') { + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } ## Auto-size columns on double click @@ -222,20 +258,24 @@ Each column can be **auto sized** by double clicking the right side of the heade You can also auto-size a column dynamically using the exposed [`autosize()`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#autosize) method on [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html). @@if (igxName !== 'IgxHierarchicalGrid') { + ```typescript @ViewChild('@@igObjectRef') @@igObjectRef: @@igxNameComponent; let column = this.@@igObjectRef.columnList.filter(c => c.field === 'ID')[0]; column.autosize(); ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript @ViewChild('@@igObjectRef') @@igObjectRef: @@igxNameComponent; let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0]; column.autosize(); ``` + } ## Auto-size columns on initialization @@ -251,8 +291,8 @@ This approach is more performance optimized than auto-sizing post initialization @@if (igxName === 'IgxGrid') { - @@ -260,8 +300,8 @@ This approach is more performance optimized than auto-sizing post initialization } @@if (igxName === 'IgxTreeGrid') { - @@ -269,8 +309,8 @@ This approach is more performance optimized than auto-sizing post initialization } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -279,6 +319,7 @@ This approach is more performance optimized than auto-sizing post initialization ## Styling + To get started with the styling of the @@igComponent column resize line, we need to import the index file, where all the theme functions and component mixins live: ```scss @@ -286,7 +327,7 @@ To get started with the styling of the @@igComponent column resize line, we need // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` The simplest approach to achieve this is to create a new theme that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts many parameters as well as the `$resize-line-color` parameter. @@ -309,26 +350,26 @@ The last step is to **include** the component mixins with its respective theme: @@if (igxName === 'IgxGrid') { - } @@if (igxName === 'IgxTreeGrid') { - } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -338,27 +379,29 @@ The last step is to **include** the component mixins with its respective theme: >The sample will not be affected by the selected global theme from `Change Theme`. ## API References +
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#mixin-grid) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#mixin-grid) ## Additional Resources +
-* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Pinning](column-pinning.md) -* [Selection](selection.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column-pinning.md) +- [Selection](selection.md)
Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/column-selection.md b/en/components/grids_templates/column-selection.md index e06751c196..f89c80101f 100644 --- a/en/components/grids_templates/column-selection.md +++ b/en/components/grids_templates/column-selection.md @@ -1,31 +1,40 @@ + @@if (igxName === 'IgxGrid') { --- + title: Angular Grid Column Selection - Ignite UI for Angular _description: Learn how to configure column selection with Ignite UI for Angular Data grid. This makes grid interactions much easier and faster than ever. _keywords: column selection, igniteui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Angular Tree Grid Column Selection - Ignite UI for Angular _description: Learn how to configure column selection with Ignite UI for Angular Tree grid. This makes grid interactions much easier and faster than ever. _keywords: column selection, igniteui for angular, infragistics _canonicalLink: grid/column-selection --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- + title: Angular Hierarchical Grid Column Selection - Ignite UI for Angular _description: Learn how to configure column selection with Ignite UI for Angular Hierarchical grid. This makes grid interactions much easier and faster than ever. _keywords: column selection, igniteui for angular, infragistics _canonicalLink: grid/column-selection --- + } # Angular @@igComponent Column Selection + The Column selection feature provides an easy way to select an entire column with a single click. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich [`API`]({environment:angularApiUrl}) that allows for manipulation of the selection state, data extraction from the selected fractions and data analysis operations and visualizations. ## Angular Column Selection Example +
The sample below demonstrates the three types of @@igComponent's **column selection** behavior. Use the _column selection_ dropdown below to enable each of the available selection modes. @@ -40,8 +49,8 @@ The sample below demonstrates the three types of @@igComponent's **column select } - @@ -52,6 +61,7 @@ The sample below demonstrates the three types of @@igComponent's **column select The column selection feature can be enabled through the [`columnSelection`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnSelection) input, which takes [GridSelectionMode]({environment:angularApiUrl}/index.html#gridselectionmode) values. ## Interactions + The default selection mode is `none`. If set to `single` or `multiple` all of the presented columns will be [`selectable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#selectable). With that being said, in order to select a column, we just need to click on one, which will mark it as [`selected`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#selected). If the column is not selectable, no selection style will be applied on the header, while hovering. > [!NOTE] @@ -68,8 +78,8 @@ The default selection mode is `none`. If set to `single` or `multiple` all of th } - @@ -81,10 +91,12 @@ The default selection mode is `none`. If set to `single` or `multiple` all of th > The keyboard combinations are available only when the grid [`columnSelection`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnselection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: + - Multi-column selection - holding ctrl + click on every **selectable** header cell. - Range column selection - holding shift + click selects all **selectable** columns in between. ## API manipulations + The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as [`selected`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#selected) by setting the corresponding **setter**. > [!NOTE] @@ -93,6 +105,7 @@ The **API** provides some additional capabilities when it comes to the **non-vis More information regarding the API manipulations could be found in the [`API References`](#api-references) section. ## Styling + Before diving into the styling options, the core module and all component mixins need to be imported. ```scss @@ -100,7 +113,7 @@ Before diving into the styling options, the core module and all component mixins // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` >[!NOTE] >Please note that [`row selection`](row-selection.md) and [`column selection`](column-selection.md) can't be manipulated independently. They depend on the same `variables`. @@ -109,6 +122,7 @@ With that being said, let's move on and change the **selection** and **hover** s Following the simplest approach, let's define our custom **theme**. @@if (igxName === 'IgxTreeGrid') { + ```scss $custom-grid-theme: grid-theme( $row-selected-background: #011627, @@ -120,8 +134,10 @@ $custom-grid-theme: grid-theme( $expand-icon-hover-color: #b64b80 ); ``` + } @@if (igxName !== 'IgxTreeGrid') { + ```scss $custom-grid-theme: grid-theme( $row-selected-background: #011627, @@ -131,17 +147,20 @@ $custom-grid-theme: grid-theme( $header-selected-background: #011627 ); ``` + } The [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) accepts several parameters but those are the five responsible for changing the appearance of all selected columns: + - **$row-selected-background** - sets the background of the selected fraction. - **$row-selected-text-color** - sets the text color of the selected fraction - **$row-selected-hover-background** - sets the color of the hovered cell or bunch of cells. -- **$header-selected-text-color** - sets the text color of the selected column header +- **$header-selected-text-color** - sets the text color of the selected column header - **$header-selected-background** - sets the background color of the selected column header. ### Using CSS Variables + The last step is to include the custom `igx-grid` theme. ```scss @@ -151,8 +170,8 @@ The last step is to include the custom `igx-grid` theme. ### Demo - @@ -161,49 +180,54 @@ The last step is to include the custom `igx-grid` theme.
## API References +
The column selection UI has a few more APIs to explore, which are listed below. -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) properties: -* [columnSelection]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnSelection) -* [selectedColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectedColumns) -* [selectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectColumns) -* [deselectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectColumns) -* [selectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectAllColumns) -* [deselectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectAllColumns) + +- [columnSelection]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnSelection) +- [selectedColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectedColumns) +- [selectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectColumns) +- [deselectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectColumns) +- [selectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectAllColumns) +- [deselectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectAllColumns) [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) properties: -* [selectable]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selectable) -* [selected]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selected) + +- [selectable]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selectable) +- [selected]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selected) [`IgxColumnGrpupComponent`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) properties: -* [selectable]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selectable) -* [selected]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selected) + +- [selectable]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selectable) +- [selected]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selected) [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) events: -* [onColumnsSelectionChange]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onColumnsSelectionChange) + +- [onColumnsSelectionChange]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onColumnsSelectionChange) ## Additional Resources -* [@@igComponent overview](@@igMainTopic.md) -* [Selection](selection.md) -* [Cell selection](cell-selection.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Pinning](column-pinning.md) -* [Column Resizing](column-resizing.md) -* [Virtualization and Performance](virtualization.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Selection](selection.md) +- [Cell selection](cell-selection.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/column-types.md b/en/components/grids_templates/column-types.md index 97e48615c7..f60bd5e752 100644 --- a/en/components/grids_templates/column-types.md +++ b/en/components/grids_templates/column-types.md @@ -1,35 +1,43 @@ + @@if (igxName === 'IgxGrid') { --- + title: Column Data Types in Angular - Ignite UI for Angular _description: Handle cell and editing templates in Angular by choosing from several predefined column data types - number, string, date, boolean, currency and percent column. _keywords: column data type, ignite ui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Column Data Types in Angular - Ignite UI for Angular _description: Handle cell and editing templates in Angular by choosing from several predefined column data types - number, string, date, boolean, currency and percent column. _keywords: column data type, ignite ui for angular, infragistics --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- + title: Column Data Types in Angular - Ignite UI for Angular _description: SHandle cell and editing templates in Angular by choosing from several predefined column data types - number, string, date, boolean, currency and percent column. _keywords: column data type, ignite ui for angular, infragistics --- + } # Angular @@igComponent Column Types -Ignite UI for Angular @@igComponent provides a default handling of *number*, *string*, *date*, *boolean*, *currency* and *percent* column data types, based on which the appearance of the default and editing templates will be present. +Ignite UI for Angular @@igComponent provides a default handling of _number_, _string_, _date_, _boolean_, _currency_ and _percent_ column data types, based on which the appearance of the default and editing templates will be present. @@if (igxName === 'IgxGrid') { + ## Angular Column Types Example - } @@ -39,15 +47,19 @@ Ignite UI for Angular @@igComponent provides a default handling of *number*, *st } ## Default template + If you want to enable a data type-specific template, you should set the column [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) input otherwise the column will be treated as a string column since that is the default value for column dataType. Let's see what are the default templates for each type. ### String + This column [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) is not changing the appearance or format of the cell value. ### Number -If the [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) is set to *number*, the cell value will be formatted based on application or grid's [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) settings, as well as when [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - - Number of digits after the decimal point - - Decimal separator with `,` or `.` + +If the [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) is set to _number_, the cell value will be formatted based on application or grid's [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) settings, as well as when [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: + +- Number of digits after the decimal point +- Decimal separator with `,` or `.` ```ts public options = { @@ -62,9 +74,11 @@ public formatOptions = this.options; ``` ### DateTime, Date and Time + The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) format or [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom [date format](https://angular.io/api/common/DatePipe#pre-defined-format-options) or [timezone](https://angular.io/api/common/DatePipe#parameters): - - **format** - The default value for formatting the date is 'mediumDate'. Other available options are 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fulLTime' and etc. This is a full list of all available [pre-defined format options](https://angular.io/api/common/DatePipe#pre-defined-format-options). - - **timezone** - The user's local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Different timezone examples which will display the corresponding time of the location anywhere in the world: + +- **format** - The default value for formatting the date is 'mediumDate'. Other available options are 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fulLTime' and etc. This is a full list of all available [pre-defined format options](https://angular.io/api/common/DatePipe#pre-defined-format-options). +- **timezone** - The user's local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Different timezone examples which will display the corresponding time of the location anywhere in the world: ```ts @@ -101,9 +115,9 @@ Available timezones:
-The @@igComponent accepts date values of type *Date object*, *Number (milliseconds)*, *An ISO date-time string*. This section shows [how to configure a custom display format](@@if (igxName !== 'IgxGrid') {../grid/}grid.md#custom-display-format). +The @@igComponent accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](@@if (igxName !== 'IgxGrid') {../grid/}grid.md#custom-display-format). -As you can see in the sample, we specify a different format options in order to showcase the available formats for the specific column type. For example, below you can find the format options for the *time* portion of the date object: +As you can see in the sample, we specify a different format options in order to showcase the available formats for the specific column type. For example, below you can find the format options for the _time_ portion of the date object: ```ts // Time format with equivalent example @@ -116,17 +130,22 @@ public timeFormats = [ ``` #### Cell editing + When it comes to cell editing based on the column type a different editor will appear: + - dateTime - [IgxDateTimeEditor directive]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) will be used. This editor will give you a mask directions for the input elements part of the DateTime object. -- date - [IgxDatePicker component]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) will be used. -- time - [IgxTimePicker component]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) will be used. +- date - [IgxDatePicker component]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) will be used. +- time - [IgxTimePicker component]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) will be used. #### Filtering + The same editors listed above will be used when it comes to Quick Filtering/Excel-style Filtering. These are the following filtering operands that each type exposes: + - dateTime and date - Equals, Does Not Equal, Before, After, Today, Yesterday, This Month, Last Month, Next Month, This Year, Last Year, Next Year, Empty, Not Empty, Null, Not Null; - time - At, Not At, Before, After, At or Before, At or After, Empty, Not Empty, Null, Not Null; #### Summaries + The available Summary operands will be **Count**, **Earliest** (date/time) and **Latest** (date/time). #### Sorting @@ -134,9 +153,10 @@ The available Summary operands will be **Count**, **Earliest** (date/time) and * Time type column sorts based on the time portion of the object, ms will be disregarded. Date type column sorts based on the date portion, disregards the time portion. DateTime column sorts based on the full date + ### Boolean -The default template is using material icons for visualization of boolean values - 'clear' icon for *false* values and 'check' icon for *true* values. As for the editing template, it is using [igx-checkbox]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) component. +The default template is using material icons for visualization of boolean values - 'clear' icon for _false_ values and 'check' icon for _true_ values. As for the editing template, it is using [igx-checkbox]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) component. ```html @@ -146,9 +166,11 @@ The default template is using material icons for visualization of boolean values ### Currency #### Default template + The default template will show a numeric value with currency symbol that would be either prefixed or suffixed. Both currency symbol location and number value formatting is based on the provided Application [`LOCALE_ID`](https://angular.io/api/core/LOCALE_ID) or @@igComponent [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale). -*By using LOCALE_ID* +_By using LOCALE_ID_ + ```ts import { LOCALE_ID } from '@angular/core'; ... @@ -160,13 +182,14 @@ import { LOCALE_ID } from '@angular/core'; }) ``` -*By using Grid's locale* +_By using Grid's locale_ + ```html ``` -By using the [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) input the end-user can customize the number format by *decimal point*, *currencyCode* and *display*. +By using the [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) input the end-user can customize the number format by _decimal point_, _currencyCode_ and _display_. ```ts public options = { @@ -192,7 +215,7 @@ public formatOptions = this.options; *display - for the default en-US locale, the code USD can be represented by the narrow symbol $ or the wide symbol US$. -Upon editing of cell's value the *currency symbol* will be visible as suffix or prefix. More about that could be found in the official [Cell editing topic](cell-editing.md#cell-editing-templates). +Upon editing of cell's value the _currency symbol_ will be visible as suffix or prefix. More about that could be found in the official [Cell editing topic](cell-editing.md#cell-editing-templates). >[!NOTE] > When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0) @@ -278,15 +301,16 @@ public init(column: IgxColumnComponent) { ## API References -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) -* Column [pipeArgs]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) -* @@igComponent [locale]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) -* Column [dataType]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) +- Column [pipeArgs]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) +- @@igComponent [locale]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) +- Column [dataType]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) ## Additional Resources +
-* For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates) -* [@@igComponent overview topic](@@igMainTopic.md) -* [Editing topic](editing.md) -* [Summaries topic](summaries.md) +- For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates) +- [@@igComponent overview topic](@@igMainTopic.md) +- [Editing topic](editing.md) +- [Summaries topic](summaries.md) diff --git a/en/components/grids_templates/conditional-cell-styling.md b/en/components/grids_templates/conditional-cell-styling.md index 6145d422c9..995c3f3b5d 100644 --- a/en/components/grids_templates/conditional-cell-styling.md +++ b/en/components/grids_templates/conditional-cell-styling.md @@ -1,28 +1,36 @@ + @@if (igxName === 'IgxGrid') { --- + title: Conditional Cell Styling in Angular Data Grid - Ignite UI for Angular _description: Let users identify different cells quickly. Define a variety of cell styles. Use the conditional cell styling in Angular Data grid to make cells stand out. _keywords: conditional styling, ignite ui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Conditional Cell Styling in Angular Tree Grid - Ignite UI for Angular _description: Let users identify different cells quickly. Define a variety of cell styles. Use the conditional cell styling in Angular Data grid to make cells stand out. _keywords: conditional styling, ignite ui for angular, infragistics _canonicalLink: grid/conditional-cell-styling --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- -title: Conditional Cell Styling in Angular Hierarchical Grid - Ignite UI for Angular  + +title: Conditional Cell Styling in Angular Hierarchical Grid - Ignite UI for Angular _description: Let users identify different cells quickly. Define a variety of cell styles. Use the conditional cell styling in Angular Data grid to make cells stand out. _keywords: conditional styling, ignite ui for angular, infragistics _canonicalLink: grid/conditional-cell-styling --- + } # Angular @@igComponent Conditional Styling + If you need to provide any custom styling in the @@igxName component, you can do it on either row or cell level. ## @@igComponent Conditional Row Styling @@ -30,6 +38,7 @@ If you need to provide any custom styling in the @@igxName component, you can do The @@igxName component in Ignite UI for Angular provides two ways to **conditional styling of rows** based on custom rules. @@if (igxName === 'IgxGrid') { + - By setting [`rowClasses`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowClasses) input on the @@igxName component; - By setting [`rowStyles`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowStyles) input on the @@igxName component; } @@ -45,6 +54,7 @@ The @@igxName component in Ignite UI for Angular provides two ways to **conditio Further in this topic wi will cover both of them in more details. ### Using rowClasses + @@if (igxName === 'IgxGrid') { You can conditionally style the @@igxName rows by setting the [`rowClasses`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowClasses) input and define custom rules. } @@ -56,27 +66,33 @@ You can conditionally style the @@igxName rows by setting the [`rowClasses`]({en } @@if (igxName === 'IgxGrid') { + ```html ... ``` + } @@if (igxName === 'IgxTreeGrid'){ + ```html ... ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ... ``` + } @@if (igxName === 'IgxGrid') { @@ -109,6 +125,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. } } ``` + > [!NOTE] > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. @@ -140,6 +157,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. ### Using rowStyles + Columns now expose the `rowStyles` property which allows conditional styling of the data rows. Similar to `rowClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). > The callback signature for both `rowStyles` and `rowClasses` is: @@ -151,6 +169,7 @@ Columns now expose the `rowStyles` property which allows conditional styling of Let's define our styles: @@if (igxName === 'IgxGrid') { + ```typescript // component.ts public rowStyles = { @@ -167,6 +186,7 @@ public rowStyles = { ... ``` + } @@if (igxName === 'IgxTreeGrid'){ @@ -196,6 +216,7 @@ public rowStyles = { ... ``` + } @@if (igxName === 'IgxHierarchicalGrid') { @@ -221,6 +242,7 @@ public childRowStyles = { ... ``` + } @@ -252,7 +274,9 @@ public childRowStyles = { ## @@igComponent Conditional Cell Styling + ## Overview + The @@igxName component in Ignite UI for Angular provides two ways to **conditional styling of cells** based on custom rules. - By setting the [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) input [`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellClasses) to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell. @@ -282,30 +306,38 @@ private downFontCondition = (rowData: any, columnKey: any): boolean => { ``` ### Using cellClasses + You can conditionally style the @@igxName cells by setting the [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) [`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellClasses) input and define custom rules. @@if (igxName === 'IgxGrid') { + ```html ``` + } @@if (igxName === 'IgxTreeGrid'){ + ```html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } The [`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellClasses) input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. @@if (igxName === 'IgxGrid') { + ```typescript // sample.component.ts @@ -336,8 +368,10 @@ public beatsPerMinuteClasses = { } } ``` + } @@if (igxName === 'IgxTreeGrid'){ + ```typescript // sample.component.ts @@ -368,8 +402,10 @@ public priceClasses = { } } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```typescript // sample.component.ts @@ -400,6 +436,7 @@ public grammyClasses = { } } ``` + } > [!NOTE] @@ -446,9 +483,11 @@ public styles = { ``` ### Using cellStyles + Columns now expose the `cellStyles` property which allows conditional styling of the column cells. Similar to `cellClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions). In the [sample above](#demo) we've created: + - Two different styles that will be applied based on the column index. - You will also change the `text color` based on even/odd rows. @@ -478,6 +517,7 @@ public evenColStyles = { On `ngOnInit` we will add the `cellStyles` configuration for each column of the predefined `columns` collection, which is used to create the @@igxName columns dynamically. @@if (igxName === 'IgxGrid') { + ```ts // component.ts public ngOnInit() { @@ -493,8 +533,10 @@ public ngOnInit() { this.applyCSS(); } ``` + } @@if (igxName === 'IgxTreeGrid') { + ```ts // component.ts public ngOnInit() { @@ -509,8 +551,10 @@ public ngOnInit() { this.applyCSS(); } ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```ts // component.ts public ngOnInit() { @@ -526,7 +570,9 @@ public ngOnInit() { this.applyCSS(); } ``` + } + ```ts public applyCSS() { this.columns.forEach((column, index) => { @@ -542,6 +588,7 @@ public updateCSS(css: string) { ``` @@if (igxName === 'IgxGrid') { + ```html // component.html ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html //component.html ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html ``` + } @@ -654,6 +706,7 @@ editDone(evt) { ``` @@if (igxName === 'IgxGrid') { + ```html @@ -661,8 +714,10 @@ editDone(evt) { ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html @@ -670,8 +725,10 @@ editDone(evt) { ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html @@ -679,38 +736,41 @@ editDone(evt) { ``` + } ## API References +
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) -* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#mixin-grid) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#mixin-grid) ## Additional Resources +
-* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Editing](editing.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Moving](column-moving.md) -* [Column Pinning](column-pinning.md) -* [Column Resizing](column-resizing.md) -* [Column Hiding](column-hiding.md) -* [Selection](selection.md) -* [Searching](search.md) -* [Toolbar](toolbar.md) -* [Multi-column Headers](multi-column-headers.md) -* [Size](display-density.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Editing](editing.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Column Hiding](column-hiding.md) +- [Selection](selection.md) +- [Searching](search.md) +- [Toolbar](toolbar.md) +- [Multi-column Headers](multi-column-headers.md) +- [Size](display-density.md)
Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/display-density.md b/en/components/grids_templates/display-density.md index d4caeb782b..da43305ebd 100644 --- a/en/components/grids_templates/display-density.md +++ b/en/components/grids_templates/display-density.md @@ -1,25 +1,32 @@ + @@if (igxName === 'IgxGrid') { --- + title: Angular Grid Size - Ignite UI for Angular _description: Learn how to apply size capabilities to the Data grid component. You can use a set of compact view options in the Ignite UI for Angular. _keywords: material density, size, igniteui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Angular Grid Size - Ignite UI for Angular _description: Learn how to apply size capabilities to the Tree grid component. You can use a set of compact view options in the Ignite UI for Angular. _keywords: material density, size igniteui for angular, infragistics _canonicalLink: grid/display-density --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- + title: Angular Grid Size - Ignite UI for Angular _description: Learn how to apply size capabilities to the Hierarchical grid component. You can use a set of compact view options in the Ignite UI for Angular. _keywords: material density, size, igniteui for angular, infragistics _canonicalLink: grid/display-density --- + } # Angular @@igComponent Size @@ -31,8 +38,8 @@ _canonicalLink: grid/display-density @@if (igxName === 'IgxGrid') { - @@ -40,8 +47,8 @@ _canonicalLink: grid/display-density } @@if (igxName === 'IgxTreeGrid') { - @@ -49,8 +56,8 @@ _canonicalLink: grid/display-density } @@if (igxName === 'IgxHierarchicalGrid') { - @@ -67,9 +74,10 @@ As you can see in the demo above, the [**@@igxName**]({environment:angularApiUrl ``` And now let's see in details how each option reflects on the @@igComponent component. When you switch between different sizes the height of each @@igComponent element and the corresponding paddings will be changed. Also if you want to apply custom column [**width**]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width), please consider the fact that it must be bigger than the sum of left and right padding. - - **--ig-size-large** - this is the default @@igComponent size with the lowest intense and row height equal to `50px`. Left and Right paddings are `24px`; Minimal column [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) is `80px`; - - **--ig-size-medium** - this is the middle size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) is `64px`; - - **--ig-size-small** - this is the smallest size with `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) is `56px`; + +- **--ig-size-large** - this is the default @@igComponent size with the lowest intense and row height equal to `50px`. Left and Right paddings are `24px`; Minimal column [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) is `80px`; +- **--ig-size-medium** - this is the middle size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) is `64px`; +- **--ig-size-small** - this is the smallest size with `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) is `56px`; > [!NOTE] > Please keep in mind that currently you **can not** override any of the sizes. @@ -111,6 +119,7 @@ public ngOnInit() { Now we can add the markup. @@if (igxName === 'IgxGrid') { + ```html
@@ -165,8 +174,10 @@ Now we can add the markup. ``` + } @@if (igxName === 'IgxTreeGrid') { + ```html
@@ -213,8 +224,10 @@ Now we can add the markup. ``` + } @@if (igxName === 'IgxHierarchicalGrid') { + ```html
@@ -254,6 +267,7 @@ Now we can add the markup. ``` + } Finally, let's provide the necessary logic in order to actually apply the size: @@ -276,8 +290,9 @@ protected get sizeStyle() { Another option that [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) provides for you, in order to be able to change the height of the rows in the @@igComponent, is the property [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight). So let's see in action how this property affects the @@igComponent layout along with the `--ig-size` CSS variable. Please keep in mind the following: - - `--ig-size` CSS variable will have **NO** impact on row height **if there is [rowHeight]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) specified**; - - `--ig-size` will **affect all of the rest elements in the @@igComponent**, as it has been described above; + +- `--ig-size` CSS variable will have **NO** impact on row height **if there is [rowHeight]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) specified**; +- `--ig-size` will **affect all of the rest elements in the @@igComponent**, as it has been described above; And now we can extend our sample and add [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowHeight) property to the @@igComponent: @@ -287,34 +302,35 @@ And now we can extend our sample and add [`rowHeight`]({environment:angularApiUr .............. ``` +
## API References
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
## Additional Resources -* [@@igComponent overview](@@igMainTopic.md) -* [Virtualization and Performance](virtualization.md) -* [Editing](editing.md) -* [Paging](paging.md) -* [Filtering](filtering.md) -* [Sorting](sorting.md) -* [Summaries](summaries.md) -* [Column Pinning](column-pinning.md) -* [Column Resizing](column-resizing.md) -* [Selection](selection.md) +- [@@igComponent overview](@@igMainTopic.md) +- [Virtualization and Performance](virtualization.md) +- [Editing](editing.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md) @@if (igxName !== 'IgxHierarchicalGrid') {* [Searching](search.md)}
Our community is active and always welcoming to new ideas. -* [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) +- [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/grids_templates/editing.md b/en/components/grids_templates/editing.md index f68d759b61..9cedc30753 100644 --- a/en/components/grids_templates/editing.md +++ b/en/components/grids_templates/editing.md @@ -1,29 +1,36 @@ + @@if (igxName === 'IgxGrid') { --- + title: Angular Grid Editing - Ignite UI for Angular _description: Get a powerful public API and an easy way to perform data manipulations like creating, updating, or deleting records. See the Angular data grid editing options! _keywords: data manipulation, ignite ui for angular, infragistics --- + } @@if (igxName === 'IgxTreeGrid') { --- + title: Angular Tree Grid Editing - Ignite UI for Angular _description: Get a powerful public API and an easy way to perform data manipulations like creating, updating, or deleting records. See the Angular data grid editing options! _keywords: data manipulation, ignite ui for angular, infragistics _canonicalLink: grid/editing --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- + title: Angular Hierarchical Grid Editing - Ignite UI for Angular _description: Get a powerful public API and an easy way to perform data manipulations like creating, updating, or deleting records. See the Angular data grid editing options! _keywords: data manipulation, ignite ui for angular, infragistics _canonicalLink: grid/editing --- + } -#### Action Strip +### Action Strip | Icon | Description | | ------------- | ------------------------ | @@ -234,27 +238,29 @@ Here's a breakdown of all icons as used by each component: | **add_row** | Used by the popup menu. | | **more_vert** | Used by the popup menu. | -#### Calendar +### Calendar | Icon | Description | | -------------- | ------------------------------------------------------- | | **arrow_prev** | Used by the header for navigating between months/years. | | **arrow_next** | Used by the header for navigating between months/years. | -#### Carousel +### Carousel | Icon | Description | | ----------------- | ----------------------------------- | | **carousel_prev** | Used for navigating between slides. | | **carousel_next** | Used for navigating between slides. | -#### Chip +### Chip + | Icon | Description | | ------------ | ----------------------------------------- | | **selected** | Used to indicate that a chip is selected. | | **remove** | Used for the remove button. | -#### Combo (incl. Simple Combo) +### Combo (incl. Simple Combo) + | Icon | Description | | ------------------ | ------------------------------------------------------------ | | **case_sensitive** | Used to indicate and toggle case-sensitive filtering. | @@ -262,29 +268,33 @@ Here's a breakdown of all icons as used by each component: | **input_expand** | Used for the toggle button when the combo menu is collapsed. | | **input_collapse** | Used for the toggle button when the combo menu is expanded. | -#### Date Picker +### Date Picker + | Icon | Description | | --------------- | ---------------------------------------------------- | | **today** | Used for the toggle button that triggers the picker. | | **input_clear** | Used for the clear button. | -#### Date Range Picker +### Date Range Picker + | Icon | Description | | -------------- | ---------------------------------------------------- | | **date_range** | Used for the toggle button that triggers the picker. | -#### Expansion Panel +### Expansion Panel + | Icon | Description | |------------- | ------------------------------------------------------------- | | **expand** | Used for the toggle button that triggers the expanded state. | | **collapse** | Used for the toggle button that triggers the collapsed state. | -#### Grid +### Grid + | Icon | Description | | -------------------- | ------------------------------------------------------------------------------ | | **add** | Used in excel-filter menu to add filter entry. | | **arrow_back** | Used in various UI elements for moving a column backwards. | -| **arrow_drop_down** | Used in various buttons to indicate togglable menus. | +| **arrow_drop_down** | Used in various buttons to indicate toggleable menus. | | **arrow_forward** | Used in various UI elements for moving a column forwards. | | **cancel** | Used in various UI elements for canceling operations. | | **chevron_right** | Used to indicate expandable menus, like in the excel style filtering. | @@ -293,7 +303,7 @@ Here's a breakdown of all icons as used by each component: | **drag_indicator** | Used to show a handle to indicate an item can be dragged. | | **error** | Used in editable cells to indicate erroneous data input. | | **expand_more** | Used by the excel filtering menu to indicate the addition of more filters. | -| **file_dowload** | Used by the excel filter exporter. | +| **file_download** | Used by the excel filter exporter. | | **filter_*** | Used for various filtering operands. | | **group_work** | Used by the group-by drop area. | | **hide** | Used by various UI elements for hiding columns. | @@ -317,12 +327,14 @@ Here's a breakdown of all icons as used by each component: | **unfold_more** | Used by the hierarchical grid to expand all rows. | | **view_column** | Used by the pivot data selector. | -#### Input Group +### Input Group + | Icon | Description | | --------------- | ---------------------------------------------------- | | **input_clear** | Used for the clear button. | -#### Paginator +### Paginator + | Icon | Description | | -------------- | ------------------------------------------------------------ | | **first_page** | Used by the button used for navigating to the first page. | @@ -330,7 +342,8 @@ Here's a breakdown of all icons as used by each component: | **prev** | Used by the button used for navigating to the previous page. | | **next** | Used by the button used for navigating to the next page. | -#### Query Builder +### Query Builder + | Icon | Description | | ------------ | ------------------------------------------------------------ | | **add** | Used by the button for adding new filter entries. | @@ -342,25 +355,29 @@ Here's a breakdown of all icons as used by each component: | **filter_*** | Used for various filtering operands. | -#### Select +### Select + | Icon | Description | | ------------------ | ----------------------------------------------------------- | | **input_expand** | Used for the toggle button when the select menu is collapsed. | | **input_collapse** | Used for the toggle button when the select menu is expanded. | -#### Tabs +### Tabs + | Icon | Description | | ------------ | ----------------------------------------------------------- | | **prev** | Used by the button used for navigating to the previous tab. | | **next** | Used by the button used for navigating to the next tab. | -#### Time Picker +### Time Picker + | Icon | Description | | ------------ | ---------------------------------------------------- | | **clock** | Used for the toggle button that triggers the picker. | -#### Tree +### Tree + | Icon | Description | | ----------------- | ---------------------------------------------------- | | **tree_expand** | Used for the toggle button that triggers the picker. | @@ -377,6 +394,7 @@ setFamily(name: string, meta: IconFamilyMeta): IgxIconService; ``` ### Icon References + Set ONLY if NOT already present the icon map: ```ts @@ -384,35 +402,42 @@ addIconRef(name: string, family: string, icon: IconMeta): void; ``` Set an Icon reference in the icon map (overridden if already present): + ```ts setIconRef(name: string, family: string, icon: IconMeta): void; ``` Get and Icon reference + ```ts getIconRef(family: string, name: string): IconReference; ``` ### SVG Icons + From URI: + ```ts addSvgIcon(name: string, url: string, family: string, stripMeta = false): void; ``` From string: + ```ts addSvgIconFromText(name: string, iconText: string, family: string, stripMeta = false): void; ``` ## API References +
-* [IgxIconService]({environment:angularApiUrl}/classes/igxiconservice.html) +- [IgxIconService]({environment:angularApiUrl}/classes/igxiconservice.html) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) +- [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/icon.md b/en/components/icon.md index f0bb1f9774..3564ebc867 100644 --- a/en/components/icon.md +++ b/en/components/icon.md @@ -10,8 +10,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI ## Angular Icon Example - @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Icon component, first you need to ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxIconModule` in your **app.module.ts** file. @@ -125,9 +125,9 @@ You can also use an SVG image as an icon. First, inject the [`IgxIconService`]({ Use the [`addSvgIcon`]({environment:angularApiUrl}/classes/igxiconservice.html#addSvgIcon) method to import the SVG file in cache. When the SVG is cached, it can be used anywhere in the application. The icon name and file URL path are the method's mandatory parameters; family can be specified as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the `addSvgIconFromText` method to import an SVG file, providing the SVG text content instead of the file URL. -* Have in mind that if there are two icons with the same name and the same family, the SVG icon will be displayed with priority. -* It is better not to provide image width and height in the SVG file. -* You may need additional polyfill scripts ("polyfills") for Internet Explorer. +- Have in mind that if there are two icons with the same name and the same family, the SVG icon will be displayed with priority. +- It is better not to provide image width and height in the SVG file. +- You may need additional polyfill scripts ("polyfills") for Internet Explorer. ```typescript constructor(private iconService: IgxIconService) { } @@ -142,8 +142,8 @@ public ngOnInit() { ``` - @@ -178,8 +178,8 @@ Now, we are ready to add the desired icon into our markup and customize it using } ``` - @@ -239,9 +239,9 @@ The last step is to pass the custom icon theme in our application: ### Demo - @@ -313,12 +313,47 @@ igx-icon { Learn more about it in the [Size](display-density.md) article. +### Styling with Tailwind + +You can style the `icon` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-icon`, `dark-icon`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [icon-theme]({environment:sassApiUrl}/themes#function-icon-theme). The syntax is as follows: + +```html +person +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your icon should look like this: + +
+ +
+ ## API References
-* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources @@ -326,5 +361,5 @@ Learn more about it in the [Size](display-density.md) article. Our community is active and always welcoming to new ideas. -* [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) +- [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/input-group.md b/en/components/input-group.md index e4ac9b6f60..838479fec7 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Input Group Component Overview + The `IgxInputGroupComponent` allows the user to enhance input elements like input, select, textarea, etc. This can be achieved by adding custom content like text, icons, buttons, custom validation, floating label, etc., on either side of them, as a prefix, suffix, or hint. ## Angular Input Group Example @@ -24,7 +25,7 @@ To get started with the Ignite UI for Angular Input Group component, first you n ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxInputGroupModule` in your **app.module.ts** file. @@ -83,9 +84,11 @@ Now that you have the Ignite UI for Angular Input Group module or directives imp ## Using the Angular Input Group ### Label & Input -You can read about the [`igxLabel`]({environment:angularApiUrl}/classes/igxlabeldirective.html) and [`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) directives as well as their validation, data binding and API in a separate topic [here](label-input.md). + +You can read about the [`igxLabel`]({environment:angularApiUrl}/classes/igxlabeldirective.html) and [`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) directives as well as their validation, data binding and API in the [Label & Input documentation](label-input.md). ### Prefix & Suffix + The `igx-prefix` or `igxPrefix` and `igx-suffix` or `igxSuffix` directives can contain or be attached to HTML elements, strings, icons or even other components. In the following sample we will create a new input field with a string **prefix** and an icon **suffix**: ```html @@ -105,6 +108,7 @@ The `igx-prefix` or `igxPrefix` and `igx-suffix` or `igxSuffix` directives can c
### Hints + The [`igx-hint`]({environment:angularApiUrl}/classes/igxhintdirective.html) directive provides a helper text placed below the input. It can be at the beginning or at the end of the input depending on the value of the [`position`]({environment:angularApiUrl}/classes/igxhintdirective.html#position) property. Let's add a hint to our phone input: ```html @@ -128,8 +132,10 @@ This is how the phone field with hint looks:
### Input Types & Input Group Type Token + The input group styles can be altered by using the [`type`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html#type) property of the [`igxInputGroup`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) component. The input group component supports the following types: `line` (default if type is not specified), `border`, `box`, and `search`. The `line`, `border`, and `box` types are made specifically for the `Material Design` themes. Setting those types with other themes will not have any effect on how the input group looks. An example of setting a specific type declaratively: + ```html ``` @@ -167,6 +173,7 @@ The input group component supports several themes - `material`, `fluent`, `boots ``` ### Typed Forms + The Ignite UI for Angular Input Group component can be used inside strictly typed reactive forms which are the default ones as of Angular 14. To find out more about the typed forms, you can check [Angular official documentation](https://angular.io/guide/typed-forms). ## Validation + The following samples demonstrate how to configure input validation when using [template-driven](https://angular.io/guide/forms) or [reactive forms](https://angular.io/guide/reactive-forms). ### Template-Driven Forms + Template-driven form validation is achieved by adding validation attributes, i.e., `required`, `minlength`, etc., to the `input` element. ```html @@ -250,6 +259,7 @@ The result from the above configurations could be seen in the below sample. Star ### Reactive Forms + Reactive form validation is achieved by adding validator functions directly to the form control model in the component class. After creating the control in the component class, it should be associated with a form control element in the template. ```ts @@ -263,6 +273,7 @@ constructor(fb: FormBuilder) { }); } ``` + ```html @@ -297,6 +308,7 @@ public get password() { return this.registrationForm.get('password'); } ``` + ```html ... @@ -324,6 +336,7 @@ The result from the above configurations could be seen in the below sample. Simi ### Custom Validators + Some input fields may require custom validation and this could be achieved via custom validators. When the value is invalid, the validator will generate a set of errors that could be used to display a specific error message. Below is an example of a simple custom reactive form validator that validates if the entered email address contains a predefined value and generates different errors based on where the value occurs. @@ -365,6 +378,7 @@ private emailValidator(val: string): ValidatorFn { ``` ### Cross-Field Validation + In some scenarios, the validation of one control may depend on the value of another one. To evaluate both controls in a single custom validator the validation should be performed in a common ancestor control, i.e., the `FormGroup`. The validator retrieves the child controls by calling the `FormGroup`'s `get` method, compares the values and if the validation fails, a set of errors is generated for the `FormGroup`. This will set only the form's state to invalid. To set the control's state, we could use the [`setErrors`](https://angular.io/api/forms/AbstractControl#seterrors) method and add the generated errors manually. Then, when the validation is successful, the errors could be removed by using the [`setValue`](https://angular.io/api/forms/AbstractControl#setvalue) method that will rerun the control's validation for the provided value. @@ -438,6 +452,307 @@ The below sample demonstrates how the built-in validators could be used in combi ## Styling +### Input Group Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$box-background
$box-background-hoverHover background for the input box
$box-background-focusFocus background for the input box
$box-disabled-backgroundDisabled state background
$placeholder-colorPlaceholder text color
$hover-placeholder-colorHover color for placeholder text
$idle-text-colorDefault text color
$filled-text-colorText color when input is filled
$filled-text-hover-colorThe input text color in the filled state on hover
$focused-text-colorText color when input is focused
$idle-secondary-colorSecondary text color when idle
$input-prefix-colorText color for prefix inside the input box
$input-prefix-color--filledText color for filled prefix
$input-prefix-color--focusedText color for focused prefix
$input-suffix-colorText color for suffix inside the input box
$input-suffix-color--filledText color for filled suffix
$input-suffix-color--focusedText color for focused suffix
$disabled-placeholder-colorPlaceholder color when input is disabled
$disabled-text-colorText color when input is disabled
$idle-bottom-line-color
$hover-bottom-line-colorHover color for the bottom line under the input
$focused-bottom-line-colorFocused color for the bottom line
$focused-secondary-colorThe label color in the focused state
$border-colorThe border color for input groups of type border
$focused-border-colorThe focused input border color for input groups of type border
$border-color
$hover-border-colorHover color for the input border
$focused-border-colorBorder color when input is focused
$focused-secondary-colorThe label color in the focused state
$input-prefix-background
$input-prefix-colorText color for prefix inside the input box
$input-prefix-background--filledThe background color of an input prefix in the filled state
$input-prefix-background--focusedThe background color of an input prefix in the focused state
$input-suffix-background
$input-suffix-colorText color for suffix inside the input box
$input-suffix-background--filledThe background color of an input suffix in the filled state
$input-suffix-background--focusedThe background color of an input suffix in the focused state
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$idle-text-colorText color for the search input
$idle-secondary-colorSecondary text color when idle
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$input-prefix-color--filledPrefix color when input is filled
$input-suffix-color--filledSuffix color when input is filled
$input-prefix-color--focusedPrefix color when input is focused
$input-suffix-color--focusedSuffix color when input is focused
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$border-color
$hover-border-colorHover color for the input border
$focused-border-colorBorder color when input is focused
$focused-secondary-colorThe label color in the focused state
$input-prefix-background
$input-suffix-backgroundThe background color of an input suffix in the idle state
$input-prefix-colorText color for prefix inside the input box
$input-prefix-color--filledText color for filled prefix
$input-suffix-background
$input-prefix-backgroundThe background color of an input prefix in the idle state
$input-suffix-colorText color for suffix inside the input box
$input-suffix-color--filledText color for filled suffix
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$idle-secondary-colorSecondary text color when idle
$idle-text-colorText color for the search input
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$input-prefix-color--filledPrefix color when input is filled
$input-suffix-color--filledSuffix color when input is filled
$input-prefix-color--focusedPrefix color when input is focused
$input-suffix-color--focusedSuffix color when input is focused
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$border-color
$focused-border-colorBorder color when input is focused
$focused-secondary-colorThe label color in the focused state
$input-prefix-background
$input-suffix-backgroundThe background color of an input suffix in the idle state
$input-prefix-colorText color for prefix inside the input box
$input-prefix-color--filledText color for filled prefix
$input-suffix-background
$input-prefix-backgroundThe background color of an input prefix in the idle state
$input-suffix-colorText color for suffix inside the input box
$input-suffix-color--filledText color for filled suffix
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$idle-secondary-colorSecondary text color when idle
$idle-text-colorText color for the search input
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$input-prefix-color--filledPrefix color when input is filled
$input-suffix-color--filledSuffix color when input is filled
$input-prefix-color--focusedPrefix color when input is focused
$input-suffix-color--focusedSuffix color when input is focused
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$idle-bottom-line-color
$hover-bottom-line-colorHover color for the bottom line under the input
$focused-bottom-line-colorFocused color for the bottom line
$border-color
$hover-border-colorHover color for the input border
$focused-border-colorBorder color when input is focused
$input-prefix-background
$input-prefix-colorText color for prefix inside the input box
$input-prefix-background--filledThe background color of an input prefix in the filled state
$input-prefix-background--focusedThe background color of an input prefix in the focused state
$input-suffix-background
$input-suffix-colorText color for suffix inside the input box
$input-suffix-background--filledThe background color of an input suffix in the filled state
$input-suffix-background--focusedThe background color of an input suffix in the focused state
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$box-background-hoverHover background for search input
$idle-text-colorText color for the search input
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+
+
+ + The first thing we need to do, in order to get started with the input group styling, is to include the `index` file in our style file: ```scss @@ -452,7 +767,7 @@ To customize the appearance of input groups, you can create a new theme by exten Even by specifying just a few core parameters—like colors for the border or background—you'll get a fully styled input group with consistent state-based styles (hover, focus, etc.) applied for you. Here’s a simple example: - + ```scss $custom-input-group: input-group-theme( $box-background: #57a5cd, @@ -466,7 +781,7 @@ The last step is to include the newly created theme: @include css-vars($custom-input-group); ``` -In the sample below, you can see how using the input group with customized CSS variables allows you to create a design that visually resembles the one used in the [`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) design system. +In the sample below, you can see how using the input group with customized CSS variables allows you to create a design that visually resembles the one used in the [`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) design system. -> [!NOTE] -> The sample uses the [Indigo Light](themes/sass/schemas.md#predefined-schemas) schema. - +>[!NOTE] +>The sample uses the [Indigo Light](themes/sass/schemas.md#predefined-schemas) schema. >[!NOTE] >If your page includes multiple types of input groups — such as `box`, `border`, `line`, or `search` — it's best to scope your theme variables to the specific input group type.
For example:
@@ -487,28 +801,84 @@ For instance, setting a dark `$box-background` globally could cause the borders
+### Styling with Tailwind + +You can style the input group using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-input-group`, `dark-input-group`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme). The syntax is as follows: + +```html +
+ + +359 + + + + phone + + Ex.: +359 888 123 456 + + + + ... + + + + ... + +
+``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your inputs should look like this: + +
+ +
+ ## API References +
-* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html) -* [IgxInputGroup Types]({environment:angularApiUrl}/index.html#IgxInputGroupType) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html) +- [IgxInputGroup Types]({environment:angularApiUrl}/index.html#IgxInputGroupType) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) ## Theming Dependencies -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) + +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources +
Related topics: -* [Label & Input](label-input.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Label & Input](label-input.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/inputs/color-editor.md b/en/components/inputs/color-editor.md index e4b0243621..5c1623fd22 100644 --- a/en/components/inputs/color-editor.md +++ b/en/components/inputs/color-editor.md @@ -56,8 +56,8 @@ The simplest way to start using the `ColorEditor` is as follows: The Color Editor component raises the following events: -* valueChanged -* valueChanging +- valueChanged +- valueChanging @@ -65,7 +65,7 @@ The Color Editor component raises the following events: @ViewChild("colorEditor", { static: true } ) private colorEditor: IgxColorEditorComponent public ngAfterViewInit(): void -{ +{ this.colorEditor.valueChanged.subscribe(this.onValueChanged); } @@ -80,9 +80,9 @@ public onValueChanged = (e: any) => { ## API References -* `ColorEditor` +- `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) +- [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/interactivity/accessibility-compliance.md b/en/components/interactivity/accessibility-compliance.md index 762db42bf3..36cabeb617 100644 --- a/en/components/interactivity/accessibility-compliance.md +++ b/en/components/interactivity/accessibility-compliance.md @@ -33,11 +33,11 @@ The matrix below provides a high-level outline of the accessibility support prov |**Component/Principle**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*Grids*||||||||||||||||| +|_Grids_||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|*Other*||||||||||*||||||| +|_Other_||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -78,31 +78,31 @@ The matrix below provides a high-level outline of the accessibility support prov |||| |---|---|---| ||The control/component is completely accessible in this particular area.|| -|\*|The control/component is accessible in this particular area after implementing certain configurations| Example: Use *NoopAnimationsModule* utility module to allow disabling of animations| +|\*|The control/component is accessible in this particular area after implementing certain configurations| Example: Use _NoopAnimationsModule_ utility module to allow disabling of animations| ||The control/component is not entirely accessible unless you perform some sort of action.|| |'white space'|this particular rule does not apply to the control|| > \[!WARNING] -> The table above is relevant only to the *Default theme* of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. +> The table above is relevant only to the _Default theme_ of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. ### Compliance Information -* **a** - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). -* **b** - Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. -* **c** - Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. -* **d** - Documents shall be organized so they are readable without requiring an associated style sheet. -* **e** - Redundant text links shall be provided for each active region of a server-side image map. -* **f** - Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. -* **g** - Row and column headers shall be identified for data tables. -* **h** - Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. -* **i** - Frames shall be titled with text that facilitates frame identification and navigation. -* **j** - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. -* **k** - A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. -* **l** - When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. -* **m** - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through l. -* **n** - When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. -* **o** - A method shall be provided that permits users to skip repetitive navigation links. -* **p** - When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. +- **a** - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). +- **b** - Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. +- **c** - Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. +- **d** - Documents shall be organized so they are readable without requiring an associated style sheet. +- **e** - Redundant text links shall be provided for each active region of a server-side image map. +- **f** - Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. +- **g** - Row and column headers shall be identified for data tables. +- **h** - Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. +- **i** - Frames shall be titled with text that facilitates frame identification and navigation. +- **j** - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. +- **k** - A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. +- **l** - When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. +- **m** - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through l. +- **n** - When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. +- **o** - A method shall be provided that permits users to skip repetitive navigation links. +- **p** - When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. ## WCAG compliance @@ -110,11 +110,11 @@ The matrix below provides a high-level outline of the accessibility support prov |**Component/Guideline**|1.1
|1.2
|1.3
|1.4
|2.1
|2.2
|2.3
|2.4
|2.5
|3.1
|3.2
|3.3
|4.1
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*Grids*|||||||||||||| +|_Grids_|||||||||||||| | - Grid|||||||*||||*||| | - HierarchicalGrid|||||||*||||*||| | - TreeGrid|||||||*||||*||| -|*Other*|||||||*||||||| +|_Other_|||||||*||||||| | - Avatar|||||||||||*||| | - Badge|||||||||||*||| | - Banner||||||*|*||||*||| @@ -159,32 +159,32 @@ The matrix below provides a high-level outline of the accessibility support prov |||| |---|---|---| ||The control/component is completely accessible in this particular area.|| -|\*|The control/component is accessible in this particular area after implementing certain configurations|Example 1: Guideline 2.2. For certain components additional actions and time parameters should be set; Example 2: Guideline 2.3. Use *NoopAnimationsModule* utility module to allow disabling of animations;| +|\*|The control/component is accessible in this particular area after implementing certain configurations|Example 1: Guideline 2.2. For certain components additional actions and time parameters should be set; Example 2: Guideline 2.3. Use _NoopAnimationsModule_ utility module to allow disabling of animations;| ||The control/component is not entirely accessible unless you perform some sort of action.|| |'white space'|this particular rule does not apply to the control|| > \[!WARNING] -> The table above is relevant only to the *Default theme* of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. +> The table above is relevant only to the _Default theme_ of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. ### Compliance Information -* **Principle 1 - Perceivable** - Information and user interface components must be presentable to users in ways they can perceive - * Guideline 1.1 – **Text Alternatives** - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. - * Guideline 1.2 – **Time-based Media** - Provide alternatives for time-based media. - * Guideline 1.3 – **Adaptable** - Create content that can be presented in different ways (for example simpler layout) without losing information or structure. - * Guideline 1.4 – **Distinguishable** - Make it easier for users to see and hear content including separating foreground from background. -* **Principle 2 – Operable** - User interface components and navigation must be operable. - * Guideline 2.1 – **Keyboard Accessible** - Make all functionality available from a keyboard. - * Guideline 2.2 – **Enough Time** - Provide users enough time to read and use content. - * Guideline 2.3 – **Seizures and Physical Reactions** - Do not design content in a way that is known to cause seizures or physical reactions. - * Guideline 2.4 – **Navigable** - Provide ways to help users navigate, find content, and determine where they are. - * Guideline 2.5 – **Input Modalities** - Make it easier for users to operate functionality through various inputs beyond keyboard. -* **Principle 3 – Understandable** - Information and the operation of the user interface must be understandable. - * Guideline 3.1 – **Readable** - Make text content readable and understandable. - * Guideline 3.2 – **Predictable** - Make Web pages appear and operate in predictable ways. - * Guideline 3.3 – **Input Assistance** - Help users avoid and correct mistakes. -* **Principle 4 – Robust** - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. - * Guideline 4.1 – **Compatible** - Maximize compatibility with current and future user agents, including assistive technologies +- **Principle 1 - Perceivable** - Information and user interface components must be presentable to users in ways they can perceive + - Guideline 1.1 – **Text Alternatives** - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. + - Guideline 1.2 – **Time-based Media** - Provide alternatives for time-based media. + - Guideline 1.3 – **Adaptable** - Create content that can be presented in different ways (for example simpler layout) without losing information or structure. + - Guideline 1.4 – **Distinguishable** - Make it easier for users to see and hear content including separating foreground from background. +- **Principle 2 – Operable** - User interface components and navigation must be operable. + - Guideline 2.1 – **Keyboard Accessible** - Make all functionality available from a keyboard. + - Guideline 2.2 – **Enough Time** - Provide users enough time to read and use content. + - Guideline 2.3 – **Seizures and Physical Reactions** - Do not design content in a way that is known to cause seizures or physical reactions. + - Guideline 2.4 – **Navigable** - Provide ways to help users navigate, find content, and determine where they are. + - Guideline 2.5 – **Input Modalities** - Make it easier for users to operate functionality through various inputs beyond keyboard. +- **Principle 3 – Understandable** - Information and the operation of the user interface must be understandable. + - Guideline 3.1 – **Readable** - Make text content readable and understandable. + - Guideline 3.2 – **Predictable** - Make Web pages appear and operate in predictable ways. + - Guideline 3.3 – **Input Assistance** - Help users avoid and correct mistakes. +- **Principle 4 – Robust** - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. + - Guideline 4.1 – **Compatible** - Maximize compatibility with current and future user agents, including assistive technologies ## WAI-ARIA Support diff --git a/en/components/interactivity/right-to-left-support.md b/en/components/interactivity/right-to-left-support.md index 0ded863e37..10e8adc7c5 100644 --- a/en/components/interactivity/right-to-left-support.md +++ b/en/components/interactivity/right-to-left-support.md @@ -6,7 +6,7 @@ _keywords: aria support, a11y, ignite ui for angular, infragistics # Right to Left (RTL) Support -## RTL Support +## RTL Support Most of the components in the framework have full **right-to-left (RTL)** support by default. To switch to RTL direction you have to just set the `dir` attribute of the html or the body tag to `rtl`. @@ -19,25 +19,25 @@ Example: Currently the following components have only partial RTL support: -* Grid (igx-grid) +- Grid (igx-grid) ## RTL Example + This section shows the accessibility (ARIA) support of the framework as well as how easily manageable the `directionality` of the components is. - - -## Enabling right-to-left direction (RTL). +## Enabling right-to-left direction (RTL) `Ignite UI for Angular` library is susceptible to `directionality` manipulation only when setting `dir` attribute on either `html` or `body` tags. Also, keep in mind that runtime changes are not detected. With that being said, let's move to the following example: -### Step 1 - Setting the 'dir' attribute on both tags. +### Step 1 - Setting the 'dir' attribute on both tags ```html @@ -45,7 +45,7 @@ With that being said, let's move to the following example: ``` -or +or ```html @@ -57,7 +57,8 @@ or > [!NOTE] > Currently the `Igx-Grid` component only has partial(visual) RTL support. - > [!NOTE] +> > ### Breaking Changes in version 13.2.0 +> > All RTL specific stylesheets have been removed, therefore, users who have previously used *-rtl.css specific themes must switch to the regular theme files. diff --git a/en/components/label-input.md b/en/components/label-input.md index d6ab1b255b..722bc64c3b 100644 --- a/en/components/label-input.md +++ b/en/components/label-input.md @@ -10,8 +10,8 @@ The Ignite UI for Angular Input and Label directives are used to decorate and st ## Angular Label & Input Example - @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Label and Input directives, first ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxInputGroupModule` in your **app.module.ts** file. @@ -101,8 +101,8 @@ We can validate an `input` using the [`required`]({environment:angularApiUrl}/cl ``` - @@ -159,8 +159,8 @@ If you want the text in an input element, marked with `igxInput`, to be selected > [!NOTE] > To use the [`igxTextSelection`]({environment:angularApiUrl}/classes/igxtextselectiondirective.html) directive, you have to import the [`IgxTextSelectionModule`]({environment:angularApiUrl}/classes/igxtextselectionmodule.html). - @@ -168,15 +168,15 @@ If you want the text in an input element, marked with `igxInput`, to be selected ## Input Group -The Ignite UI for Angular Input Group component helps developers to create easy-to-use and aesthetic forms. For further information, you can read the separate topic [here](input-group.md). +The Ignite UI for Angular Input Group component helps developers to create easy-to-use and aesthetic forms. For further information, you can read the [Input Group documentation](input-group.md). ## API References
-* [IgxLabelDirective]({environment:angularApiUrl}/classes/igxlabeldirective.html) -* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxLabelDirective]({environment:angularApiUrl}/classes/igxlabeldirective.html) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Additional Resources @@ -184,9 +184,9 @@ The Ignite UI for Angular Input Group component helps developers to create easy- Related topics: -* [Input Group](input-group.md) +- [Input Group](input-group.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/layout.md b/en/components/layout.md index 36aa184fc9..c8e53c246f 100644 --- a/en/components/layout.md +++ b/en/components/layout.md @@ -5,15 +5,17 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Layout Manager Directives Overview +

The Ignite UI for Angular Layout Directives allow developers to specify a layout direction for any children of the container it is applied to. Layout can flow vertically or horizontally, with controls for wrapping, justification, and alignment.

## Angular Layout Manager Example +
- @@ -30,8 +32,8 @@ Use the [**igxLayout**]({environment:angularApiUrl}/classes/igxlayoutdirective.h Use [`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#dir)`="row"`. - @@ -42,8 +44,8 @@ Use [`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html Use [`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#dir)`="column"`. - @@ -56,11 +58,12 @@ Use [`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html
### Customize the order of the elements + Customize the order of the element by using `igxFlexOrder`. - @@ -71,8 +74,8 @@ Customize the order of the element by using `igxFlexOrder`. Use [`igxLayoutJustify`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#justify)`="space-between | space-around"`. - @@ -80,10 +83,11 @@ Use [`igxLayoutJustify`]({environment:angularApiUrl}/classes/igxlayoutdirective.
### Position elements along the main axis + Use [`igxLayoutJustify`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#justify)`="flex-start | center | flex-end"` to specify the elements position along the main axis according to your preferences. - @@ -91,21 +95,23 @@ Use [`igxLayoutJustify`]({environment:angularApiUrl}/classes/igxlayoutdirective.
### Position elements along the cross axis + Use [`igxLayoutItemAlign`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#itemalign)`="flex-start | center | flex-end"` to specify the elements position along the cross axis according to your preferences. -
-### You can also wrap elements +### You can also wrap elements + Use [`igxLayoutWrap`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#wrap)`="wrap"`. - @@ -115,12 +121,14 @@ container's **immediate** children.
## Nesting + Use the [`igxFlex`]({environment:angularApiUrl}/classes/igxflexdirective.html) directive for elements inside an [`igxLayout`]({environment:angularApiUrl}/classes/igxlayoutdirective.html) parent to control specific flexbox properties.
## API References +
-* [IgxLayoutDirective]({environment:angularApiUrl}/classes/igxlayoutdirective.html) -* [IgxFlexDirective]({environment:angularApiUrl}/classes/igxflexdirective.html) \ No newline at end of file +- [IgxLayoutDirective]({environment:angularApiUrl}/classes/igxlayoutdirective.html) +- [IgxFlexDirective]({environment:angularApiUrl}/classes/igxflexdirective.html) diff --git a/en/components/linear-gauge.md b/en/components/linear-gauge.md index b3b20ca79d..f82bcabfc4 100644 --- a/en/components/linear-gauge.md +++ b/en/components/linear-gauge.md @@ -373,12 +373,12 @@ For your convenience, all above code snippets are combined into one code block b The following is a list of API members mentioned in the above sections: -* [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) -* [`IgxLinearGraphRangeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargraphrangecomponent.html) +- [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) +- [`IgxLinearGraphRangeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargraphrangecomponent.html) ## Additional Resources You can find more information about other types of gauges in these topics: -* [Bullet Graph](bullet-graph.md) -* [Radial Gauge](radial-gauge.md) +- [Bullet Graph](bullet-graph.md) +- [Radial Gauge](radial-gauge.md) diff --git a/en/components/linear-progress.md b/en/components/linear-progress.md index 895af19322..74e4e30fc5 100644 --- a/en/components/linear-progress.md +++ b/en/components/linear-progress.md @@ -10,8 +10,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI ## Angular Linear Progress Example - @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Linear Progress component, first y ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxProgressBarModule` in the **app.module.ts** file: @@ -99,8 +99,8 @@ Let's see how we can create different types of progress bars that can be both st So if we set up everything correctly, you should see the following in your browser: - @@ -175,8 +175,8 @@ public positionEnd: IgxTextAlign = IgxTextAlign.END; Let's take a look at how this turned out: - @@ -184,7 +184,6 @@ Let's take a look at how this turned out: > [!NOTE] > If the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) input value is not defined, the progress update is **1% of the [`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) value**. In case you want the progress to be faster, the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value should be greater than (**[`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) * 1%**), respectfully for slower progress the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) should be less than the default progress update. - > [!NOTE] > If the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value is defined greater than the [`value`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#value) input, there is only one update, which gets **the value that is passed for progress update**. @@ -235,8 +234,8 @@ public decrementProgress() { After completing the steps above, our progress bar should look like this: - @@ -272,9 +271,9 @@ The last step is to **include** the component theme in our application. ### Demo - @@ -282,6 +281,6 @@ The last step is to **include** the component theme in our application.
-* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) -* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) -* [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html) +- [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) +- [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) +- [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html) diff --git a/en/components/list.md b/en/components/list.md index aaedf276a7..40eae5c073 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -9,6 +9,7 @@ _keywords: angular list, ignite ui for angular, angular list component, angular The Ignite UI for Angular List component displays rows of items and supports one or more header items as well as search and filtering of list items. Each list item is completely templatable and supports any valid HTML or [Angular component](https://www.infragistics.com/products/ignite-ui-angular). The list component also providers built in panning functionality, templates for empty and loading states, and supports virtualization for large lists using the [`IgxForOf`](for-of.md) directive. ## Angular List Example + The following example represents a list populated with contacts with a _name_ and a _phone number_ properties. The [`IgxList`]({environment:angularApiUrl}/classes/igxlistcomponent.html) component uses [`igx-avatar`](avatar.md) and [`igx-icon`](icon.md) to enrich the user experience and expose the capabilities of setting avatar picture and different icon for _favorite a contact_. In addition, the List View expose sorting capabilities achieved by using our filtering pipe. ``` + ```css /* contacts.component.css */ @@ -374,6 +376,7 @@ And here's the result of all that work: Now that we have such a beautiful Angular list with contacts and their phone numbers, why don't we implement an ability to call a contact. The [`IgxList`]({environment:angularApiUrl}/classes/igxlistcomponent.html) has the perfect solution for this - list item panning. To do this you have to implement the following steps: + - Enable the panning using the [`allowLeftPanning`]({environment:angularApiUrl}/classes/igxlistcomponent.html#allowLeftPanning) and/or the [`allowRightPanning`]({environment:angularApiUrl}/classes/igxlistcomponent.html#allowRightPanning) properties - Define template(s) for the left and/or right panning - Handle the list item's panning event(s) and perform the desired action @@ -442,6 +445,7 @@ igx-icon { align-items: center; } ``` + And finally here is the typescript code handling the panning events: ```typescript @@ -598,6 +602,7 @@ If you prefer to use the list theming function, there are parameters available t
## Chat Component + The following sample demonstrates how to create a simple chat component using **IgxList**.
-## Applying theme to the list component +## Styling + +### List Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
+ $background + $header-backgroundThe list header background color.
$item-backgroundThe list item background color.
+ $header-background + $header-text-colorThe list header text color.
+
$item-background
+ 		$backgroundThe list background color.
$header-backgroundThe list header background color.
$item-background-hoverThe list item hover background color.
$item-text-colorThe list item text color.
$item-title-colorThe list item title color.
$item-action-colorThe list item action color.
$item-thumbnail-colorThe list item thumbnail color.
$item-subtitle-colorThe list item subtitle color.
$border-colorThe list border color. (Fluent/Bootstrap only)
+
$item-background-hover
+ 		$item-background-activeThe active list item background color.
$item-text-color-hoverThe list item hover text color.
$item-title-color-hoverThe list item hover title color.
$item-action-color-hoverThe list item hover action color.
$item-thumbnail-color-hoverThe list item hover thumbnail color.
$item-subtitle-color-hoverThe list item hover subtitle color.
+
$item-background-active
+ 		$item-background-selectedThe selected list item background color.
$item-text-color-activeThe active list item text color.
$item-title-color-activeThe active list item title color.
$item-action-color-activeThe active list item action color.
$item-thumbnail-color-activeThe active list item thumbnail color.
$item-subtitle-color-activeThe active list item subtitle color.
+
$item-background-selected
+ 		$item-text-color-selectedThe selected list item text color.
$item-title-color-selectedThe selected list item title color.
$item-action-color-selectedThe selected list item action color.
$item-thumbnail-color-selectedThe selected list item thumbnail color.
$item-subtitle-color-selectedThe selected list item subtitle color.
+ +> **Note:** The actual results may vary depending on the theme variant. + 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. @@ -643,31 +846,69 @@ The result is the following: For full list of parameters that you can change for the list component please refer to: [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme) +### Styling with Tailwind + +You can style the list using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-list`, `dark-list`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [list-theme]({environment:sassApiUrl}/themes#function-list-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your list should look like this: + +
+ +
+ ## API References In this article we covered a lot of ground with the Angular list component. We created a list of contact items. Used some additional Ignite UI for Angular components inside our list items, like avatars and icons. Created some custom item layout and styled it. Finally, we added list filtering. The list component has a few more APIs to explore, which are listed below. -* [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html) -* [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme) -* [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) +- [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html) +- [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme) +- [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) Additional Angular components that were used: -* [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) -* [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) +- [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme)
## Theming Dependencies -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) -* [IgxAvatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) + +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxAvatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. -* [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) +- [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/maps/map-api.md b/en/components/maps/map-api.md index 8907a85207..b590aecfb4 100644 --- a/en/components/maps/map-api.md +++ b/en/components/maps/map-api.md @@ -10,26 +10,26 @@ namespace: Infragistics.Controls.Maps The Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) has the following API members: -* [`zoomable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#zoomable) -* [`zoomToGeographic`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#zoomToGeographic) -* [`worldRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#worldRect) -* [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) -* [`windowScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#windowScale) -* [`getGeographicFromZoom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#getGeographicFromZoom) -* [`getGeographicPoint`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#getGeographicPoint) -* [`getPixelPoint`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#getPixelPoint) +- [`zoomable`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#zoomable) +- [`zoomToGeographic`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#zoomToGeographic) +- [`worldRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#worldRect) +- [`windowRect`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) +- [`windowScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#windowScale) +- [`getGeographicFromZoom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#getGeographicFromZoom) +- [`getGeographicPoint`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#getGeographicPoint) +- [`getPixelPoint`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#getPixelPoint) -# Angular Geographic Series Types +## Angular Geographic Series Types The Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) has 7 types of series and they have the `ItemsSource` property for data binding. -* [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) -* [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) -* [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) -* [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) -* [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) -* [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) -* [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) +- [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) +- [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) +- [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) In addition, each type of series has specific properties for mapping data items and styling their appearance: @@ -37,55 +37,55 @@ In addition, each type of series has specific properties for mapping data items The Angular [`IgxGeographicSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) (Geographic Marker Series) has the following API members: -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) -* [`markerType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmarkerseriescomponent.html#markerType) -* [`markerBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmarkerseriescomponent.html#markerBrush) -* [`markerOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmarkerseriescomponent.html#markerOutline) +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) +- [`markerType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmarkerseriescomponent.html#markerType) +- [`markerBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmarkerseriescomponent.html#markerBrush) +- [`markerOutline`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmarkerseriescomponent.html#markerOutline) ## Angular Geographic Bubble Series API The Angular [`IgxGeographicProportionalSymbolSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) (Geographic Bubble Series) has the following API members: -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath) -* [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) -* [`radiusScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusScale) -* [`fillScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#fillScale) -* [`fillMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#fillMemberPath) +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath) +- [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) +- [`radiusScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusScale) +- [`fillScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#fillScale) +- [`fillMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#fillMemberPath) ## Angular Geographic Shape Series API The Angular [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) and [`IgxGeographicPolylineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) have the same API members: -* [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) -* `Thickness` -* `Brush` -* `Outline` +- [`shapeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) +- `Thickness` +- `Brush` +- `Outline` ## Angular Geographic Area Series API The Angular [`IgxGeographicScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) has the following API members: -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) -* [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) -* [`colorScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorScale) +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) +- [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) +- [`colorScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorScale) ## Angular Geographic Contour Series API The Angular [`IgxGeographicContourLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) has the following API members: -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) -* [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) -* [`fillScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#fillScale) +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) +- [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) +- [`fillScale`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#fillScale) ## Angular Geographic HD Series API The Angular [`IgxGeographicHighDensityScatterSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) has the following API members: -* [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) -* [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) -* [`heatMaximumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor) -* [`heatMinimumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) +- [`latitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) +- [`heatMaximumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor) +- [`heatMinimumColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) diff --git a/en/components/mask.md b/en/components/mask.md index ef82029ff5..dac00d0138 100644 --- a/en/components/mask.md +++ b/en/components/mask.md @@ -10,8 +10,8 @@ By applying the [`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective ## Angular Mask Example - @@ -25,9 +25,9 @@ To get started with the Ignite UI for Angular Mask directive, first you need to ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. -The next step is to import the `IgxMaskModule` and `IgxInputGroupModule` in your **app.module.ts** file. +The next step is to import the `IgxMaskModule` and `IgxInputGroupModule` in your **app.module.ts** file. >[!NOTE] >[`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.html) directive is used on an input of type **text**. @@ -78,6 +78,7 @@ Now that you have the Ignite UI for Angular Mask module or directive imported, y ## Using the Angular Mask ### Supported Built-in Mask Rules +
| Mask Character | Description | @@ -93,6 +94,7 @@ Now that you have the Ignite UI for Angular Mask module or directive imported, y | C | any keyboard character | ### Apply Mask on Input + In the following example, we apply a phone number with an extension mask to an input. ```html @@ -113,7 +115,8 @@ If configured properly, you should see the demo sample in your browser. > The `IgxMaskDirective` supports IME input and updates the mask when composition ends. ### Bind to Formatted/Raw Value -Use the [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeLiterals) input to configure which input value (formatted or raw) to bind in your form when a specific mask is applied. By default, [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeLiterals) is set to *false* and the raw value is used. + +Use the [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeLiterals) input to configure which input value (formatted or raw) to bind in your form when a specific mask is applied. By default, [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeLiterals) is set to _false_ and the raw value is used. ```html @@ -152,13 +155,14 @@ public clear() { ``` - ### Validate Masked Values + In addition to setting a mask to an input, you can validate the entered value as well. The following example implements masks, validation and notification for invalid data using the Mask directive and Snack Bar component. ```html @@ -193,14 +197,15 @@ private notify(snackbar, message, input) { ``` -
### Text Selection + You can force the component to select all of the input text on focus using [`igxTextSelection`]({environment:angularApiUrl}/classes/igxtextselectiondirective.html). Find more info on `igxTextSelection` at [Label & Input](label-input.md#focus--text-selection). Import the `IgxTextSelectionModule` in your **app.module.ts** file: @@ -232,9 +237,11 @@ You can see how this works in the previous sample. >In order for the component to work properly, it is crucial to set `igxTextSelection` after the `igxMask` directive. The reason for this is both directives operate on the input `focus` event so text selection should happen after the mask is set. ### Apply additional formatting on focus and blur + In addition to the default mask behavior, the user can implement his own custom pipes and take advantage of the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedValuePipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayValuePipe) input properties, to transform the value to a desired output when the input gets or loses focus. This will not affect the underlying model value. Let's demonstrate how this can be achieved! Implement two pipes that will append/remove a '%' sign at the end of the displayed value: + ```typescript @Pipe({ name: 'displayFormat' }) export class DisplayFormatPipe implements PipeTransform { @@ -267,6 +274,7 @@ public value = 100; public displayFormat = new DisplayFormatPipe(); public inputFormat = new InputFormatPipe(); ``` + ```html @@ -285,18 +293,20 @@ public inputFormat = new InputFormatPipe(); As a result, a '%' sign should be appended to the value on blur (i.e. when the user clicks outside the input) and will be removed once the input gets focus! - ### Adding a placeholder + The user can also take advantage of the [`placeholder`]({environment:angularApiUrl}/classes/igxmaskdirective.html#placeholder) input property, which serves the purpose of the native input placeholder attribute. If no value is provided for the [`placeholder`]({environment:angularApiUrl}/classes/igxmaskdirective.html#placeholder), the value set for the mask is used. ```typescript value = null; ``` + ```html @@ -309,23 +319,26 @@ value = null; ``` - ## API References +
-* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxMaskDirective]({environment:angularApiUrl}/classes/igxmaskdirective.html) -* [IgxSnackbarComponent]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxMaskDirective]({environment:angularApiUrl}/classes/igxmaskdirective.html) +- [IgxSnackbarComponent]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) + +- [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/material-icons-extended.md b/en/components/material-icons-extended.md index 330c34d4b3..c614b06e99 100644 --- a/en/components/material-icons-extended.md +++ b/en/components/material-icons-extended.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Material Icons Extended +

The Ignite UI Material Icons Extended is a subset of icons that extends the material icon set by Google.

@@ -72,11 +73,12 @@ To use the icons in your component template: For more information and other types of usage, go to our [GitHub Repository](https://github.com/IgniteUI/material-icons-extended). ## Additional Resources +
[`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) Our community is active and always welcoming to new ideas. -* [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) +- [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 b024a89566..fc9367d3c0 100644 --- a/en/components/menus/toolbar.md +++ b/en/components/menus/toolbar.md @@ -74,14 +74,14 @@ IgrDataChartCategoryTrendLineModule.register(); The following is a list of the different [`IgxToolActionComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html) items that you can add to the Toolbar. -* [`IgxToolActionButtonComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionbuttoncomponent.html) -* [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) -* [`IgxToolActionIconButtonComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconbuttoncomponent.html) -* [`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html) -* [`IgxToolActionLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html) -* [`IgxToolActionNumberInputComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionnumberinputcomponent.html) -* [`IgxToolActionRadioComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html) -* [`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) +- [`IgxToolActionButtonComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionbuttoncomponent.html) +- [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) +- [`IgxToolActionIconButtonComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconbuttoncomponent.html) +- [`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html) +- [`IgxToolActionLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html) +- [`IgxToolActionNumberInputComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionnumberinputcomponent.html) +- [`IgxToolActionRadioComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html) +- [`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) Each of these tools exposes an `OnCommand` event that is triggered by mouse click. Note, the [`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html) is a wrapper for other tools that can also be wrapped inside a [`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html). @@ -119,39 +119,39 @@ Several pre-existing [`IgxToolActionComponent`]({environment:dvApiBaseUrl}/produ Zooming Actions -* `ZoomMenu`: A [`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html) that exposes three [`IgxToolActionLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html) items to invoke the [`zoomIn`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#zoomIn) and [`zoomOut`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#zoomOut) methods on the chart for increasing/decreasing the chart's zoom level including `ZoomReset`, a [`IgxToolActionLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html) that invokes the [`resetZoom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#resetZoom) method on the chart to reset the zoom level to it's default position. +- `ZoomMenu`: A [`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html) that exposes three [`IgxToolActionLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html) items to invoke the [`zoomIn`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#zoomIn) and [`zoomOut`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#zoomOut) methods on the chart for increasing/decreasing the chart's zoom level including `ZoomReset`, a [`IgxToolActionLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html) that invokes the [`resetZoom`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#resetZoom) method on the chart to reset the zoom level to it's default position. Trend Actions -* `AnalyzeMenu`: A [`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html) that contains several options for configuring different options of the chart. -* `AnalyzeHeader`: A sub section header. -* `LinesMenu`: A sub menu containing various tools for showing different dashed horizontal lines on the chart. - * `LinesHeader`: A sub menu section header for the following three tools: - * `MaxValue`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that displays a dashed horizontal line along the yAxis at the maximum value of the series. - * `MinValue`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that displays a dashed horizontal line along the yAxis at the minimum value of the series. - * `Average`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that displays a dashed horizontal line along the yAxis at the average value of the series. -* `TrendsMenu`: A sub menu containing tools for applying various trendlines to the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) plot area. - * `TrendsHeader`: A sub menu section header for the following three tools: - * **Exponential**: A [`IgxToolActionRadioComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html) that sets the [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) on each series in the chart to **ExponentialFit**. - * **Linear**: A [`IgxToolActionRadioComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html) that sets the [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) on each series in the chart to **LinearFit**. - * **Logarithmic**: A [`IgxToolActionRadioComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html) that sets the [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) on each series in the the chart to **LogarithmicFit**. -* `HelpersHeader`: A sub section header. -* `SeriesAvg`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that adds or removes a [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) to the chart's series collection using the [`ValueLayerValueMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) of type [`Average`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Average). -* `ValueLabelsMenu`: A sub menu containing various tools for showing different annotations on the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html)'s plot area. - * `ValueLabelsHeader`: A sub menu section header for the following tools: - * `ShowValueLabels`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that toggles data point values by using a [`IgxCalloutLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html). - * `ShowLastValueLabel`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that toggles final value axis annotations by using a [`IgxFinalValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html). -* `ShowCrosshairs`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that toggles mouse-over crosshair annotations via the chart's [`crosshairsDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode) property. -* `ShowGridlines`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that toggles extra gridlines by applying a `MajorStroke` to the X-Axis. +- `AnalyzeMenu`: A [`IgxToolActionIconMenuComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioniconmenucomponent.html) that contains several options for configuring different options of the chart. +- `AnalyzeHeader`: A sub section header. +- `LinesMenu`: A sub menu containing various tools for showing different dashed horizontal lines on the chart. + - `LinesHeader`: A sub menu section header for the following three tools: + - `MaxValue`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that displays a dashed horizontal line along the yAxis at the maximum value of the series. + - `MinValue`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that displays a dashed horizontal line along the yAxis at the minimum value of the series. + - `Average`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that displays a dashed horizontal line along the yAxis at the average value of the series. +- `TrendsMenu`: A sub menu containing tools for applying various trendlines to the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) plot area. + - `TrendsHeader`: A sub menu section header for the following three tools: + - **Exponential**: A [`IgxToolActionRadioComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html) that sets the [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) on each series in the chart to **ExponentialFit**. + - **Linear**: A [`IgxToolActionRadioComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html) that sets the [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) on each series in the chart to **LinearFit**. + - **Logarithmic**: A [`IgxToolActionRadioComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionradiocomponent.html) that sets the [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) on each series in the the chart to **LogarithmicFit**. +- `HelpersHeader`: A sub section header. +- `SeriesAvg`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that adds or removes a [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) to the chart's series collection using the [`ValueLayerValueMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) of type [`Average`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Average). +- `ValueLabelsMenu`: A sub menu containing various tools for showing different annotations on the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html)'s plot area. + - `ValueLabelsHeader`: A sub menu section header for the following tools: + - `ShowValueLabels`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that toggles data point values by using a [`IgxCalloutLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html). + - `ShowLastValueLabel`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that toggles final value axis annotations by using a [`IgxFinalValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html). +- `ShowCrosshairs`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that toggles mouse-over crosshair annotations via the chart's [`crosshairsDisplayMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode) property. +- `ShowGridlines`: A [`IgxToolActionCheckboxComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncheckboxcomponent.html) that toggles extra gridlines by applying a `MajorStroke` to the X-Axis. Save to Image Action -* `CopyAsImage`: A [`IgxToolActionLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html) that exposes an option to copy the chart to the clipboard. -* `CopyHeader`: A sub section header. +- `CopyAsImage`: A [`IgxToolActionLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionlabelcomponent.html) that exposes an option to copy the chart to the clipboard. +- `CopyHeader`: A sub section header. ### SVG Icons -When adding tools manually, icons can be assigned using the `RenderIconFromText` method. There are three paramters to pass in this method. The first is the icon collection name defined on the tool eg. [`iconCollectionName`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#iconCollectionName). The second is the name of the icon defined on the tool eg. [`iconName`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#iconName), followed by adding the SVG string. +When adding tools manually, icons can be assigned using the `RenderIconFromText` method. There are three parameters to pass in this method. The first is the icon collection name defined on the tool eg. [`iconCollectionName`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#iconCollectionName). The second is the name of the icon defined on the tool eg. [`iconName`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#iconName), for example 'Undo'. ### Data URL Icons @@ -202,6 +202,7 @@ public toolbarCustomIconOnViewInit(): void { } ``` +```razor @code { protected override async Task OnAfterRenderAsync(bool firstRender) @@ -217,10 +218,10 @@ public toolbarCustomIconOnViewInit(): void { public void ToolbarCustomIconOnViewInit() { - this.toolbar.EnsureReady().ContinueWith(new Action((e) => - { + this.toolbar.EnsureReady().ContinueWith(new Action((e) => + { this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg"); - })); + })); } } @@ -239,7 +240,7 @@ By default the Angular Toolbar is shown horizontally, but it also has the abilit ``` -The following example demonstrates the vertical orientation of the Angular Toolbar. @@ -306,10 +307,10 @@ The icon component can be styled by using it's `BaseTheme` property directly to ## API References -* [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.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) +- [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/month-picker.md b/en/components/month-picker.md index b12a4e975e..63113ec85d 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -5,13 +5,15 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Month Picker Component Overview +

The Ignite UI for Angular Month Picker component provides an easy and intuitive way to select a specific month and year using a month-year calendar view. The component allows you bind it's value to a date object, and users can change the month and year portion of the date object through the month picker component UI. It also supports localization.

## Angular Month Picker Example + What you see here is a basic Angular Month Picker example with a the component's default view, enabling users to select the year and the month. - @@ -23,9 +25,9 @@ To get started with the Ignite UI for Angular Month Picker component, first you ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. -The first step is to import the `IgxCalendarModule` inside our **app.module.ts** file. +The first step is to import the `IgxCalendarModule` inside our **app.module.ts** file. >[!NOTE] > The [**IgxMonthPickerComponent**]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) and **optionally** the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) for touch interactions, so they need to be added to the AppModule as well: @@ -84,6 +86,7 @@ To add the Angular Month Picker in a template, use the following code: ``` ### Setting date + Set a date to [`IgxMonthPickerComponent`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) using the [`value`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html#value) input. ```typescript @@ -107,6 +110,7 @@ To create a two-way data-binding, set `ngModel` like this: ``` ### Formatting + Change the month picker display format, using the [`formatOptions`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html#formatoptions) inputs. ```html @@ -125,6 +129,7 @@ public numericFormatOptions = { ``` ### Localization + Use the [`locale`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html#locale) input, to customize the Ignite UI for Angular Month Picker localization. ```html @@ -145,35 +150,37 @@ public formatOptions = { Here is an example of localizing and formatting the month picker component: - ## Keyboard navigation + - When the **igxMonthPicker** component is focused, use - - PageUp key to move to the previous year, - - PageDown key to move to the next year, - - Home key to focus the first month of the current year, - - End key to focus the last month of the current year, - - Tab key to navigate through the sub-header buttons. + - PageUp key to move to the previous year, + - PageDown key to move to the next year, + - Home key to focus the first month of the current year, + - End key to focus the last month of the current year, + - Tab key to navigate through the sub-header buttons. - When `<` (previous) or `>` (next) year button (in the sub-header) is focused, use - - Space or Enter key to scroll into view the next or previous year. + - Space or Enter key to scroll into view the next or previous year. -- When years button (in the sub-header) is focused, use - - Space or Enter key to open the years view, - - Right or Left arrow key to scroll the previous/next year into view. +- When years button (in the sub-header) is focused, use + - Space or Enter key to open the years view, + - Right or Left arrow key to scroll the previous/next year into view. -- When a month inside the months view is focused, use - - Arrow keys to navigate through the months, - - Home key to focus the first month inside the months view, - - End key to focus the last month inside the months view, - - Enter key to select the currently focused month and close the view, - - Tab key to navigate through the months. +- When a month inside the months view is focused, use + - Arrow keys to navigate through the months, + - Home key to focus the first month inside the months view, + - End key to focus the last month inside the months view, + - Enter key to select the currently focused month and close the view, + - Tab key to navigate through the months. ## Styling + To get started with styling the month picker, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -181,7 +188,8 @@ To get started with styling the month picker, we need to import the `index` file // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` + The month picker uses the calendar's theme, so we have to create a new theme that extends the [`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme). To style the month picker's items, you can set the `$content-background` parameter. Optionally, you can also set `$header-background` if you want to override the rest of the properties. These two parameters act as the foundation for the theme and are used to automatically generate the appropriate background and foreground colors for all interaction states, such as hover, selected, and active. @@ -202,31 +210,72 @@ After everything's done, your component should look like this: ### Demo - - +### Styling with Tailwind + +You can style the `month picker` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. The month picker is styled through the calendar theme, so you have to use the calendar utility class + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-calendar`, `dark-calendar`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme). The syntax is as follows: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your month picker should look like this: + +
+ +
+ ## API References +
-* [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) -* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) +- [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) +- [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) ## Theming Dependencies +
-* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [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) +- [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/navbar.md b/en/components/navbar.md index efdb51faf4..f962efd13d 100644 --- a/en/components/navbar.md +++ b/en/components/navbar.md @@ -10,8 +10,8 @@ The Ignite UI for Angular [`IgxNavbarComponent`]({environment:angularApiUrl}/cla ## Angular Navbar Example - @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Navbar component, first you need t ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The first step is to import the `IgxNavbarModule` inside our **app.module.ts** file. @@ -125,8 +125,8 @@ Next, we need to update our template with an icon button for each of the options If all went well, you should see the following in your browser: - @@ -168,8 +168,8 @@ What if we want to use a custom template for our app navigation on the left-most Finally, this is how our navbar should look like with its custom action button icon: - @@ -209,8 +209,8 @@ export class NavbarSample3Component { If the sample is configured properly, you should see the following in your browser: - @@ -262,8 +262,8 @@ If we want to provide a custom content for a navbar's title, we can achieve this > [!NOTE] > If [`igx-navbar-title`]({environment:angularApiUrl}/classes/igxnavbartitledirective.html) or [`igxNavbarTitle`]({environment:angularApiUrl}/classes/igxnavbartitledirective.html) is provided, the default [`title`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#title) will not be used. - @@ -271,6 +271,37 @@ If we want to provide a custom content for a navbar's title, we can achieve this ## Styling +### Navbar Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$text-colorThe navbar text color
$idle-icon-colorThe navbar idle icon color
$hover-icon-colorThe navbar hover icon color
$border-color (changes for indigo variant only)The navbar border color
$idle-icon-color$hover-icon-colorThe navbar hover icon color
+ To get started with styling the navbar, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -300,37 +331,74 @@ The last step is to pass the newly created theme to the `css-vars` mixin: ### Demo -
+### Styling with Tailwind + +You can style the navbar using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-navbar`, `dark-navbar`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [navbar-theme]({environment:sassApiUrl}/themes#function-navbar-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your navbar should look like this: + +
+ +
+ ## API References
-* [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) -* [IgxNavbarActionDirective]({environment:angularApiUrl}/classes/igxnavbaractiondirective.html) -* [IgxNavbarTitleDirective]({environment:angularApiUrl}/classes/igxnavbartitledirective.html) -* [IgxNavbarComponent Styles]({environment:sassApiUrl}/themes#function-navbar-theme) +- [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) +- [IgxNavbarActionDirective]({environment:angularApiUrl}/classes/igxnavbaractiondirective.html) +- [IgxNavbarTitleDirective]({environment:angularApiUrl}/classes/igxnavbartitledirective.html) +- [IgxNavbarComponent Styles]({environment:sassApiUrl}/themes#function-navbar-theme) Additional components and/or directives with relative APIs that were used: -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) ## Theming Dependencies -* [IgxIconComponent Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxButtonComponent Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxIconComponent Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxButtonComponent Theme]({environment:sassApiUrl}/themes#function-button-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. -* [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) +- [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/navdrawer.md b/en/components/navdrawer.md index 2132114692..6e118bfc5f 100644 --- a/en/components/navdrawer.md +++ b/en/components/navdrawer.md @@ -12,8 +12,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
- @@ -27,7 +27,7 @@ To get started with the Ignite UI for Angular Navigation Drawer component, first ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The first step is to import the `IgxNavigationDrawerModule` inside our **app.module.ts** file. @@ -139,7 +139,6 @@ The [`igxRipple`](ripple.md) directive completes the look and feel: ``` > An additional template decorated with `igxDrawerMini` directive can be provided for the alternative [Mini variant](#mini-variant) as closed state. - > [!NOTE] > The Navigation Drawer can float above the content or be pinned alongside it. By default the drawer switches between those modes depending on the viewport size. See [Modes](#modes) for more information. @@ -173,7 +172,7 @@ export class AppComponent { } ``` -There are various ways to open and close the drawer. Input properties can be bound to app state, programatic access to the API in the component using a [`@ViewChild(IgxNavigationDrawerComponent)`](https://angular.io/api/core/ViewChild) reference or even in this case using the `#drawer` [template reference variable](https://angular.io/guide/template-syntax#ref-vars): +There are various ways to open and close the drawer. Input properties can be bound to app state, programmatic access to the API in the component using a [`@ViewChild(IgxNavigationDrawerComponent)`](https://angular.io/api/core/ViewChild) reference or even in this case using the `#drawer` [template reference variable](https://angular.io/guide/template-syntax#ref-vars): ```html @@ -256,8 +255,8 @@ Here's how that would look applied to the previous example: Now the changed example should look like that: - @@ -305,8 +304,8 @@ The mini variant is commonly used in a persistent setup, so we've set `pin` and ``` - @@ -373,7 +372,7 @@ import { RouterModule } from '@angular/router'; @NgModule([ imports: [ RouterModule, - RouterModule.forRoot([ + RouterModule.forRoot([ {path: 'avatar', component: NavDrawerRoutingComponent}, {path: 'badge', component: NavDrawerRoutingComponent}, {path: 'button-group', component: NavDrawerRoutingComponent} @@ -384,8 +383,8 @@ import { RouterModule } from '@angular/router'; After all the steps above are completed, your app should look like that: - @@ -445,8 +444,8 @@ There's also child routing extracted from the `children` property of the routes. The example below presents the capabilities of a hierarchical structure by using predefined data with topic names and links. The structure allows users to easily generate functional and detailed navigations and to have the ability to define each element whether to be displayed as a link or as an indicator. - @@ -490,11 +489,11 @@ The last step is to **include** the component theme in our application. @include css-vars($custom-theme); } } -``` +``` - @@ -502,5 +501,5 @@ The last step is to **include** the component theme in our application. ## API and Style References -* [IgxNavigationDrawerComponent API]({environment:angularApiUrl}/classes/igxnavigationdrawercomponent.html) -* [IgxNavigationDrawerComponent Styles]({environment:sassApiUrl}/themes#function-navdrawer-theme) +- [IgxNavigationDrawerComponent API]({environment:angularApiUrl}/classes/igxnavigationdrawercomponent.html) +- [IgxNavigationDrawerComponent Styles]({environment:sassApiUrl}/themes#function-navdrawer-theme) diff --git a/en/components/nuget-feed.md b/en/components/nuget-feed.md index 0c000d8312..3525879d7b 100644 --- a/en/components/nuget-feed.md +++ b/en/components/nuget-feed.md @@ -11,23 +11,23 @@ Infragistics provides a private NuGet feed for licensed users to consume and add This topic contains the following sections: -- Adding the Infragistics NuGet Feed with Visual Studio -- Adding the Infragistics NuGet Feed with the NuGet CLI +- Adding the Infragistics NuGet Feed with Visual Studio +- Adding the Infragistics NuGet Feed with the NuGet CLI ## Adding with Visual Studio 1 - In Visual Studio, select **Tools → NuGet Package Manager → Package Manager Settings**. - +NuGet Package Manager Setting Menu Item 2 - In the **Package Sources** section, add a new package source by clicking the **plus icon** in the top right corner of the dialog. -- Set the Name to **Infragistics** -- Set the Source to **** +- Set the Name to **Infragistics** +- Set the Source to **** Click the **Update** button, and then click **OK** to close the dialog. - +NuGet Package Manager Package Sources - Infragistics Server > [!Note] > When adding a NuGet package from this source for the first time, you will be prompted for your Infragistics credentials. @@ -38,7 +38,9 @@ This topic contains the following sections: 2 - Open a command prompt in the folder path of the `nuget.exe` file you just downloaded. 3 - Execute the following command - nuget sources add -name "Infragistics" -source "https://packages.infragistics.com/nuget/licensed" -username "your login email" -password "your password" +```bash +nuget sources add -name "Infragistics" -source "https://packages.infragistics.com/nuget/licensed" -username "your login email" -password "your password" +``` > [!Note] > The password will be stored encrypted in the NuGet config file and can only be decrypted in the same user context as it was encrypted. The default location of the config file can be found here `%AppData%\NuGet\NuGet.config` diff --git a/en/components/overlay-position.md b/en/components/overlay-position.md index dd4426c839..2f63f0ac09 100644 --- a/en/components/overlay-position.md +++ b/en/components/overlay-position.md @@ -10,8 +10,8 @@ Position strategies determine where the content is displayed in the provided `Ig ## Angular Positioning Strategies Example - @@ -22,43 +22,53 @@ Position strategies determine where the content is displayed in the provided `Ig There are five positioning strategies: ### Global + Positions the content, based on the directions passed in through [`positionSettings`]({environment:angularApiUrl}/interfaces/positionsettings.html). These are Left/Center/Right for [`horizontalDirection`]({environment:angularApiUrl}/interfaces/positionsettings.html#horizontalDirection) and Top/Middle/Bottom for [`verticalDirection`]({environment:angularApiUrl}/interfaces/positionsettings.html#verticalDirection). Defaults are: | horizontalDirection | verticalDirection | |:---------------------------|:-------------------------| | HorizontalAlignment.Center | VerticalAlignment.Middle | +
### Container + Positions the content as `GlobalPositionStrategy`. Instead of position related to the screen `ContainerPositionStrategy` positions the content related to the provided in `OverlaySettings` `outlet`. Defaults are: | horizontalDirection | verticalDirection | |:---------------------------|:-------------------------| | HorizontalAlignment.Center | VerticalAlignment.Middle | +
### Connected + Positions the element based on the start point from [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) and directions passed in through [`positionSettings`]({environment:angularApiUrl}/interfaces/positionsettings.html). It is possible to either pass a start point (type [`Point`]({environment:angularApiUrl}/classes/point.html)) or an `HTMLElement` as a positioning base. Defaults are: | target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint | |:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------| | new Point(0, 0) | HorizontalAlignment.Right | VerticalAlignment.Bottom | HorizontalAlignment.Left | VerticalAlignment.Bottom | +
### Auto + Positions the element the same way as the **Connected** positioning strategy. It also calculates a different starting point in case the element goes partially out of the viewport. The **Auto** strategy will initially try to show the element like the **Connected** strategy does. If the element goes out of the viewport **Auto** will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. After flipped, if the element is still out of the viewport, **Auto** will use the initial directions and the starting point, to push the element into the viewport. For example - if the element goes out of the right side of the viewport, by 50px, **Auto** will push it by 50px to the left. Afterwards, if the element is partially out of the viewport, then its height or width were greater than the viewport's, **Auto** will align the element's left/top edge with the viewport's left/top edge. Defaults are: | target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint | |:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------| | new Point(0, 0) | HorizontalAlignment.Right | VerticalAlignment.Bottom | HorizontalAlignment.Left | VerticalAlignment.Bottom | +
### Elastic + Positions the element like the **Connected** positioning strategy and re-sizes the element to fit inside the view port (re-calculating width and/or height) in case the element is partially out of view. [`minSize`]({environment:angularApiUrl}/interfaces/positionsettings.html#minSize) can be passed in [`positionSettings`]({environment:angularApiUrl}/interfaces/positionSettings.html) to prevent resizing if it would put the element's dimensions below a certain threshold. Defaults are: | target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint | minSize | |:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------|:----------------------| | new Point(0, 0) | HorizontalAlignment.Right | VerticalAlignment.Bottom | HorizontalAlignment.Left | VerticalAlignment.Bottom |{ width: 0, height: 0 }| +
> [!NOTE] @@ -97,12 +107,13 @@ const overlaySettings: OverlaySettings = { positionStrategy: new ConnectedPositioningStrategy() }; this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewContainerRef, overlaySettings); -``` +``` +
- @@ -132,8 +143,8 @@ this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewCo ``` - @@ -148,8 +159,8 @@ const myPositionStrategy = new AutoPositionStrategy(); overlay.attach(element, { positionStrategy: myPositionStrategy }); ``` - @@ -158,6 +169,7 @@ overlay.attach(element, { positionStrategy: myPositionStrategy }); ### Changing Settings To change the position settings of an already existing strategy, override any of the settings in it. If a strategy was already attached you should detach the previously generated ID: + ```typescript // overlaySettings is an existing object of type OverlaySettings // overlaySettings.positionStrategy is an existing PositionStrategy with settings of type PositionSettings @@ -194,11 +206,12 @@ overlay.setOffset(this._overlayId, deltaX, deltaY, OffsetMode.Set); ## API References -* [IPositionStrategy]({environment:angularApiUrl}/interfaces/ipositionstrategy.html) +- [IPositionStrategy]({environment:angularApiUrl}/interfaces/ipositionstrategy.html) ## Additional Resources -* [Overlay Main Topic](overlay.md) -* [Scroll Strategies](overlay-scroll.md) -* [Styling Topic](overlay-styling.md) -* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) + +- [Overlay Main Topic](overlay.md) +- [Scroll Strategies](overlay-scroll.md) +- [Styling Topic](overlay-styling.md) +- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) diff --git a/en/components/overlay-scroll.md b/en/components/overlay-scroll.md index 1ddebd67e7..668dd45541 100644 --- a/en/components/overlay-scroll.md +++ b/en/components/overlay-scroll.md @@ -6,7 +6,8 @@ _description: Explanation and example about the Overlay Service's IScrollStrateg # Scroll Strategies The scroll strategy determines how the scrolling is handled in the provided `IgxOverlayService`. There are four scroll strategies: -1. **NoOperation** - does nothing. + +1. **NoOperation** - does nothing. 2. **Block** - the event is canceled and the component does not scroll with the window. 3. **Close** - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded. 4. **Absolute** - scrolls everything. @@ -14,19 +15,23 @@ The scroll strategy determines how the scrolling is handled in the provided `Igx ## Usage Every scroll strategy has the following methods: - - [`initialize`]({environment:angularApiUrl}/interfaces/iscrollstrategy.html#initialize) - initializes the scroll strategy. It needs a reference of the document, the overlay service and the id of the component rendered - - [`attach`]({environment:angularApiUrl}/interfaces/iscrollstrategy.html#attach) - attaches the scroll strategy to the specified element or to the document - - [`detach`]({environment:angularApiUrl}/interfaces/iscrollstrategy.html#detach) - detaches the scroll strategy + +- [`initialize`]({environment:angularApiUrl}/interfaces/iscrollstrategy.html#initialize) - initializes the scroll strategy. It needs a reference of the document, the overlay service and the id of the component rendered +- [`attach`]({environment:angularApiUrl}/interfaces/iscrollstrategy.html#attach) - attaches the scroll strategy to the specified element or to the document +- [`detach`]({environment:angularApiUrl}/interfaces/iscrollstrategy.html#detach) - detaches the scroll strategy ```typescript this.scrollStrategy.initialize(document, overlayService, id); this.scrollStrategy.attach(); this.scrollStrategy.detach(); ``` +
### Getting Started + The scroll strategy is passed as a property in the [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) parameter when the [`overlay.attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) method is called: + ```typescript // Initializing and using overlay settings const overlaySettings: OverlaySettings = { @@ -36,10 +41,12 @@ const overlaySettings: OverlaySettings = { closeOnOutsideClick: true } const overlayId = overlay.attach(dummyElement, overlaySettings); -``` +``` +
To change the scrolling strategy, used by the overlay, override the [`scrollStrategy`]({environment:angularApiUrl}/interfaces/iscrollstrategy.html) property of the [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) object passed to the overlay. If a strategy was already attached you should detach the previously generated ID: + ```typescript // overlaySettings is an existing object of type OverlaySettings // to override the scroll strategy @@ -50,6 +57,7 @@ Object.assing(newOverlaySettings, { const overlayId = overlay.attach(dummyElement, newOverlaySettings); overlay.show(overlayId); ``` +
### Dependencies @@ -61,35 +69,40 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy"; ``` ### Scroll Strategies + The scroll strategies can be passed to the [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) object to determine how the overlay should handle scrolling. The demo below illustrates the difference between the separate [`scrollStrategies`]({environment:angularApiUrl}/interfaces/iscrollstrategy.html): -
## Modal + The [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) object also allows a boolean property ([`modal`]({environment:angularApiUrl}/interfaces/overlaysettings.html#modal)) to be passed. This controls how the overlay will be displayed: + - If the [`modal`]({environment:angularApiUrl}/interfaces/overlaysettings.html#modal) property is `false`, the element will be attached to the DOM foreground but everything will still be active and interactable - e.g. scrolling, clicking, etc. - If the [`modal`]({environment:angularApiUrl}/interfaces/overlaysettings.html#modal) property is `true`, the element will be attached to the DOM foreground and an overlay blocker will wrap behind it, stopping propagation of all events: -
## API References -* [IScrollStrategy]({environment:angularApiUrl}/interfaces/iscrollstrategy.html) + +- [IScrollStrategy]({environment:angularApiUrl}/interfaces/iscrollstrategy.html) ## Additional Resources -* [Overlay Main Topic](overlay.md) -* [Position strategies](overlay-position.md) -* [Styling Topic](overlay-styling.md) -* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) + +- [Overlay Main Topic](overlay.md) +- [Position strategies](overlay-position.md) +- [Styling Topic](overlay-styling.md) +- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) diff --git a/en/components/overlay-styling.md b/en/components/overlay-styling.md index 52843120c7..4800d1d86c 100644 --- a/en/components/overlay-styling.md +++ b/en/components/overlay-styling.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, Angular Overlay Service, Angular UI controls, --- # Overlay Styling +

[`IgxOverlayService`](overlay.md) is used to display content above the page content. A lot of Ignite UI for Angular components use the overlay - [Drop Down](drop-down.md), [Combo](combo.md), [Date Picker](date-picker.md) and more - so it is important to understand how the overlay displays content. @@ -83,8 +84,8 @@ export class OverlayStylingComponent { Now, the combo's list of items are properly rendered **inside** of our component's host, which means that our custom theme will take effect: - @@ -119,7 +120,7 @@ Now **all** modal overlays will have a purple tint to their background. @include css-vars($my-overlay-theme); } } -``` +``` ### Scoped Overlay Styles @@ -135,11 +136,13 @@ When scoping a modal overlay, you need to move the overlay outlet, which has som ``` ## API References -* [IgniteUI for Angular - Theme Library](themes/index.md) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) + +- [IgniteUI for Angular - Theme Library](themes/index.md) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources -* [IgniteUI for Angular - Theme Library](themes/index.md) -* [Overlay Main Topic](overlay.md) -* [Position strategies](overlay-position.md) -* [Scroll strategies](overlay-scroll.md) + +- [IgniteUI for Angular - Theme Library](themes/index.md) +- [Overlay Main Topic](overlay.md) +- [Position strategies](overlay-position.md) +- [Scroll strategies](overlay-scroll.md) diff --git a/en/components/overlay.md b/en/components/overlay.md index b915e40475..a288e250ad 100644 --- a/en/components/overlay.md +++ b/en/components/overlay.md @@ -5,8 +5,9 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Overlay +

-The overlay service provides an easy and quick way to dynamically render content in the foreground of an app. The content to be rendered, also the way it renders (e.g. placement, animations, scroll and click behaviors) are highly configurable and able to match all of the possible scenarios. +The overlay service provides an easy and quick way to dynamically render content in the foreground of an app. The content to be rendered, also the way it renders (e.g. placement, animations, scroll and click behaviors) are highly configurable and able to match all of the possible scenarios. The overlay service is fully integrated in the toggle directive.

@@ -14,8 +15,8 @@ The overlay service is fully integrated in the toggle directive. ## Angular Overlay Example - @@ -24,6 +25,7 @@ The overlay service is fully integrated in the toggle directive. ## Getting Started First we need to import the [`IgxOverlayService`]({environment:angularApiUrl}/classes/igxoverlayservice.html) in the component and `inject` a reference to it in the component's constructor: + ```typescript import { Inject } from '@angular/core' @@ -108,20 +110,24 @@ export class MyOverlayComponent { } } ``` +
The Overlay Service's [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) method has two overloads: - - `attach(element, settings?)` - - `attach(component, viewContainerRef, settings?)` + +- `attach(element, settings?)` +- `attach(component, viewContainerRef, settings?)` The first parameter in both overloads is mandatory and represents the content that will be shown in the overlay. There are a couple of different scenarios how the content can be passed: - - A component definition - When passing a component in as the first argument, the overlay service creates a new instance of that component and dynamically attaches its `ElementRef` to the `overlay` DOM. This method also accepts a second mandatory parameter `ViewContainerRef` which is a reference to the container where the created component's host view will be inserted. - - An `ElementRef` to an existing DOM element (illustrated in the sample above) - Any view that is already rendered on the page can be passed through the overlay service and be rendered in the overlay DOM. + +- A component definition - When passing a component in as the first argument, the overlay service creates a new instance of that component and dynamically attaches its `ElementRef` to the `overlay` DOM. This method also accepts a second mandatory parameter `ViewContainerRef` which is a reference to the container where the created component's host view will be inserted. +- An `ElementRef` to an existing DOM element (illustrated in the sample above) - Any view that is already rendered on the page can be passed through the overlay service and be rendered in the overlay DOM. In both cases the [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) method will: - - Get the reference to the passed view from Angular - - Detach the view from the DOM and leave an anchor in its place - - Re-attach the view to the overlay using the provided [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) or falling back to the default overlay ones + +- Get the reference to the passed view from Angular +- Detach the view from the DOM and leave an anchor in its place +- Re-attach the view to the overlay using the provided [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) or falling back to the default overlay ones Calling then [`show(id)`]({environment:angularApiUrl}/classes/igxoverlayservice.html#show) will play the open animation, if there is any, and will show the attached content. Calling [`hide(id)`]({environment:angularApiUrl}/classes/igxoverlayservice.html#hide) will play close animation, if there is any, and will hide the attached content. @@ -130,12 +136,12 @@ Finally calling [`detach(id)`]({environment:angularApiUrl}/classes/igxoverlayser
## Attaching Components -In the below demo, we can pass the [IgxCard](card.md#angular-card-example) component through the Overlay Service's [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) method to generate an ID. Then we call the [`show()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method with the provided ID to dynamically attach the card to the DOM in a modal container. +In the below demo, we can pass the [IgxCard](card.md#angular-card-example) component through the Overlay Service's [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) method to generate an ID. Then we call the [`show()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method with the provided ID to dynamically attach the card to the DOM in a modal container. - @@ -146,6 +152,7 @@ In the below demo, we can pass the [IgxCard](card.md#angular-card-example) compo The [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) method also accepts an object of the [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) type, which configures the way the content is shown. If no such object is provided, the Overlay Service will use its default settings to render the passed content. For example, if we want the content to be positioned relative to an element, we can pass a different [`target`]({environment:angularApiUrl}/interfaces/overlaysettings.html#target) and [`positioningStrategy`]({environment:angularApiUrl}/interfaces/overlaysettings.html#positioningStrategy) to the [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) method, e.g. [`ConnectedPositioningStrategy`]({environment:angularApiUrl}/classes/connectedpositioningstrategy.html). In order to configure how the component is shown, we need to create an [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) object first: + ```typescript // my-overlay-component.component.ts // import the ConnectedPositioningStategy class @@ -169,6 +176,7 @@ export class MyOverlayComponent { } } ``` + ```HTML
@@ -176,6 +184,7 @@ export class MyOverlayComponent {
``` + Clicking on the button will now show `MyDynamicComponent` positioned relative to the button. ## Preset Overlay Settings @@ -201,8 +210,8 @@ const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings ### Demo - @@ -216,6 +225,7 @@ The [`hide(id)`]({environment:angularApiUrl}/classes/igxoverlayservice.html#hide When rendered content is not needed anymore [`detach(id)`]({environment:angularApiUrl}/classes/igxoverlayservice.html#detach) method should be called. This method removes the content from the overlay and, if applicable, re-attaches it to its original location in the DOM. [`detach(id)`]({environment:angularApiUrl}/classes/igxoverlayservice.html#detach) method also accepts as mandatory parameter the ID generated from [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) method. To remove all the overlays [`detachAll()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#detachAll) method could be called. We can modify the previously defined overlay method to not only show but also hide the overlay element + ```typescript // my-overlay-component.component.ts // add an import for the definion of ConnectedPositioningStategy class @@ -259,6 +269,7 @@ export class MyOverlayComponent implements OnDestroy { } } ``` + ```HTML
@@ -266,13 +277,14 @@ export class MyOverlayComponent implements OnDestroy {
``` + ## Attaching Settings Using the [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) parameter of the [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) method, we can change how the content is shown - e.g. where the content is positioned, how the scroll should behave and if the container is modal or not - @@ -290,12 +302,15 @@ defaultOverlaySettings = { closeOnEscape: false }; ``` +
-## Integration with igxToggle +## Integration with igxToggle + The [`IgxToggleDirective`]({environment:angularApiUrl}/classes/igxtoggledirective.html) is fully integrated with the [`IgxOverlayService`]({environment:angularApiUrl}/classes/igxoverlayservice.html). As such, the Toggle Directive's [`toggle()`]({environment:angularApiUrl}/classes/igxtoggledirective.html#toggle) method allows for custom overlay settings to be passed when toggling the content. An example of how to pass configuration settings to the toggle's method is shown below: + ```html
@@ -331,16 +346,20 @@ export class ExampleComponent { } } ``` +
## Assumptions and Limitations -If you show the overlay in an outlet, and if the outlet is a child of an element with transform, perspective or filter set in the CSS you won't be able to show the modal overlay. The reason for this is if one of the above mentioned CSS properties is set, the browser creates a new containing block and the overlay is limited to this containing block, as described [here](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed). + +If you show the overlay in an outlet, and if the outlet is a child of an element with transform, perspective or filter set in the CSS you won't be able to show the modal overlay. The reason for this is if one of the above mentioned CSS properties is set, the browser creates a new containing block and the overlay is limited to this containing block, as described in the [MDN position documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed). ## API References -* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) + +- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources -* [Position Strategies](overlay-position.md) -* [Scroll Strategies](overlay-scroll.md) -* [Styling Topic](overlay-styling.md) + +- [Position Strategies](overlay-position.md) +- [Scroll Strategies](overlay-scroll.md) +- [Styling Topic](overlay-styling.md) diff --git a/en/components/paginator.md b/en/components/paginator.md index 69836a5e18..3f63be598c 100644 --- a/en/components/paginator.md +++ b/en/components/paginator.md @@ -5,15 +5,16 @@ _keywords: angular paginator, angular paginator component, angular ui components --- # Angular Paginator Component Overview + Pagination in Angular is an optimization technique when working with huge data sets. The purpose of Angular Paginator is to provide UI and API to split and distribute a high volumes of data into equally sized pages, which can be navigated by the end-user. -The Angular Paginator component displays to the end-user the page they are viewing, the size of the page, the total number of pages and UI elements for quick navigation between pages. +The Angular Paginator component displays to the end-user the page they are viewing, the size of the page, the total number of pages and UI elements for quick navigation between pages. Ignite UI for Angular Paginator allows you to divide a set of data into a number of similar pages. This method of pagination is particularly well-suited for large data-sets which are difficult to display and view all at once, that is why the paginator is typically used together with a list of items or data table. The Paginator in Angular enables the user to select a specific page from a range of pages and to determine how many records they should see on each page. ## Angular Paginator Example -The following Angular Pagination example shows a Paginator template demonstrating how users can navigate through 4 pages with different items and select the number of items to be displayed from a drop-down menu. +The following Angular Pagination example shows a Paginator template demonstrating how users can navigate through 4 pages with different items and select the number of items to be displayed from a drop-down menu. - - - - + + + + ``` -Paging can also be done programmatically through the Paging API /which is described in more details in the section below/ using the [`paginate`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#paginate), [`previousPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#previousPage), [`nextPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#nextPage) methods and the inputs [`page`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#page), [`perPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#perPage) and [`totalRecords`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#totalRecords). Where *page* allows you to set the current page, *perPage* - the number of items that are displayed at one page and *totalRecords* - the number of the records that are in the grid. `TotalRecords` property is useful when you have paging with remote data and you want to alter the page count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of `totalRecords` property will be set by default to the length of the provided data source. If `totalRecords` is set, it will take precedence over the default length based on the data source. +Paging can also be done programmatically through the Paging API /which is described in more details in the section below/ using the [`paginate`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#paginate), [`previousPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#previousPage), [`nextPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#nextPage) methods and the inputs [`page`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#page), [`perPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#perPage) and [`totalRecords`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#totalRecords). Where _page_ allows you to set the current page, _perPage_ - the number of items that are displayed at one page and _totalRecords_ - the number of the records that are in the grid. `TotalRecords` property is useful when you have paging with remote data and you want to alter the page count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of `totalRecords` property will be set by default to the length of the provided data source. If `totalRecords` is set, it will take precedence over the default length based on the data source. ## Paging API + | Input | Description | |-----------------|:------------------------------------------:| | page | Gets/Sets the current page. | @@ -141,6 +143,7 @@ Paging can also be done programmatically through the Paging API /which is descri ## Angular Paginator Localization + With only a few lines of code you can easily localize all strings part of the Paging component. In order to localize a given Paging instance use the input property [resourceStrings]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#resourceStrings). You can use this **Step 1** - Import `IPaginatorResourceStrings` interface and [changei18n]({environment:angularApiUrl}/#changei18n) function: @@ -186,21 +189,23 @@ public ngOnInit(): void { ## API References -* [IgxPaginator API]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html) -* [IgxPaginator Styles]({environment:sassApiUrl}/themes#function-paginator-theme) + +- [IgxPaginator API]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html) +- [IgxPaginator Styles]({environment:sassApiUrl}/themes#function-paginator-theme) ## Additional Resources +
-* [Grid](grid/grid.md) -* [Virtualization and Performance](grid/virtualization.md) -* [Filtering](grid/filtering.md) -* [Sorting](grid/sorting.md) -* [Summaries](grid/summaries.md) +- [Grid](grid/grid.md) +- [Virtualization and Performance](grid/virtualization.md) +- [Filtering](grid/filtering.md) +- [Sorting](grid/sorting.md) +- [Summaries](grid/summaries.md)
Our community is active and always welcoming to new ideas. -* [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) +- [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/pie-chart.md b/en/components/pie-chart.md index bd80aa6af0..507e3b816d 100644 --- a/en/components/pie-chart.md +++ b/en/components/pie-chart.md @@ -166,16 +166,16 @@ There is a property called [`selectionMode`]({environment:dvApiBaseUrl}/products The pie chart component supports three different selection modes. -- Single - When the mode is set to single, only one slice can be selected at a time. When you select a new slice the previously selected slice will be deselected and the new one will become selected. -- Multiple - When the mode is set to Multiple, many slices can be selected at once. If you click on a slice, it will become selected and clicking on a different slice will also select that slice leaving the previous slice selected. -- Manual - When the mode is set to Manual, selection is disabled. +- Single - When the mode is set to single, only one slice can be selected at a time. When you select a new slice the previously selected slice will be deselected and the new one will become selected. +- Multiple - When the mode is set to Multiple, many slices can be selected at once. If you click on a slice, it will become selected and clicking on a different slice will also select that slice leaving the previous slice selected. +- Manual - When the mode is set to Manual, selection is disabled. The pie chart component has 4 events associated with selection: -- SelectedItemChanging -- SelectedItemChanged -- SelectedItemsChanging -- SelectedItemsChanged +- SelectedItemChanging +- SelectedItemChanged +- SelectedItemsChanging +- SelectedItemsChanged The events that end in “Changing” are cancelable events which means you can stop the selection of a slice by setting the event argument property `Cancel` to true. When set to true the associated property will not update and the slice will not become selected. This is useful for scenarios where you want to keep users from being able to select certain slices based on the data inside it. diff --git a/en/components/pivotGrid/pivot-grid-custom.md b/en/components/pivotGrid/pivot-grid-custom.md index 46eb02888d..fec6b7fd8c 100644 --- a/en/components/pivotGrid/pivot-grid-custom.md +++ b/en/components/pivotGrid/pivot-grid-custom.md @@ -17,8 +17,8 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` The following example show how to handle scenarios, where the data is already aggregated and how its structure should look like: - @@ -55,10 +55,11 @@ public aggregatedData = [ ``` The Pivot grid provides the object keys fields it uses to do its pivot calculations. + - `children` - Field that stores children for hierarchy building. It represents a map from grouped values and all the pivotGridRecords that are based on that value. It can be utilized in very specific scenarios, where there is a need to do something while creating the hierarchies. No need to change this for common usage. - `records` - Field that stores reference to the original data records. Can be seen in the example from above - `AllProducts_records`. Avoid setting fields in the data with the same name as this property. If your data records has `records` property, you can specify different and unique value for it using the `pivotKeys`. - `aggregations` - Field that stores aggregation values. It's applied while creating the hierarchies and also it should not be changed for common scenarios. -- `level` - Field that stores dimension level based on its hierarchy. Avoid setting fields in the data with the same name as this property. If your data records has `level` property, you can specify different and unique value for it using the `pivotKeys`. +- `level` - Field that stores dimension level based on its hierarchy. Avoid setting fields in the data with the same name as this property. If your data records has `level` property, you can specify different and unique value for it using the `pivotKeys`. - `columnDimensionSeparator` - Separator used when generating the unique column field values. It is the dash(`-`) from the example from above - `All-Bulgaria`. - `rowDimensionSeparator` - Separator used when generating the unique row field values. It is the underscore(`_`) from the example from above - `AllProducts_records`. It's used when creating the `records` and `level` field. @@ -126,18 +127,20 @@ public noopSortStrategy = NoopSortingStrategy.instance(); ``` ## API References -* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) -* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) + +- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) +- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) ## Additional Resources +
-* [Angular Pivot Grid Features](pivot-grid-features.md) -* [Angular Pivot Grid Overview](pivot-grid.md) +- [Angular Pivot Grid Features](pivot-grid-features.md) +- [Angular Pivot Grid Overview](pivot-grid.md)
Our community is active and always welcoming to new ideas. -* [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) \ No newline at end of file +- [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/pivotGrid/pivot-grid-features.md b/en/components/pivotGrid/pivot-grid-features.md index 7218a304c2..02ac944ae1 100644 --- a/en/components/pivotGrid/pivot-grid-features.md +++ b/en/components/pivotGrid/pivot-grid-features.md @@ -10,6 +10,7 @@ The pivot and flat grid component classes inherit from a common base and thus sh >[!NOTE] >Some features do not have meaningful behavior in the context of a pivot table and therefore cannot be enabled for `IgxPivotGrid`. These include: +> > - CRUD operations > - Grouping > - Row/Column Pinning @@ -18,8 +19,8 @@ The pivot and flat grid component classes inherit from a common base and thus sh The Pivot Grid component has additional features and functionalities related to its dimensions as described below. - @@ -116,6 +117,7 @@ The Pivot Grid supports single selection which is enabled just like in the base In case there are multiple row or column dimensions which would create groups that span multiple rows/columns, selection is applied to all cells that belong to the selected group. ## Super Compact Mode + The `IgxPivotGrid` component provides a `superCompactMode` `@Input`. It is suitable for cases that require a lot of cells to be present on the screen at once. If enabled the option ignores the `ig-size` variable for the pivot grid. Enabling `superCompactMode` also sets the `ig-size` variable to `ig-size-small` for each child component(like `IgxChip`) that does not have the `superCompactMode` option. ```html @@ -129,6 +131,7 @@ When a `column` dimension defines a hierarchy, the pivot grid will render additi ## Row Dimensions Headers As of version `18.0.0` the IgniteUI for Angular row dimension value headers can be enabled through `pivotUI` option: + ```html @@ -136,7 +139,7 @@ As of version `18.0.0` the IgniteUI for Angular row dimension value headers can ## Row Dimension Layout -The `IgxPivotGridComponent` supports two ways of row dimension rendering. This can be controlled by setting the `pivotUI` option's `rowLayout` property. +The `IgxPivotGridComponent` supports two ways of row dimension rendering. This can be controlled by setting the `pivotUI` option's `rowLayout` property. ```html @@ -149,7 +152,7 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal }; The default layout of the grid is `Vertical`. In this mode the hierarchy of dimensions expands vertically. The alternative would be `Horizontal`. In this mode, the children of a single row dimension when expanded are shown horizontally in the same parent multi row layout. In the sample bellow you can toggle between the two modes to compare them. -Note that in the `Horizontal` mode, the parent row dimension aggregates are not visible unless the parent row is collapsed. +Note that in the `Horizontal` mode, the parent row dimension aggregates are not visible unless the parent row is collapsed. To show the parent dimension in a row summary, the `horizontalSummary` property can be enabled for the related dimension. ```ts @@ -172,11 +175,12 @@ Additionally the position of the summary can be changed via the `horizontalSumma ```ts public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom }; ``` + >[!NOTE] > The row summary related options - `horizontalSummary` and `horizontalSummariesPosition` are applicable only for the `Horizontal` layout mode. - @@ -188,6 +192,7 @@ Keyboard navigation in `IgxPivotGrid` works similarly to the one in `IgxGrid`. T The keyboard arrows allow navigating the active element within the current area only. ### Dimensions drag & drop + The dimensions are represented by chips, which can be dragged & dropped. All chips can change their order within their area by drag & drop. The chips from `rows`, `column`, `filter`(dimension chips) can be moved from any of those areas to any other and at any place. @@ -197,19 +202,21 @@ Chips from these areas can not be moved to the `values` area and chips from the >The chips from the Pivot Grid can not be moved to the Pivot Data Selector and items from the Pivot Data Selector can not be moved to the Pivot Grid. ## API References -* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) -* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) + +- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) +- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) ## Additional Resources +
-* [Angular Pivot Grid Overview](pivot-grid.md) -* [Angular Pivot Grid Custom Aggregations](pivot-grid-custom.md) +- [Angular Pivot Grid Overview](pivot-grid.md) +- [Angular Pivot Grid Custom Aggregations](pivot-grid-custom.md)
Our community is active and always welcoming to new ideas. -* [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) +- [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/pivotGrid/pivot-grid.md b/en/components/pivotGrid/pivot-grid.md index 953e8d4da0..4b73780490 100644 --- a/en/components/pivotGrid/pivot-grid.md +++ b/en/components/pivotGrid/pivot-grid.md @@ -8,7 +8,7 @@ _keywords: angular pivot grid, angular pivot grid component, angular pivot table Ignite UI for Angular Pivot Grid is one of our best [Angular Components](https://www.infragistics.com/products/ignite-ui-angular), representing a table of grouped values and aggregates that lets you organize and summarize data in a tabular form. It is a data summarization tool that is used to reorganize and summarize selected columns and rows of data coming from a spreadsheet or database table to obtain a desired report. -## What is Angular Pivot Grid? +## What is Angular Pivot Grid? The Angular Pivot Grid component presents data in a pivot table and helps perform complex analysis on the supplied data set. This sophisticated Pivot Grid control is used for organizing, summarizing, and filtering large volumes of data which is later displayed in a cross-table format. Key features of an Angular Pivot Grid are row dimensions, column dimensions, aggregations, and filters. @@ -32,7 +32,7 @@ To get started with the Ignite UI for Angular Pivot Grid component, first you ne ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](../general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. The next step is to import the `IgxPivotGridModule` in your **app.module.ts** file. @@ -103,6 +103,7 @@ Multiple sibling dimensions can be defined, which creates a more complex nested The dimensions can be reordered or moved from one area to another via their corresponding chips using drag & drop. A dimension can also describe an expandable hierarchy via the `childLevel` property, for example: + ```typescript { memberFunction: () => 'All', @@ -116,18 +117,20 @@ A dimension can also describe an expandable hierarchy via the `childLevel` prope } ``` + In this case the dimension renders an expander in the related section of the grid (row or column) and allows the children to be expanded or collapsed as part of the hierarchy. By default the row dimensions are initially expanded. This behavior can be controlled with the `defaultExpandState` `@Input` of the pivot grid. ### Predefined dimensions As part of the pivot grid some additional predefined dimensions are exposed for easier configuration: + - `IgxPivotDateDimension` Can be used for date fields. Describes the following hierarchy by default: - - All Periods - - Years - - Quarters - - Months - - Full Date + - All Periods + - Years + - Quarters + - Months + - Full Date It can be set for rows or columns, for example: @@ -211,6 +214,7 @@ public static totalMax: PivotAggregation = (members, data: any) => { return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b)); }; ``` + The pivot value also provides a `displayName` property. It can be used to display a custom name for this value in the column header. >[!NOTE] @@ -298,9 +302,10 @@ Resulting in the following view, which groups the Product Categories unique colu iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-basic/" alt="Angular Pivot Grid Basic Example"> -And if you want to streamline the entire app development process, you can try out our [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) for your next Angular app. +And if you want to streamline the entire app development process, you can try out our [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) for your next Angular app. ### Auto generate configuration + The `autoGenerateConfig` property automatically generates dimensions and values based on the data source fields: - Numeric Fields: @@ -329,18 +334,20 @@ This feature allows developers to quickly create a pivot view without manually s | Merging the dimension members is case sensitive| The pivot grid creates groups and merges the same (case sensitive) values. But the dimensions provide `memberFunction` and this can be changed there, the result of the `memberFunction` are compared and used as display value.| ## API References -* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) -* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) + +- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html) +- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html) ## Additional Resources +
-* [Angular Pivot Grid Features](pivot-grid-features.md) -* [Angular Pivot Grid Custom Aggregations](pivot-grid-custom.md) +- [Angular Pivot Grid Features](pivot-grid-features.md) +- [Angular Pivot Grid Custom Aggregations](pivot-grid-custom.md)
Our community is active and always welcoming to new ideas. -* [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) +- [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/query-builder-model.md b/en/components/query-builder-model.md index be852e41cf..2493a10f62 100644 --- a/en/components/query-builder-model.md +++ b/en/components/query-builder-model.md @@ -5,28 +5,32 @@ _keywords: Angular Query Builder component, Angular Query Builder control, Ignit --- # Using the Query Builder Model + Angular Query Builder provides a serializable/deserializable JSON format model, making it easy to build SQL queries. ## Overview -This Angular Query Builder example demonstartes how the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) expression tree could be used to request data from an endpoint [Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html) and set it as an [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) data source. +This Angular Query Builder example demonstrates how the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) expression tree could be used to request data from an endpoint [Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html) and set it as an [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) data source. - ## Query Builder Model + In order to set an expression tree to the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html), you need to define a[`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html). Each [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) should have filtering logic that represents how a data record should resolve against the tree and depending on the use case, you could pass a field name, entity name, and an array of return fields. If all fields in a certain entity should be returned, the `returnFields` property could be set to ['*']: ```ts const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity A', ['*']); ``` + Once the root [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) is created, adding conditions, groups or subqueries, could be done by setting its `filteringOperands` property to an array of [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) (single expression or a group) or [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) (subquery). Each [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) and [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) should have a `fieldName` that is the name of the column where the filtering expression is placed, and either a `condition` of type [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) or a `conditionName`. If required, you could also set a `searchVal`, `searchTree` of type [`IExpressionTree`]({environment:angularApiUrl}/interfaces/iexpressiontree.html), and `ignoreCase` properties. - Defining a simple **expression**: + ```ts tree.filteringOperands.push({ fieldName: 'Name', @@ -36,6 +40,7 @@ tree.filteringOperands.push({ ``` - Defining a **group** of expressions: + ```ts const group = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Entity A', ['*']); group.filteringOperands.push({ @@ -51,6 +56,7 @@ tree.filteringOperands.push(group); ``` - Defining a **subquery**: + ```ts const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity B', ['Number']); innerTree.filteringOperands.push({ @@ -66,20 +72,22 @@ innerTree.filteringOperands.push({ ``` The model can be serialized/deserialized in JSON format, making it easily transferable between client and server: + ```ts JSON.stringify(tree, null, 2); ``` ## Using Sub-Queries -In the context of the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) the *IN / NOT-IN* operators are used with the newly exposed subquery functionality in the *WHERE* clause. +In the context of the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) the _IN / NOT-IN_ operators are used with the newly exposed subquery functionality in the _WHERE_ clause. > [!Note] -> A subquery is a query nested inside another query used to retrieve data that will be used as a condition for the outer query. +> A subquery is a query nested inside another query used to retrieve data that will be used as a condition for the outer query. -Selecting the *IN / NOT-IN* operator in a `FilteringExpression` would create a subquery. After choosing an entity and a column to return, it checks if the value in the specified column in the outer query matches or not any of the values returned by the subquery. +Selecting the _IN / NOT-IN_ operator in a `FilteringExpression` would create a subquery. After choosing an entity and a column to return, it checks if the value in the specified column in the outer query matches or not any of the values returned by the subquery. The following expression tree: + ```ts const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Products', ['supplierId']); innerTree.filteringOperands.push({ @@ -95,13 +103,16 @@ tree.filteringOperands.push({ searchTree: innerTree }); ``` + Could be serialized by calling: + ```ts JSON.stringify(tree, null, 2); ``` This would be transferred as: -``` + +``` { "filteringOperands": [ { @@ -150,7 +161,7 @@ Let's take a look at a practical example of how the Ignite UI for Angular Query In the sample below we have 3 `entities` with names 'Suppliers', 'Categories' and 'Products'. -Let's say we want to find all suppliers who supply products which belong to the 'Beverages' category. Since the data is distributed across all entities, we can take advantage of the *IN* operator and accomplish the task by creating subqueries. Each subquery is represented by a `FilteringExpressionsTree` and can be converted to a SQL query through the `transformExpressionTreeToSqlQuery(tree: IExpressionTree)` method. +Let's say we want to find all suppliers who supply products which belong to the 'Beverages' category. Since the data is distributed across all entities, we can take advantage of the _IN_ operator and accomplish the task by creating subqueries. Each subquery is represented by a `FilteringExpressionsTree` and can be converted to a SQL query through the `transformExpressionTreeToSqlQuery(tree: IExpressionTree)` method. First, we create а `categoriesTree` which will return the `categoryId` for the record where `name` is `Beverages`. This is the innermost subquery: @@ -211,9 +222,9 @@ SELECT * FROM Suppliers WHERE supplierId IN ( Now we can set the `expressionsTree` property of the `IgxQueryBuilderComponent` to `suppliersTree`. Furthermore, every change to the query triggers a new request to the endpoint and the resulting data shown in the grid is refreshed. - @@ -221,13 +232,13 @@ Now we can set the `expressionsTree` property of the `IgxQueryBuilderComponent`
-* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) -* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme) +- [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) +- [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. -* [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) +- [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/query-builder.md b/en/components/query-builder.md index 13d16a8ac8..07f2c7cbd5 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -18,8 +18,8 @@ The [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybui We’ve created this Angular Query Builder example to show you the default functionalities of the Angular Query Builder component. Click the plus button to add conditions, “and” group as well as “or” group. Grouping or ungrouping expressions as well as re-ordering could be achieved via the Drag&Drop functionality. - @@ -34,7 +34,7 @@ To get started with the Ignite UI for Angular Query Builder component, first you ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxQueryBuilderModule` in the **app.module.ts** file. @@ -88,7 +88,7 @@ Now that you have the Ignite UI for Angular Query Builder module or directives i ## Using the Angular Query Builder -If no expression tree is initially set, you start by choosing an entity and which of its fields the query should return. After that, conditions or sub-groups can be added. +If no expression tree is initially set, you start by choosing an entity and which of its fields the query should return. After that, conditions or sub-groups can be added. In order to add a condition you select a field, an operand based on the field data type and a value if the operand is not unary. The operands `In` and `Not In` will allow you to create an inner query with conditions for a different entity instead of simply providing a value. Once the condition is committed, a chip with the condition information appears. By clicking or hovering the chip, you have the options to modify it or add another condition or group right after it. @@ -149,7 +149,8 @@ The `expressionTree` is a two-way bindable property which means a corresponding ## Expressions Dragging -Condition chips can be easily repositioned using mouse [*Drag & Drop*](drag-drop.md) or [*Keyboard reordering*](#keyboard-interaction) approaches. With those, users can adjust their query logic dynamically. +Condition chips can be easily repositioned using mouse [_Drag & Drop_](drag-drop.md) or [_Keyboard reordering_](#keyboard-interaction) approaches. With those, users can adjust their query logic dynamically. + - Dragging a chip does not modify its condition/contents, only its position. - Chip can also be dragged along groups and subgroups. For example, grouping/ungrouping expressions is achieved via the Expressions Dragging functionality. In order to group already existing conditions, first you need to add a new group through the 'add' group button. Then via dragging, the required expressions can be moved to that group. In order to ungroup, you could drag all conditions outside their current group and once the last condition is moved out, the group will be deleted. @@ -157,20 +158,21 @@ In order to group already existing conditions, first you need to add a new group >[!NOTE] >Chips from one query tree cannot be dragged in another, e.g. from parent to inner and vice versa. - +Animated Example of Query Builder Drag and Drop using the Mouse ## Keyboard interaction **Key Combinations** - - Tab / Shift + Tab - navigates to the next/previous chip, drag indicator, remove button, 'add' expression button. - - Arrow Down/Arrow Up - when chip's drag indicator is focused, the chip can be moved up/down. - - Space / Enter - focused expression enters edit mode. If chip is been moved, this confirms it's new position. - - Esc - chip's reordering is canceled and it returns to it's original position. + +- Tab / Shift + Tab - navigates to the next/previous chip, drag indicator, remove button, 'add' expression button. +- Arrow Down/Arrow Up - when chip's drag indicator is focused, the chip can be moved up/down. +- Space / Enter - focused expression enters edit mode. If chip is been moved, this confirms it's new position. +- Esc - chip's reordering is canceled and it returns to it's original position. >[!NOTE] >Keyboard reordering provides the same functionality as mouse Drag & Drop. Once a chip is moved, user has to confirm the new position or cancel the reorder. - +Animated Example of Keyboard Drag and Drop Using the Ignite UI for Angular Query Builder ## Templating @@ -180,7 +182,7 @@ The Ignite UI for Angular Query Builder Component allows defining templates for By default the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) header would not be displayed. In order to define such, the [`IgxQueryBuilderHeaderComponent`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) should be added inside of the `igx-query-builder`. -Then, for setting the header title could be used the [`title`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html#title) input and passing content inside of the `igx-query-builder-header` allows templating the query builder header. +Then, for setting the header title could be used the [`title`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html#title) input and passing content inside of the `igx-query-builder-header` allows templating the query builder header. The code snippet below illustrates how to do this: @@ -237,7 +239,7 @@ The search value of a condition can be templated using the [`igxQueryBuilderSear ### Formatter -In order to change the appearance of the search value in the chip displayed when a condition is not in edit mode, you can set a formatter function to the fields array. The search value and selected condition could be acccessed through the value and rowData arguments as follows: +In order to change the appearance of the search value in the chip displayed when a condition is not in edit mode, you can set a formatter function to the fields array. The search value and selected condition could be accessed through the value and rowData arguments as follows: ```ts this.ordersFields = [ @@ -262,13 +264,40 @@ this.ordersFields = [ We’ve created this Angular Query Builder example to show you the templating and formatter functionalities for the header and the search value of the Angular Query Builder component. - ## Styling +### Query Builder Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$label-foregroundThe color for query builder labels "from" & "select"
$header-backgroundThe background color of the query builder header
$header-foregroundThe foreground color of the query builder header
$subquery-header-backgroundThe background color of the subquery header
$subquery-border-colorThe border color of the query block
$separator-colorThe separator color of the query block
$header-border (Bootstrap only)The border color of the query builder header
+ To get started with styling the Query Builder, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -341,9 +370,9 @@ The last step is to **include** the new component themes using the `css-vars` mi ### Demo - @@ -352,21 +381,59 @@ The last step is to **include** the new component themes using the `css-vars` mi
+### Styling with Tailwind + +You can style the query builder using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-query-builder`, `dark-query-builder`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [query-builder-theme]({environment:sassApiUrl}/themes#function-query-builder-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your query builder should look like this: + +
+ +
+ You can also streamline your Angular app development using [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) with real UI components. ## API References
-* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) -* [IgxQueryBuilderHeaderComponent]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) -* [IgxQueryBuilderSearchValueTemplateDirective]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) -* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme) +- [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) +- [IgxQueryBuilderHeaderComponent]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) +- [IgxQueryBuilderSearchValueTemplateDirective]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) +- [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. -* [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) +- [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/radial-gauge.md b/en/components/radial-gauge.md index 7dbd954864..2681301e53 100644 --- a/en/components/radial-gauge.md +++ b/en/components/radial-gauge.md @@ -387,12 +387,12 @@ For your convenience, all above code snippets are combined into one code block b The following is a list of API members mentioned in the above sections: -* [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) -* [`IgxRadialGaugeRangeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugerangecomponent.html) +- [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) +- [`IgxRadialGaugeRangeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugerangecomponent.html) ## Additional Resources You can find more information about other types of gauges in these topics: -* [Bullet Graph](bullet-graph.md) -* [Linear Gauge](linear-gauge.md) +- [Bullet Graph](bullet-graph.md) +- [Linear Gauge](linear-gauge.md) diff --git a/en/components/radio-button.md b/en/components/radio-button.md index c8bfe5bb81..ff26c1f5c6 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -12,8 +12,8 @@ _keywords: Angular Radio Group component, Angular Radio Group control, Ignite UI ## Angular Radio & Radio Group Example - @@ -27,7 +27,7 @@ To get started with the Ignite UI for Angular Radio Button component, first you ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxRadioModule` in the **app.module.ts** file. @@ -139,37 +139,62 @@ Pay attention that if you don't use the `NgModel` directive in a two-way data bi The final result would be something like that: - ## Styling -Following the simplest approach, you can use CSS variables to customize the appearance of the radio button: - -```css -igx-radio { - --empty-color: #556b81; - --label-color: #131e29; - --fill-color: #0064d9; - --focus-outline-color: #0032a5; -} - -igx-radio:hover { - --empty-fill-color: #e3f0ff; - --empty-color: #0064d9; - --hover-color: transparent; -} -``` - -By changing the values of these CSS variables, you can alter the entire look of the component. - -
- -Another way to style the radio button is by using **Sass**, along with our [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme) function. - -To start styling the radio button using **Sass**, first import the `index` file, which includes all theme functions and component mixins: +### Radio Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$empty-color
$hover-colorBorder and dot colors on hover
$focus-outline-color (indigo)Focus outline color (Indigo theme)
$fill-color
$fill-color-hoverChecked dot color on hover
$fill-hover-border-color (non-bootstrap)Checked border color on hover
$focus-border-color (bootstrap)Focus border color
$focus-outline-color (bootstrap)Focus outlined color
$focus-outline-color-filled (indigo)Focus outline color when radio is filled
$label-color$label-color-hoverLabel text color on hover
$error-color
$error-color-hoverLabel, border, and dot color in invalid state on hover
$focus-outline-color-errorFocus outline color in invalid state
+ +To get started with styling the radio buttons, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; @@ -193,10 +218,8 @@ Finally, **include** the custom theme in your application: @include css-vars($custom-radio-theme); ``` -In the sample below, you can see how using the radio button with customized CSS variables allows you to create a design that visually resembles the radio button used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.RadioButton/sample/sap.m.sample.RadioButton) design system. - - @@ -205,14 +228,55 @@ In the sample below, you can see how using the radio button with customized CSS
+### Styling with Tailwind + +You can style the `radio button` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-radio`, `dark-radio`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [radio-theme]({environment:sassApiUrl}/themes#function-radio-theme). The syntax is as follows: + + +```html + + New York + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your radio button should look like this: + +
+ +
+ ## Radio Group

The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.

### Demo - @@ -275,8 +339,8 @@ public alignment = RadioGroupAlignment.vertical; ``` - @@ -286,13 +350,13 @@ public alignment = RadioGroupAlignment.vertical;
-* [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) -* [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html) -* [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme) +- [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) +- [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html) +- [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme) ## Theming Dependencies -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) ## Additional Resources @@ -300,5 +364,5 @@ public alignment = RadioGroupAlignment.vertical; Our community is active and always welcoming to new ideas. -* [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) +- [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/ripple.md b/en/components/ripple.md index cfee32150a..0cd526d0ae 100644 --- a/en/components/ripple.md +++ b/en/components/ripple.md @@ -28,7 +28,7 @@ To get started with the Ignite UI for Angular Ripple directive, first you need t ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxRippleModule` in the **app.module.ts** file. @@ -179,9 +179,9 @@ The next step is to pass the custom ripple theme: ### Demo - diff --git a/en/components/select.md b/en/components/select.md index 8fe994af83..f48a46f3f8 100644 --- a/en/components/select.md +++ b/en/components/select.md @@ -5,9 +5,11 @@ _keywords: angular select, angular select component, angular forms, angular for --- # Angular Select Component Overview + Angular Select is a form component used for selecting a single value from a list of predefined values. The Angular Select Component provides functionality identical to the native HTML select element, but offers a lot more customization options. It is based on the [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) and supports all of its features, including templating, virtualization, and customizing the dropdown list items. ## Angular Select Example + Below is a basic Angular Select example. It has a simple contextual menu that displays a list of several choices opening per click. @@ -84,6 +87,7 @@ Add the `igx-select` along with a list of items to choose from. We use [`igx-sel Mango ``` + Another way to do it would be to use a collection of items that we want to display using the [*ngFor](https://angular.io/api/common/NgForOf) structural directive: ```typescript @@ -135,6 +139,7 @@ The Select component supports the following directives applicable to the [Input ``` + @@ -144,8 +149,10 @@ The Select component supports the following directives applicable to the [Input >If no [`placeholder`]({environment:angularApiUrl}/classes/igxselectcomponent.html#placeholder) is specified for the Select component and there is no selection made, the `igxLabel` will transition and appear where you would expect the placeholder to be. ### Group Select Items + To help visually separate item groups, the select component supports item grouping by wrapping items in an ``. This works best with hierarchical data that can be iterated to declare the components. In the following example, each group has a `label` and a collection of `items`: + ```typescript public greengrocery: Array<{ label: string, items: Array<{ type: string, origin: string }> }> = [ { label: 'Fruits', items: [ @@ -189,8 +196,10 @@ Then in your template file you can iterate over the objects and access their ite ### Header & Footer + Currently, there are no default header and footer templates for the Select component. However, you can add a header or a footer template by marking them respectively with `igxSelectHeader` or `igxSelectFooter`. As these are custom templates, you should define their styling as well. In this example, there are both header and footer ng-templates defined. In the header there is a basic filtering, implemented via [`igx-buttongroup`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html). The footer includes static summary of all of the items, based on the delivery method. + ```html @@ -241,6 +250,7 @@ In this example, there are both header and footer ng-templates defined. In the h ``` + @@ -248,6 +258,7 @@ In this example, there are both header and footer ng-templates defined. In the h ### Custom Toggle Button in Angular Select + You can customize the default toggle button, using the `igxSelectToggleIcon` directive or setting a `TemplateRef` to the [`toggleIconTemplate`]({environment:angularApiUrl}/classes/igxselectcomponent.html#toggleIconTemplate) property. ```html @@ -271,12 +282,14 @@ You can customize the default toggle button, using the `igxSelectToggleIcon` dir - Select an item using the `Enter` or `Space` keys >[!NOTE] ->`igx-select` supports only *single* selection of items. +>`igx-select` supports only _single_ selection of items. -You can also try out the [drag and drop App Builder™](https://www.infragistics.com/products/appbuilder) to see how it automates certain processes and reduces the need for excessive hand coding when building your next Angular app. +You can also try out the [drag and drop App Builder™](https://www.infragistics.com/products/appbuilder) to see how it automates certain processes and reduces the need for excessive hand coding when building your next Angular app. ## Custom Overlay Settings + You can create custom [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html). To do this you first define your template like so: + ```html @@ -284,9 +297,11 @@ You can create custom [`OverlaySettings`]({environment:angularApiUrl}/interfaces ``` + - Where the `overlaySettings` property is bound to your custom settings. Inside your class, you would have something along the lines of: + ```typescript export class MyClass implements OnInit { @ViewChild(IgxSelectComponent) @@ -313,9 +328,10 @@ export class MyClass implements OnInit { } } ``` -You can see that we create a [*PositionSettings*]({environment:angularApiUrl}/interfaces/positionsettings.html) object that is directly passed to our [*ConnectedPositioningStrategy*]({environment:angularApiUrl}/classes/connectedpositioningstrategy.html), it is not required to do it, but since we want to define a custom positioning, we use them to override the strategy's default settings. -- You can set all settings inside of the [*ngOnInit*](https://angular.io/api/core/OnInit) hook and this will automatically affect your template upon the component's generation. +You can see that we create a [_PositionSettings_]({environment:angularApiUrl}/interfaces/positionsettings.html) object that is directly passed to our [_ConnectedPositioningStrategy_]({environment:angularApiUrl}/classes/connectedpositioningstrategy.html), it is not required to do it, but since we want to define a custom positioning, we use them to override the strategy's default settings. + +- You can set all settings inside of the [_ngOnInit_](https://angular.io/api/core/OnInit) hook and this will automatically affect your template upon the component's generation. @@ -336,6 +353,7 @@ You can also pass in a customized [OverlaySettings]({environment:angularApiUrl}/ ``` And you class has the following: + ```typescript export class MyClass implements OnInit { /* -- */ @@ -349,11 +367,37 @@ export class MyClass implements OnInit { /* -- */ } ``` + >[!NOTE] >If you pass in your custom settings both as an argument in the `open` function and in the template, `igx-select` will use the one provided in the `open` function. However, if you bind the settings to an internal event, such as `opening` or `opened` then `igx-select` will use the settings that are provided in the template. ## Styling +### Select Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$toggle-button-background
$toggle-button-foregroundForeground color of the toggle button
$toggle-button-foreground-filledForeground color when toggle button is filled
$toggle-button-background-focusBackground color when focused
$toggle-button-background-focus--border (bootstrap/indigo)Background when focused in border variant (Bootstrap/Indigo)
$toggle-button-foreground-focusForeground color when toggle button is focused
+ Every component has its own theme function. To get the Select component styled, you have to style its containing components. In our case, these are the [input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme) and the [drop-down-theme]({environment:sassApiUrl}/themes#function-drop-down-theme). @@ -388,32 +432,73 @@ The last step is to pass the custom radio theme in our application: iframe-src="{environment:demosBaseUrl}/data-entries/select-styling/" > +### Styling with Tailwind + +You can style the select using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-select`, `dark-select`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [select-theme]({environment:sassApiUrl}/themes#function-select-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your select should look like this: + +
+ +
+
## API Reference -* [IgxSelectComponent]({environment:angularApiUrl}/classes/igxselectcomponent.html) -* [IgxSelectItemComponent]({environment:angularApiUrl}/classes/igxselectitemcomponent.html) -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html) -* [OverlaySettings]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [ConnectedPositioningStrategy]({environment:angularApiUrl}/classes/connectedpositioningstrategy.html) -* [GlobalPositionStrategy]({environment:angularApiUrl}/classes/globalpositionstrategy.html#constructor) -* [AbsoluteScrollStrategy]({environment:angularApiUrl}/classes/absolutescrollstrategy.html) -* [PositionSettings]({environment:angularApiUrl}/interfaces/positionsettings.html) + +- [IgxSelectComponent]({environment:angularApiUrl}/classes/igxselectcomponent.html) +- [IgxSelectItemComponent]({environment:angularApiUrl}/classes/igxselectitemcomponent.html) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html) +- [OverlaySettings]({environment:angularApiUrl}/interfaces/overlaysettings.html) +- [ConnectedPositioningStrategy]({environment:angularApiUrl}/classes/connectedpositioningstrategy.html) +- [GlobalPositionStrategy]({environment:angularApiUrl}/classes/globalpositionstrategy.html#constructor) +- [AbsoluteScrollStrategy]({environment:angularApiUrl}/classes/absolutescrollstrategy.html) +- [PositionSettings]({environment:angularApiUrl}/interfaces/positionsettings.html) ## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) + +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) ## Additional Resources -* [NgModel](https://angular.io/api/forms/NgModel) -* [ViewChild](https://angular.io/api/core/ViewChild) -* [ngForOf](https://angular.io/api/common/NgForOf) + +- [NgModel](https://angular.io/api/forms/NgModel) +- [ViewChild](https://angular.io/api/core/ViewChild) +- [ngForOf](https://angular.io/api/common/NgForOf) Our community is active and always welcoming to new ideas. -* [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) +- [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/simple-combo.md b/en/components/simple-combo.md index 0e59c19f23..a2e9e0d65f 100644 --- a/en/components/simple-combo.md +++ b/en/components/simple-combo.md @@ -6,7 +6,7 @@ _keywords: angular single selection combobox, angular combobox component, angula # Angular Single Select ComboBox Component Overview -The Angular Single Select ComboBox component is a modification of [ComboBox component](combo.md) that allows single selection. We call it "simple combo". Due to high demand for single-selection mode for the original ComboBox component, we created an extension component which offers an editable search input that allows users to choose an option from a predefined list of items and to input custom values. +The Angular Single Select ComboBox component is a modification of [ComboBox component](combo.md) that allows single selection. We call it "simple combo". Due to high demand for single-selection mode for the original ComboBox component, we created an extension component which offers an editable search input that allows users to choose an option from a predefined list of items and to input custom values. ## Angular Simple ComboBox Example @@ -40,7 +40,7 @@ To get started with the Ignite UI for Angular Simple ComboBox component, first y ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxSimpleComboModule` in your **app.module.ts** file. @@ -103,8 +103,8 @@ Our simple combobox is now bound to the array of cities. Since the simple combobox is bound to an array of complex data (i.e. objects), we need to specify a property that the control will use to handle the selected items. The control exposes two `@Input` properties - [valueKey]({environment:angularApiUrl}/classes/IgxSimpleComboComponent.html#valueKey) and [displayKey]({environment:angularApiUrl}/classes/IgxSimpleComboComponent.html#displayKey): - - `valueKey` - *Optional, recommended for object arrays* - Specifies which property of the data entries will be stored for the simple combobox's selection. If `valueKey` is omitted, the simple combobox value will use references to the data entries (i.e. the selection will be an array of entries from `igxSimpleCombo.data`). - - `displayKey` - *Required for object arrays* - Specifies which property will be used for the items' text. If no value is specified for `displayKey`, the simple combobox will use the specified `valueKey` (if any). +- `valueKey` - _Optional, recommended for object arrays_ - Specifies which property of the data entries will be stored for the simple combobox's selection. If `valueKey` is omitted, the simple combobox value will use references to the data entries (i.e. the selection will be an array of entries from `igxSimpleCombo.data`). +- `displayKey` - _Required for object arrays_ - Specifies which property will be used for the items' text. If no value is specified for `displayKey`, the simple combobox will use the specified `valueKey` (if any). In our case, we want the simple combobox to display the `name` of each city and its value to store the `id` of each city. Therefore, we are binding these properties as values to the simple combobox's `displayKey` and `valueKey`, respectively: @@ -205,15 +205,17 @@ Binding to the event can be done through the proper `@Output` property on the `i ## Keyboard Navigation When the simple combobox is closed and focused: + - `ArrowDown` or `Alt` + `ArrowDown` will open the simple combobox's dropdown. > [!NOTE] > Any other key stroke will be handled by the input. When the simple combobox is opened and an item in the list is focused: + - `ArrowDown` will move to the next list item. If the active item is the last one in the list and custom values are enabled, the focus will be moved to the Add item button. -- `ArrowUp` will move to the previous list item. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. +- `ArrowUp` will move to the previous list item. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. - `End` will move to the last list item. @@ -247,6 +249,7 @@ Check out our [Angular Grid with Cascading Combos Sample](../components/grid/cas
### Template Configuration + The API of the simple combobox is used to get the selected item from one component and load the data source for the next one, as well as clear the selection and data source when needed. ```html @@ -275,6 +278,7 @@ The API of the simple combobox is used to get the selected item from one compone ``` ### Component Definition + ```typescript export class SimpleComboCascadingComponent implements OnInit { public selectedCountry: Country; @@ -311,6 +315,7 @@ export class SimpleComboCascadingComponent implements OnInit { The Ignite UI for Angular Simple ComboBox Component exposes an API that allows binding a combobox to a remote service and retrieving data on demand. ### Demo + The sample below demonstrates remote binding using the [dataPreLoad]({environment:angularApiUrl}/classes/IgxSimpleComboComponent.html#dataPreLoad) property to load new chunk of remote data and following the steps described in [ComboBox Remote Binding](combo-remote.md): [!NOTE] > The [`IgxSimpleCombo`]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) component uses the [`IgxOverlay`](overlay.md) service to hold and display the simple combobox items list container. To properly scope your styles you might have to use an [`OverlaySetting.outlet`]({environment:angularApiUrl}/interfaces/overlaysettings.html#outlet). For more details check the [`IgxOverlay Styling Guide`](overlay-styling.md). Also is necessary to use `::ng-deep` when we are styling the components. - > [!Note] > The default `type` of the `IgxSimpleCombo` is `box` unlike the [`IgxSelect`](select.md) where it is `line`. @@ -396,31 +400,34 @@ The last step is to include the component's theme. > The simple combobox uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for the simple combobox. For more details see [igxForOf Known Issues](for-of.md#known-limitations) section. ## API Summary +
-* [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) +- [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) +- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) Additional components and/or directives with relative APIs that were used: -* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) + +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources +
-* [ComboBox Features](combo-features.md) -* [ComboBox Remote Binding](combo-remote.md) -* [ComboBox Templates](combo-templates.md) -* [Template Driven Forms Integration](input-group.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) +- [ComboBox Features](combo-features.md) +- [ComboBox Remote Binding](combo-remote.md) +- [ComboBox Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/slider/slider-ticks.md b/en/components/slider/slider-ticks.md index e73f5f8560..df213a22d2 100644 --- a/en/components/slider/slider-ticks.md +++ b/en/components/slider/slider-ticks.md @@ -7,21 +7,23 @@ _keywords: tick marks, igniteui for angular, infragistics # Usage -### API References +## API References +
-* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) -* [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) -* [SliderType]({environment:angularApiUrl}/enums/slidertype.html) +- [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) +- [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) +- [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) +- [SliderType]({environment:angularApiUrl}/enums/slidertype.html) -### Additional Resources +## Additional Resources -* [Slider overview](slider.md) +- [Slider overview](slider.md)
Our community is active and always welcoming to new ideas. -* [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) + +- [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/slider/slider.md b/en/components/slider/slider.md index 60914966b3..362c9d3992 100644 --- a/en/components/slider/slider.md +++ b/en/components/slider/slider.md @@ -5,12 +5,13 @@ _keywords: angular slider, angular slider component, angular range slider compon --- # Angular Slider Component Overview +

The Ignite UI for Angular Slider is a form component which allows selection in a given range by moving a thumb along a track. The track can be defined as continuous or stepped and the slider can be configured so users can choose between single value and range (lower and upper value) slider types.

## Angular Slider Example - @@ -24,7 +25,7 @@ To get started with the Ignite UI for Angular Slider component, first you need t ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](../general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. The next step is to import the `IgxSliderModule` in your **app.module.ts** file. @@ -91,6 +92,7 @@ Now that you have the Ignite UI for Angular Slider module or directives imported ## Using the Angular Slider ### Discrete Slider + By default, the Slider Component is set to discrete type. A discrete slider provides a visualization of the current value with a numeric label (bubble). The bubble can be shown upon hovering on the slider thumb. You can also use the slider with predefined steps to track only meaningful values for the user. @@ -131,13 +133,14 @@ export class SampleComponent { We should now see two-way data binding between our two components. - ### Continuous Slider + First, specify the slider type by setting the [`continuous`]({environment:angularApiUrl}/classes/igxslidercomponent.html#continuous) input to true. Next, define the minimum and maximum values using [`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue). > [!NOTE] @@ -168,14 +171,15 @@ public volume = 20; If the sample is configured properly, dragging the slider thumb should update the label below and the slider value should be limited between the specified minimum and maximum values: - ### Range Slider -First, set the slider [`type`]({environment:angularApiUrl}/classes/igxslidercomponent.html#type) to [`RANGE`]({environment:angularApiUrl}/enums/slidertype.html#range). Next, we bind the slider value to an object with properties for `lower` and `upper` values. + +First, set the slider [`type`]({environment:angularApiUrl}/classes/igxslidercomponent.html#type) to [`RANGE`]({environment:angularApiUrl}/enums/slidertype.html#range). Next, we bind the slider value to an object with properties for `lower` and `upper` values. ```html @@ -224,15 +228,15 @@ export class SampleComponent { ``` - >[!NOTE] > When using a slider of type RANGE, binding to `ngModel` will work only in the direction of updating the model from the slider. In order to use two-way binding for both values, you can take advantage of the `lowerValue` and `upperValue` bindings. -In some cases, values near to the minimum and maximum are not appropriate. You can further provide a useful range to limit the user choice along with setting [`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue). +In some cases, values near to the minimum and maximum are not appropriate. You can further provide a useful range to limit the user choice along with setting [`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue). This can be done by setting [`lowerBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerBound) and [`upperBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperBound). Now, the user will not be able to move the thumb in the range of 0 to 100 and in the range of 900 to 1000. ```html @@ -250,13 +254,14 @@ This can be done by setting [`lowerBound`]({environment:angularApiUrl}/classes/i ``` - ### Labels mode + We've seen only numbers in the thumbs so far, although there is another approach that you could use in order to present information - by using an array of primitive values. >[!NOTE] > Your array of primitive values should contains at least two values, otherwise `labelsView` won't be enabled. @@ -264,10 +269,10 @@ We've seen only numbers in the thumbs so far, although there is another approach Once we have the definition that corresponds to the preceding rule, we are ready to give it to the `labels` **input** property, which would handle our data by spreading it equally over the `track`. Now, label values represent every primitive value we've defined in our collection. They could be accessed at any time through the API by requesting either [lowerLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerLabel) or [upperLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperLabel). >[!NOTE] -> Please take into account the fact that when [`labelsView`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labelsView) is enabled, your control over the [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue), [`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) and [`step`]({environment:angularApiUrl}/classes/igxslidercomponent.html#step) inputs will be taken. +> Please take into account the fact that when [`labelsView`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labelsView) is enabled, your control over the [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue), [`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) and [`step`]({environment:angularApiUrl}/classes/igxslidercomponent.html#step) inputs will be taken. Another important factor is the way that the `slider` handles the update process when `labelsView` is enabled. -It simply operates with the `index(es)` of the colleciton, which respectively means that the `value`, `lowerBound` and `upperBound` **properties** control the `track` by following/setting them (`index(es)`). +It simply operates with the `index(es)` of the collection, which respectively means that the `value`, `lowerBound` and `upperBound` **properties** control the `track` by following/setting them (`index(es)`). ```html @@ -288,15 +293,16 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd ``` - As we see from the sample above, setting `boundaries` is still a valid operation. Addressing [`lowerBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerbound) and [`upperBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperbound), limits the range you can slide through. -### Lables templating +### Labels templating + During the showcase above, we've intentionally shown how we can provide our custom `label` template, by using both [igxSliderThumbFrom]({environment:angularApiUrl}/interfaces/igxSliderThumbFrom.html) and [igxSliderThumbTo]({environment:angularApiUrl}/interfaces/igxSliderThumbTo.html) directives. Intuitively we can assume that [igxSliderThumbFrom]({environment:angularApiUrl}/interfaces/igxSliderThumbFrom.html) corresponds to the [lowerLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerLabel) and [igxSliderThumbTo]({environment:angularApiUrl}/interfaces/igxSliderThumbTo.html) to the [upperLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperLabel).
The [context]({environment:angularApiUrl}/classes/igxslidercomponent.html#context) here gives us implicitly a reference to the `value` **input** property and explicitly a reference to the `labels` **input** if `labelsView` is enabled. @@ -310,10 +316,12 @@ The [context]({environment:angularApiUrl}/classes/igxslidercomponent.html#contex ``` ## Slider Tick Marks & labels + **Slider tick marks**, provide a new and more appealing way for data visualization, like a particular timeframe, days of the week and more. With this new functionality, the users are not obliged to interact with the Angular Slider in order to see what data range is being represented. It is extremely flexible, with regards to the control over positioning and orientation of the **tick marks** and **tick labels**. The **ticks** can be turned **on/off**, as well as can be toggled between **primary**, **secondary** or **both**. In addition, this feature provides a way to turn **on/of** **primary**, **secondary** **tick labels** or both. **Tick labels** can change their rotation form **horizontal** to **vertical** (**top to bottom** (90) or **bottom to top** (-90)). ### Enable ticks -We can enable the **ticks** of the slider by setting the [`showTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#showTicks) to **true**. + +We can enable the **ticks** of the slider by setting the [`showTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#showTicks) to **true**. Use [`primaryTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#primaryTicks) to set the number of primary ticks. Use [`SecondaryTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#secondaryTicks) to set the number of secondary ticks. @@ -338,14 +346,14 @@ public type = SliderType.RANGE; ``` - +### Labels orientation and visibility -### Labels orientation and visibility. In the following sample we disable all **secondary labels** by setting [`secondaryTickLabels`]({environment:angularApiUrl}/classes/igxslidercomponent.html#secondaryTickLabels) to **false**. ```html @@ -361,7 +369,9 @@ In the following sample we disable all **secondary labels** by setting [`seconda [tickLabelsOrientation]="labelsOrientation"> ``` + We also rotate all viable labels by setting the [`TickLabelsOrientation`]({environment:angularApiUrl}/enums/ticklabelsorientation.html#range) to [`BottomToTop`]({environment:angularApiUrl}/enums/ticklabelsorientation.html) + ``` ```typescript ... @@ -373,13 +383,14 @@ We also rotate all viable labels by setting the [`TickLabelsOrientation`]({envir ``` - ### Ticks position + Let’s move on and see how to change the position of the **ticks**. ```html @@ -394,7 +405,7 @@ Let’s move on and see how to change the position of the **ticks**.
``` -The position change has come from the [`ticksOrientation`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksOrientation) input, which is changed from **Bottom**(default) to **Mirror**. +The position change has come from the [`ticksOrientation`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksOrientation) input, which is changed from **Bottom**(default) to **Mirror**. This mirrors the visualization of the **ticks** and displays them above and below the slider. ```typescript @@ -404,16 +415,20 @@ This mirrors the visualization of the **ticks** and displays them above and belo ``` - > [!NOTE] -> When the [`ticksOrientaion`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksOrientaion) is set to **Top** or **Mirror** and there are visible **tick labels** the **thumb label** is hidden intentionally. This prevents a bad user experience and overlapping between the two labels. +> +### Orientation + +> When the [`ticksOrientation`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksOrientation) is set to **Top** or **Mirror** and there are visible **tick labels** the **thumb label** is hidden intentionally. This prevents a bad user experience and overlapping between the two labels. ### Slider ticks with labels view + This example show how the tick labels and the thumb label works together. ```html @@ -423,14 +438,15 @@ This example show how the tick labels and the thumb label works together. [secondaryTicks]="3" > ``` + ```typescript public type: SliderType = SliderType.RANGE; public labels = ["04:00", "08:00", "12:00", "16:00", "20:00", "00:00"]; ``` - @@ -438,6 +454,7 @@ This example show how the tick labels and the thumb label works together. Here, the [`primaryTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#primaryTicks) input has not been set, because it won’t be reflected in any way. The **length** of the collection takes precedence over it. This does not mean that [`secondaryTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#secondaryTicks) cannot be set. All **secondary ticks** will be empty (without any **labels**). ### Template labels + Lastly, we will see how we can provide a custom template for the **tick labels** and what the [`template context`]({environment:angularApiUrl}/classes/igxtickscomponent.html#context) provides. ```html @@ -450,16 +467,18 @@ Lastly, we will see how we can provide a custom template for the **tick labels** ``` -Applying [`IgxTickLabelTemplateDirective`]({environment:angularApiUrl}/classes/igxticklabeltemplatedirective.html) to the `ng-template` assigns the template over all **tick labels**. + +Applying [`IgxTickLabelTemplateDirective`]({environment:angularApiUrl}/classes/igxticklabeltemplatedirective.html) to the `ng-template` assigns the template over all **tick labels**. > [!NOTE] > The [`context`]({environment:angularApiUrl}/classes/igxtickscomponent.html#context) executes per each tick. -Which means that it provides a reference to: - * each corresponding tick **value** - * If that tick is **primary**. - * **tick** index. - * And the [`labels`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labels) collection if we have such one. +Which means that it provides a reference to: + +- each corresponding tick **value** +- If that tick is **primary**. +- **tick** index. +- And the [`labels`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labels) collection if we have such one. ```typescript public tickLabel(value, primary, index) { @@ -471,16 +490,196 @@ Which means that it provides a reference to: } ``` -In the **tickLabel** callback above, we are rounding the **value** of every **primary** tick. +In the **tickLabel** callback above, we are rounding the **value** of every **primary** tick. - ## Styling +### Slider Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + +
+ + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$track-color
$thumb-colorThe color of the thumb.
$base-track-colorThe base background color of the track.
$track-hover-colorThe color of the track on hover.
$disabled-fill-track-colorThe base fill track color when disabled.
$label-background-colorThe background color of the bubble label.
$thumb-color
$track-colorThe color of the track
$disabled-thumb-colorThe thumb color when it is disabled.
$base-track-color
$base-track-hover-colorThe base track color on hover.
$track-step-colorThe color of the track steps.
$disabled-base-track-colorThe base track color when disabled.
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$thumb-border-color
$track-colorThe color of the track
$thumb-border-hover-colorThe thumb border color when hovered.
$thumb-focus-colorThe focus color of the thumb.
$thumb-disabled-border-colorThe thumb border color when disabled.
$track-color
$thumb-border-colorThe thumb border color
$track-hover-colorThe color of the track on hover.
$disabled-fill-track-colorThe base fill track color when disabled.
$label-background-colorThe background color of the bubble label.
$label-text-colorThe text color of the bubble label.
$base-track-color
$base-track-hover-colorThe base track color on hover.
$track-step-colorThe color of the track steps.
$disabled-base-track-colorThe base track color when disabled.
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$thumb-color
$thumb-border-colorThe thumb border color.
$thumb-focus-colorThe focus color of the thumb.
$track-colorThe color of the track.
$label-background-colorThe background color of the bubble label.
$label-text-colorThe text color of the bubble label.
$disabled-thumb-colorThe thumb color when it is disabled.
$track-color
$track-hover-colorThe color of the track on hover.
$disabled-fill-track-colorThe fill track color when disabled.
$base-track-color
$base-track-hover-colorThe base track color on hover.
$track-step-colorThe color of the track steps.
$disabled-base-track-colorThe base track color when disabled.
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$thumb-border-color
$track-colorThe color of the track.
$thumb-border-hover-colorThe thumb border color when hovered.
$thumb-focus-colorThe focus color of the thumb.
$thumb-disabled-border-colorThe thumb border color when disabled.
$track-color
$thumb-border-colorThe thumb border color.
$track-hover-colorThe color of the track on hover.
$disabled-fill-track-colorThe base fill track color when disabled.
$label-background-colorThe background color of the bubble label.
$label-text-colorThe text color of the bubble label.
$base-track-color
$base-track-hover-colorThe base track color on hover.
$track-step-colorThe color of the track steps.
$disabled-base-track-colorThe base track color when disabled.
+
+
+
+ To customize the Slider, you first need to import the `index` file, where all styling functions and mixins are located. ```scss @@ -512,23 +711,63 @@ The last step is to include the newly created component theme in our application This is the final result from applying our new theme. - +### Styling with Tailwind + +You can style the `slider` using our custom Tailwind utility classes. Make sure to [set up Tailwind](../themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-slider`, `dark-slider`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [IgxSlider Theme]({environment:sassApiUrl}/themes#function-slider-theme). The syntax is as follows: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your slider should look like this: + +
+ +
+ ## API References +
-* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) -* [SliderType]({environment:angularApiUrl}/variables/IgxSliderType-1.html) -* [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) -* [TicksOrientation]({environment:angularApiUrl}/classes/IgxSliderComponent.html#ticksOrientation) -* [TickLabelsOrientation]({environment:angularApiUrl}/classes/IgxSliderComponent.html#tickLabelsOrientation) +- [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) +- [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) +- [SliderType]({environment:angularApiUrl}/variables/IgxSliderType-1.html) +- [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) +- [TicksOrientation]({environment:angularApiUrl}/classes/IgxSliderComponent.html#ticksOrientation) +- [TickLabelsOrientation]({environment:angularApiUrl}/classes/IgxSliderComponent.html#tickLabelsOrientation)
Our community is active and always welcoming to new ideas. -* [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) + +- [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/snackbar.md b/en/components/snackbar.md index 0926eb60dc..b5cf7679e0 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -4,14 +4,16 @@ _description: Easily integrate a brief, single-line message within your mobile a _keywords: Angular Snackbar component, Angular Snackbar control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library --- # Angular Snackbar Component Overview +

The Ignite UI for Angular Snackbar component provides feedback about an operation with a single-line message, which can include an action. The Snackbar message appears above all other elements and is positioned at the bottom center of the screen.

## Angular Snackbar Example +
- @@ -26,7 +28,7 @@ To get started with the Ignite UI for Angular Snackbar component, first you need ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxSnackbarModule` in your **app.module.ts** file. @@ -73,6 +75,7 @@ Now that you have the Ignite UI for Angular Snackbar module or component importe ## Using the Angular Snackbar ### Show Snackbar + In order to display the snackbar component, use its [`open()`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#open) method and call it on a button click. ```html @@ -83,6 +86,7 @@ In order to display the snackbar component, use its [`open()`]({environment:angu Message deleted
``` + If the sample is configured properly, you should see the demo sample. A snackbar appears displaying a text message when the button is clicked. As you can see in the code snippet above, one way to set the massage displayed in the snackbar is to use the content projection. But if you need to switch the value programmatically based on some custom logic you can just pass the value as a parameter to the [`open()`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#open) method. @@ -97,6 +101,7 @@ As you can see in the code snippet above, one way to set the massage displayed i ``` ### Hide/Auto Hide + Once opened, the snackbar disappears after a period specified by the [`displayTime`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#displayTime) input which is set initially to 4000 milliseconds. This behavior is enabled by default but you can change it by setting [`autoHide`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#autoHide) to **false**. In this way, the snackbar will remain visible. Using the snackbar [`close()`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#close) method, you can close the component in the code. ```html @@ -116,17 +121,19 @@ public close(element) { } ``` -If the sample is configured properly, the first snackbar appears when the button is clicked, showing both the *message* and *action button*. The auto-hide feature is disabled and the snackbar disappears on 'CLOSE' button click. Another snackbar passes a different message through the [`open()`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#open) method and hides it when the *display time* expires. The third component passes a message as a param to the [`open()`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#open) method and adds an icon using content projection. +If the sample is configured properly, the first snackbar appears when the button is clicked, showing both the _message_ and _action button_. The auto-hide feature is disabled and the snackbar disappears on 'CLOSE' button click. Another snackbar passes a different message through the [`open()`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#open) method and hides it when the _display time_ expires. The third component passes a message as a param to the [`open()`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#open) method and adds an icon using content projection. - ### Display Time + Use [`displayTime`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#displayTime) and set it to an interval in milliseconds to configure how long the snackbar component is visible. By default, as we said, it's initially set to 4000 milliseconds. ### Customize Snackbar + We can also customize the content of the Snackbar to display more complex elements than a message and a button. If we want to show the snackbar while loading a file, for example, a loading animation could be added to its content. ```html @@ -177,13 +184,14 @@ We can also customize the content of the Snackbar to display more complex elemen As a result, a message and three loading dots appear in the snackbar. - ### Snackbar in list + Having all main snackbar features covered, we can integrate this component in a more interesting scenario. We can use the snackbar to provide a notification and the ability to revert actions. Let’s create a list with contacts that can be deleted. When an item is deleted, a snackbar is displayed containing a message and a button to undo the action. @@ -248,12 +256,13 @@ public restore() { } ``` - ### Positioning + 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 @@ -276,6 +285,29 @@ public open(snackbar) { ``` ## Styling + +### Snackbar Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background$text-colorThe text color used in the snackbar
$button-colorThe button color used in the snackbar
+ To get started with styling the snackbar, we need to import the index file, where all the theme functions and component mixins live: ```scss @@ -283,7 +315,7 @@ To get started with styling the snackbar, we need to import the index file, wher // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`snackbar-theme`]({environment:sassApiUrl}/themes#function-snackbar-theme) and accepts the `$text-color`, `$background`, `$button-color` and the `$border-radius` parameters. @@ -307,26 +339,67 @@ The last step is to **include** the component theme in our application. ### Demo -
+### Styling with Tailwind + +You can style the snackbar using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-snackbar`, `dark-snackbar`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [snackbar-theme]({environment:sassApiUrl}/themes#function-snackbar-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your snackbar should look like this: + +
+ +
+ ## API References + In this article we learned how to use and configure the [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html). For more details in regards its API, take a look at the links below: -* [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) +- [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) Styles: -* [`IgxSnackbarComponent Styles`]({environment:sassApiUrl}/themes#function-snackbar-theme) +- [`IgxSnackbarComponent Styles`]({environment:sassApiUrl}/themes#function-snackbar-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. -* [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) + +- [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/sparkline.md b/en/components/sparkline.md index 661cc1de07..2d769e28f5 100644 --- a/en/components/sparkline.md +++ b/en/components/sparkline.md @@ -55,10 +55,10 @@ export class AppModule {} The Ignite UI for Angular sparkline component supports the following types of sparklines: -- [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#area) -- [`Column`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#column) -- [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#line) -- [`WinLoss`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#winloss) +- [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#area) +- [`Column`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#column) +- [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#line) +- [`WinLoss`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#winloss) The type is defined by setting the [`displayType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#displaytype) property. If the [`displayType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#displaytype) property is not specified, then by default, the [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#line) type is displayed. @@ -89,12 +89,12 @@ The Ignite UI for Angular sparkline component allows you to show markers as circ Markers in the sparkline can be placed in any combination of the following locations: -- `All`: Display markers for all data points in the sparkline. -- `Low`: Display markers on the data point of the lowest value. If there are multiple points at the lowest value, it will show on each point with that value. -- `High`: Display markers on the data point of the highest value. If there are multiple points at the highest value, it will show on each point with that value. -- `First`: Display a marker on the first data point in the sparkline. -- `Last`: Display a marker on the last data point in the sparkline. -- `Negative`: Display markers on the negative data points plotted in the sparkline. +- `All`: Display markers for all data points in the sparkline. +- `Low`: Display markers on the data point of the lowest value. If there are multiple points at the lowest value, it will show on each point with that value. +- `High`: Display markers on the data point of the highest value. If there are multiple points at the highest value, it will show on each point with that value. +- `First`: Display a marker on the first data point in the sparkline. +- `Last`: Display a marker on the last data point in the sparkline. +- `Negative`: Display markers on the negative data points plotted in the sparkline. All of the markers mentioned above can be customized using the related marker types' property in aspects of color, visibility, and size. For example, the `Low` markers above will have properties [`lowMarkerBrush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#lowmarkerbrush), [`lowMarkerVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#lowmarkervisibility), and [`lowMarkerSize`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#lowmarkersize). @@ -130,9 +130,9 @@ The normal range feature of the Ignite UI for Angular sparkline component is a h The normal range can be wider than the maximum data point or beyond, and it can also be as thin as the sparkline's [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/sparklinedisplaytype.html#line) display type, to serve as a threshold indicator, for instance. The width of the normal range is determined by the following three properties, which serve as the minimum settings required for displaying the normal range: -- [`normalRangeVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#normalrangevisibility): Whether or not the normal range is visible. -- [`normalRangeMaximum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#normalrangemaximum): The bottom border of the range. -- [`normalRangeMinimum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#normalrangeminimum): The top border of the range. +- [`normalRangeVisibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#normalrangevisibility): Whether or not the normal range is visible. +- [`normalRangeMaximum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#normalrangemaximum): The bottom border of the range. +- [`normalRangeMinimum`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#normalrangeminimum): The top border of the range. By default, the normal range is not displayed. When enabled, the normal range shows up with a light gray color appearance, which can also be configured using the [`normalRangeFill`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxsparklinecomponent.html#normalrangefill) property. @@ -167,20 +167,20 @@ Trendlines can only be displayed one at a time and by default, the trendline is A list of supported trendlines can be found below: -- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none) -- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit) -- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage) -- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage) -- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit) -- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit) -- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit) -- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage) -- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit) -- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit) -- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit) -- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit) -- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage) -- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage) +- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none) +- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit) +- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage) +- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage) +- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit) +- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit) +- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit) +- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage) +- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit) +- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit) +- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit) +- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit) +- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage) +- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage) The following code example shows how to enable a trendline in the Ignite UI for Angular sparkline component: diff --git a/en/components/splitter.md b/en/components/splitter.md index 6c6998cb6e..76dd762ed7 100644 --- a/en/components/splitter.md +++ b/en/components/splitter.md @@ -10,8 +10,8 @@ The Ignite UI for Angular Splitter component provides the ability to create layo ## Angular Splitter Example - @@ -26,7 +26,7 @@ To get started with the Ignite UI for Angular Splitter component, first you need ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxSplitterModule` in your **app.module.ts** file. @@ -96,9 +96,11 @@ Now that you have the Ignite UI for Angular Splitter module or directives import ### Orientation The splitter can be vertical or horizontal, which is defined by the [`type`]({environment:angularApiUrl}/classes/igxsplittercomponent.html#type) input. The default value is Vertical. + ```typescript public type = SplitterType.Horizontal; ``` + ```html @@ -125,14 +127,15 @@ You can make the splitter collapsible or not by showing or hiding the splitter's ``` - ### Configuring panes The **igxSplitterPane** component contains several input properties. You can set the initial pane size by using the [`size`]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html#size) input property. The [`minSize`]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html#minSize) and [`maxSize`]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html#maxSize) input properties can be used to set the minimum or maximum allowed size of the pane. Resizing beyond `minSize` and `maxSize` is not allowed. + ```html @@ -143,7 +146,9 @@ The **igxSplitterPane** component contains several input properties. You can set ``` + You can also forbid the resizing of a pane by setting its [`resizable`]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html#resizable) input property to **false**. + ```html @@ -158,10 +163,12 @@ You can also forbid the resizing of a pane by setting its [`resizable`]({environ ### Nested panes You can nest splitter components to create a more complex layout inside a splitter pane. + ```typescript public typeHorizontal = SplitterType.Horizontal; public typeVertical = SplitterType.Vertical; ``` + ```html @@ -189,8 +196,8 @@ public typeVertical = SplitterType.Vertical; ### Demo - @@ -200,6 +207,7 @@ public typeVertical = SplitterType.Vertical; Keyboard navigation is available by default in the splitter component. When you focus a splitter bar and press one of the following key combinations, the described behavior is performed. ### Key combinations + - `Arrow Up` - Moves the splitter bar _up_ in a vertical splitter - `Arrow Down` - Moves the splitter bar _down_ in a vertical splitter - `Arrow Left` - Moves the splitter bar _left_ in a horizontal splitter @@ -210,6 +218,30 @@ Keyboard navigation is available by default in the splitter component. When you - `Ctrl + Arrow Right` - Expands/Collapses a pane in a horizontal splitter ## Styling + +### Splitter Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$bar-color$handle-colorThe color for the bar drag handle
$expander-colorThe color for the arrow expander
$focus-colorThe color used for focused splitter bar
+ To get started with styling the **igxSplitter** component, you need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -217,7 +249,7 @@ To get started with styling the **igxSplitter** component, you need to import th // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` You can change the default styles of the splitter by creating a new theme that extends the [`splitter-theme`]({environment:sassApiUrl}/themes#function-splitter-theme). By providing just the base parameters, the theme will automatically generate all necessary styles for the interaction states. @@ -232,7 +264,7 @@ $splitter-theme: splitter-theme( ); ``` -### Using CSS Variables +### Using CSS Variables The next step is to pass the custom splitter theme: @@ -241,14 +273,47 @@ The next step is to pass the custom splitter theme: ``` ### Demo + This is the final result from applying your new theme. - +### Styling with Tailwind + +You can style the splitter using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-splitter`, `dark-splitter`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [splitter-theme]({environment:sassApiUrl}/themes#function-splitter-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + ### Custom sizing You can either use the `--size` variable, targeting the `igx-splitter` directly: @@ -266,28 +331,31 @@ Or you can use the universal `--igx-splitter-size` variable to target all instan
``` + ```scss .my-app { --igx-splitter-size: 10px; } ``` - ## API References +
-* [IgxSplitterComponent]({environment:angularApiUrl}/classes/igxsplittercomponent.html) -* [IgxSplitterPaneComponent]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html) -* [SplitterType]({environment:angularApiUrl}/enums/splittertype.html) -* [IgxSplitterComponent Styles]({environment:sassApiUrl}/themes#function-splitter-theme) +- [IgxSplitterComponent]({environment:angularApiUrl}/classes/igxsplittercomponent.html) +- [IgxSplitterPaneComponent]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html) +- [SplitterType]({environment:angularApiUrl}/enums/splittertype.html) +- [IgxSplitterComponent Styles]({environment:sassApiUrl}/themes#function-splitter-theme)
## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxIcon Styles]({environment:sassApiUrl}/themes#function-icon-theme) + +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxIcon Styles]({environment:sassApiUrl}/themes#function-icon-theme) Our community is active and always welcoming to new ideas. -* [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) + +- [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/spreadsheet-activation.md b/en/components/spreadsheet-activation.md index 32f676bdbd..57e46c00d9 100644 --- a/en/components/spreadsheet-activation.md +++ b/en/components/spreadsheet-activation.md @@ -25,9 +25,9 @@ The Angular Spreadsheet component exposes properties that allow you to determine The activation of the Angular [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) control is split up between the cells, panes, and worksheets of the current [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) of the spreadsheet. The three "active" properties are described below: -* [`activeCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeCell): Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of [`SpreadsheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetcell.html) and pass in information about that cell, such as the column and row or the string address of the cell. -* [`activePane`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activePane): Returns the active pane in the currently active worksheet of the spreadsheet control. -* [`activeWorksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeWorksheet): Returns or sets the active worksheet in the [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) of the spreadsheet control. This can be set by setting it to an existing worksheet in the [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) attached to the spreadsheet. +- [`activeCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeCell): Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of [`SpreadsheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetcell.html) and pass in information about that cell, such as the column and row or the string address of the cell. +- [`activePane`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activePane): Returns the active pane in the currently active worksheet of the spreadsheet control. +- [`activeWorksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeWorksheet): Returns or sets the active worksheet in the [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) of the spreadsheet control. This can be set by setting it to an existing worksheet in the [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) attached to the spreadsheet. ## Code Snippet @@ -41,9 +41,9 @@ this.spreadsheet.activeCell = new SpreadsheetCell("C5"); ## API References -* [`activeCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeCell) -* [`activePane`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activePane) -* [`activeWorksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeWorksheet) -* [`SpreadsheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetcell.html) -* [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) -* [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) +- [`activeCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeCell) +- [`activePane`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activePane) +- [`activeWorksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeWorksheet) +- [`SpreadsheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetcell.html) +- [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) +- [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) diff --git a/en/components/spreadsheet-chart-adapter.md b/en/components/spreadsheet-chart-adapter.md index 2c66609777..dcbf65954a 100644 --- a/en/components/spreadsheet-chart-adapter.md +++ b/en/components/spreadsheet-chart-adapter.md @@ -28,57 +28,57 @@ In order to add a WorksheetChart to a worksheet, you must use the [`addChart`]({ Here are the steps by step description : -1. Add the SpreadsheetChartAdapterModule reference to your project -2. Create an instance of a SpreadsheetChartAdapter class assigning it to the Spreadsheet -3. Run your app and load a worksheet containing a chart. +1. Add the SpreadsheetChartAdapterModule reference to your project +2. Create an instance of a SpreadsheetChartAdapter class assigning it to the Spreadsheet +3. Run your app and load a worksheet containing a chart. ## Supported Charts Types There are over 35 chart types supported by the Spreadsheet ChartAdapters including, Line, Area, Column, and Doughnut. See the full list here: -* Column Charts - * Clustered column - * Stacked column - * 100% stacked column -* Line Charts - * Line - * Line with Markers - * Stacked line - * Stacked line with markers - * 100% stacked line - * 100% stacked line with markers -* Pie Charts -* Donut Charts -* Bar Charts - * Clustered bar - * Stacked bar - * 100% stacked bar - * Area Charts - * Area - * Stacked area - * 100% stacked area -* XY (Scatter) and Bubble Charts - * Scatter (with Marker only) - * Scatter with smooth lines - * Scatter with smooth lines and markers - * Scatter with straight lines - * Scatter with straight lines and markers - * Bubble (without effects) - * Bubble3DEffect -* Stock Charts - * High-low-close - * Open-high-low-close - * Volume-high-low-close - * Volume-open-high-low-close -* Radar Charts - * Radar without markers - * Radar with markers - * Filled Radar -* Combo Charts - * Column and line chart sharing xAxis - * Column and line chart and 2nd xAxis - * Stacked Area and Column - * Custom Combination +- Column Charts + - Clustered column + - Stacked column + - 100% stacked column +- Line Charts + - Line + - Line with Markers + - Stacked line + - Stacked line with markers + - 100% stacked line + - 100% stacked line with markers +- Pie Charts +- Donut Charts +- Bar Charts + - Clustered bar + - Stacked bar + - 100% stacked bar + - Area Charts + - Area + - Stacked area + - 100% stacked area +- XY (Scatter) and Bubble Charts + - Scatter (with Marker only) + - Scatter with smooth lines + - Scatter with smooth lines and markers + - Scatter with straight lines + - Scatter with straight lines and markers + - Bubble (without effects) + - Bubble3DEffect +- Stock Charts + - High-low-close + - Open-high-low-close + - Volume-high-low-close + - Volume-open-high-low-close +- Radar Charts + - Radar without markers + - Radar with markers + - Filled Radar +- Combo Charts + - Column and line chart sharing xAxis + - Column and line chart and 2nd xAxis + - Stacked Area and Column + - Custom Combination ## Dependencies @@ -156,8 +156,8 @@ ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx"). ## API References -* [`addChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetshapecollection.html#addChart) -* [`chartAdapter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#chartAdapter) -* [`SpreadsheetChartAdapter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet_chart_adapter.spreadsheetchartadapter.html) -* [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) -* [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) +- [`addChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetshapecollection.html#addChart) +- [`chartAdapter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#chartAdapter) +- [`SpreadsheetChartAdapter`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet_chart_adapter.spreadsheetchartadapter.html) +- [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) +- [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) diff --git a/en/components/spreadsheet-clipboard.md b/en/components/spreadsheet-clipboard.md index b1d6cddf52..745a5d320b 100644 --- a/en/components/spreadsheet-clipboard.md +++ b/en/components/spreadsheet-clipboard.md @@ -53,5 +53,5 @@ public paste(): void { ## API References -* `SpreadsheetAction` -* [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) +- `SpreadsheetAction` +- [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) diff --git a/en/components/spreadsheet-commands.md b/en/components/spreadsheet-commands.md index 02cc8e90f0..6057223d06 100644 --- a/en/components/spreadsheet-commands.md +++ b/en/components/spreadsheet-commands.md @@ -52,5 +52,5 @@ public zoomOut(): void { ## API References -* `ExecuteAction` -* `SpreadsheetAction` +- `ExecuteAction` +- `SpreadsheetAction` diff --git a/en/components/spreadsheet-conditional-formatting.md b/en/components/spreadsheet-conditional-formatting.md index 1c4a2c2017..eec01f99ab 100644 --- a/en/components/spreadsheet-conditional-formatting.md +++ b/en/components/spreadsheet-conditional-formatting.md @@ -34,21 +34,21 @@ When loading a pre-existing workbook from Excel, the formats will be preserved w The following lists the supported conditional formats in the Angular [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) control: -* [`AverageConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.averageconditionalformat.html): Added using the [`addAverageCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addAverageCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is above or below the average or standard deviation for the associated range. -* [`BlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.blanksconditionalformat.html): Added using the [`addBlanksCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addBlanksCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is not set. -* [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html): Added using the [`addColorScaleCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addColorScaleCondition) method, this conditional format exposes properties which control the coloring of a worksheet cell based on the cell’s value as relative to minimum, midpoint, and maximum threshold values. -* [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html): Added using the [`addDataBarCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDataBarCondition) method, this conditional format exposes properties which display data bars in a worksheet cell based on the cell’s value as relative to the associated range of values. -* [`DateTimeConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.datetimeconditionalformat.html): Added using the [`addDateTimeCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDateTimeCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s date value falls within a given range of time. -* [`DuplicateConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.duplicateconditionalformat.html): Added using the [`addDuplicateCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDuplicateCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique or duplicated across the associated range. -* [`ErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.errorsconditionalformat.html): Added using the [`addErrorsCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addErrorsCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. -* [`FormulaConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.formulaconditionalformat.html): Added using the [`addFormulaCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addFormulaCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a formula. -* [`IconSetConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.iconsetconditionalformat.html): Added using the [`addIconSetCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addIconSetCondition) method, this conditional format exposes properties which display icons in a worksheet cell based on the cell’s value as relative to threshold values. -* [`NoBlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.noblanksconditionalformat.html): Added using the [`addNoBlanksCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addNoBlanksCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is set. -* [`NoErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.noerrorsconditionalformat.html): Added using the [`addNoErrorsCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addNoErrorsCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. -* [`OperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.operatorconditionalformat.html): Added using the [`addOperatorCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addOperatorCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a logical operator. -* [`RankConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.rankconditionalformat.html): Added using the [`addRankCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addRankCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is within the top of bottom rank of values across the associated range. -* [`TextOperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.textoperatorconditionalformat.html): Added using the [`addTextCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addTextCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s text value meets the criteria defined by a string and a [`FormatConditionTextOperator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_excel.formatconditiontextoperator.html) value as placed in the [`addTextCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addTextCondition) method’s parameters. -* [`UniqueConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.uniqueconditionalformat.html): Added using the [`addUniqueCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addUniqueCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique across the associated range. +- [`AverageConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.averageconditionalformat.html): Added using the [`addAverageCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addAverageCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is above or below the average or standard deviation for the associated range. +- [`BlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.blanksconditionalformat.html): Added using the [`addBlanksCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addBlanksCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is not set. +- [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html): Added using the [`addColorScaleCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addColorScaleCondition) method, this conditional format exposes properties which control the coloring of a worksheet cell based on the cell’s value as relative to minimum, midpoint, and maximum threshold values. +- [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html): Added using the [`addDataBarCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDataBarCondition) method, this conditional format exposes properties which display data bars in a worksheet cell based on the cell’s value as relative to the associated range of values. +- [`DateTimeConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.datetimeconditionalformat.html): Added using the [`addDateTimeCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDateTimeCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s date value falls within a given range of time. +- [`DuplicateConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.duplicateconditionalformat.html): Added using the [`addDuplicateCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDuplicateCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique or duplicated across the associated range. +- [`ErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.errorsconditionalformat.html): Added using the [`addErrorsCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addErrorsCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. +- [`FormulaConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.formulaconditionalformat.html): Added using the [`addFormulaCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addFormulaCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a formula. +- [`IconSetConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.iconsetconditionalformat.html): Added using the [`addIconSetCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addIconSetCondition) method, this conditional format exposes properties which display icons in a worksheet cell based on the cell’s value as relative to threshold values. +- [`NoBlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.noblanksconditionalformat.html): Added using the [`addNoBlanksCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addNoBlanksCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is set. +- [`NoErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.noerrorsconditionalformat.html): Added using the [`addNoErrorsCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addNoErrorsCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. +- [`OperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.operatorconditionalformat.html): Added using the [`addOperatorCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addOperatorCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a logical operator. +- [`RankConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.rankconditionalformat.html): Added using the [`addRankCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addRankCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is within the top of bottom rank of values across the associated range. +- [`TextOperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.textoperatorconditionalformat.html): Added using the [`addTextCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addTextCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s text value meets the criteria defined by a string and a [`FormatConditionTextOperator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_excel.formatconditiontextoperator.html) value as placed in the [`addTextCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addTextCondition) method’s parameters. +- [`UniqueConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.uniqueconditionalformat.html): Added using the [`addUniqueCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addUniqueCondition) method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique across the associated range. ## Dependencies @@ -137,39 +137,39 @@ uniqueFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue); ## API References -* [`addAverageCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addAverageCondition) -* [`addBlanksCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addBlanksCondition) -* [`addColorScaleCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addColorScaleCondition) -* [`addDataBarCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDataBarCondition) -* [`addDateTimeCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDateTimeCondition) -* [`addDuplicateCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDuplicateCondition) -* [`addErrorsCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addErrorsCondition) -* [`addFormulaCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addFormulaCondition) -* [`addIconSetCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addIconSetCondition) -* [`addNoBlanksCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addNoBlanksCondition) -* [`addNoErrorsCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addNoErrorsCondition) -* [`addOperatorCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addOperatorCondition) -* [`addRankCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addRankCondition) -* [`addTextCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addTextCondition) -* [`addUniqueCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addUniqueCondition) -* [`cellFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) -* [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html) -* [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html): -* [`conditionalFormats`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#conditionalFormats) -* [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html) -* [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html): -* [`DateTimeConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.datetimeconditionalformat.html): -* [`DuplicateConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.duplicateconditionalformat.html): -* [`ErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.errorsconditionalformat.html): -* [`FormatConditionTextOperator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_excel.formatconditiontextoperator.html) -* [`formatString`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#formatString) -* [`FormulaConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.formulaconditionalformat.html): -* [`IconSetConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.iconsetconditionalformat.html) -* [`IconSetConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.iconsetconditionalformat.html): -* [`NoBlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.noblanksconditionalformat.html): -* [`NoErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.noerrorsconditionalformat.html): -* [`OperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.operatorconditionalformat.html): -* [`RankConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.rankconditionalformat.html): -* [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) -* [`TextOperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.textoperatorconditionalformat.html): -* [`UniqueConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.uniqueconditionalformat.html): +- [`addAverageCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addAverageCondition) +- [`addBlanksCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addBlanksCondition) +- [`addColorScaleCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addColorScaleCondition) +- [`addDataBarCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDataBarCondition) +- [`addDateTimeCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDateTimeCondition) +- [`addDuplicateCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addDuplicateCondition) +- [`addErrorsCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addErrorsCondition) +- [`addFormulaCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addFormulaCondition) +- [`addIconSetCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addIconSetCondition) +- [`addNoBlanksCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addNoBlanksCondition) +- [`addNoErrorsCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addNoErrorsCondition) +- [`addOperatorCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addOperatorCondition) +- [`addRankCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addRankCondition) +- [`addTextCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addTextCondition) +- [`addUniqueCondition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.conditionalformatcollection.html#addUniqueCondition) +- [`cellFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) +- [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html) +- [`ColorScaleConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html): +- [`conditionalFormats`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#conditionalFormats) +- [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html) +- [`DataBarConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html): +- [`DateTimeConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.datetimeconditionalformat.html): +- [`DuplicateConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.duplicateconditionalformat.html): +- [`ErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.errorsconditionalformat.html): +- [`FormatConditionTextOperator`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_excel.formatconditiontextoperator.html) +- [`formatString`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#formatString) +- [`FormulaConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.formulaconditionalformat.html): +- [`IconSetConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.iconsetconditionalformat.html) +- [`IconSetConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.iconsetconditionalformat.html): +- [`NoBlanksConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.noblanksconditionalformat.html): +- [`NoErrorsConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.noerrorsconditionalformat.html): +- [`OperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.operatorconditionalformat.html): +- [`RankConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.rankconditionalformat.html): +- [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) +- [`TextOperatorConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.textoperatorconditionalformat.html): +- [`UniqueConditionalFormat`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.uniqueconditionalformat.html): diff --git a/en/components/spreadsheet-configuring.md b/en/components/spreadsheet-configuring.md index 918c1b1cc4..76d1fdc422 100644 --- a/en/components/spreadsheet-configuring.md +++ b/en/components/spreadsheet-configuring.md @@ -116,9 +116,9 @@ this.spreadsheet.activeWorksheet.unprotect(); The [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) control allows you to configure the type of selection allowed in the control then modifier keys (SHIFT or CTRL) are pressed by the user. This is done by setting the [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#selectionMode) property of the spreadsheet to one of the following values: -* `AddToSelection`: New cell ranges are added to the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) collection without needing to hold down the CTRL key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing SHIFT + F8. -* `ExtendSelection`: The selection range in the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard. -* `Normal`: The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the CTRL key and using the mouse and one may alter the selection range containing the active cell by holding the SHIFT key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys. +- `AddToSelection`: New cell ranges are added to the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) collection without needing to hold down the CTRL key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing SHIFT + F8. +- `ExtendSelection`: The selection range in the [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) object's [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard. +- `Normal`: The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the CTRL key and using the mouse and one may alter the selection range containing the active cell by holding the SHIFT key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys. The [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) object mentioned in the descriptions above can be obtained by using the [`activeSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeSelection) property of the [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) control. @@ -174,14 +174,14 @@ this.spreadsheet.zoomLevel = 200; ## API References -* [`activeCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeCell) -* [`activeSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeSelection) -* `CellRanges` -* `ExtendSelection`: -* [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#selectionMode) -* [`SpreadsheetCellRange`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetcellrange.html) -* [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) -* [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) -* [`WindowOptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.windowoptions.html) -* [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) -* [`zoomLevel`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#zoomLevel) +- [`activeCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeCell) +- [`activeSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeSelection) +- `CellRanges` +- `ExtendSelection`: +- [`selectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#selectionMode) +- [`SpreadsheetCellRange`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetcellrange.html) +- [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) +- [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) +- [`WindowOptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.windowoptions.html) +- [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) +- [`zoomLevel`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#zoomLevel) diff --git a/en/components/spreadsheet-data-validation.md b/en/components/spreadsheet-data-validation.md index 3751ccd56b..75d39cdef4 100644 --- a/en/components/spreadsheet-data-validation.md +++ b/en/components/spreadsheet-data-validation.md @@ -117,4 +117,4 @@ this.spreadsheet.workbook.worksheets(0).rows(7).cells(0).value = "Check Out Date ## API References -* [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) +- [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) diff --git a/en/components/spreadsheet-hyperlinks.md b/en/components/spreadsheet-hyperlinks.md index c3122bf613..e382bb6d81 100644 --- a/en/components/spreadsheet-hyperlinks.md +++ b/en/components/spreadsheet-hyperlinks.md @@ -44,6 +44,6 @@ this.spreadsheet.activeWorksheet.hyperlinks().add(new WorksheetHyperlink("A1", " ## API References -* `Hyperlinks` -* [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) -* [`WorksheetHyperlink`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheethyperlink.html) +- `Hyperlinks` +- [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) +- [`WorksheetHyperlink`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheethyperlink.html) diff --git a/en/components/spreadsheet-overview.md b/en/components/spreadsheet-overview.md index cc7476c6b3..58cf589df7 100644 --- a/en/components/spreadsheet-overview.md +++ b/en/components/spreadsheet-overview.md @@ -22,33 +22,33 @@ The Angular Spreadsheet (Excel viewer) component is lightweight, feature-rich a ## Functionality -* Features +- Features Just like in Excel spreadsheet, you can apply filtering functionality, sorting, move cells, customization in terms of cells color, keyboard shortcuts, and add the ability to even calculate formulas. ## Spreadsheet Usage -* Performance +- Performance The spreadsheet is compatible on all modern browsers and optimized for complex and voluminous spreadsheet models, while ensuring flawless functionality and simplicity. -* Flexible layout and easy customization +- Flexible layout and easy customization You can easily select, add, remove, switch the features you want on/off, and configure React sheets in an instant so that it all answers the needs of end-users. There are also configurable libraries, styling and formatting alternatives, visibility options, plenty of themes to choose from. -* Convenient Excel-like interface +- Convenient Excel-like interface Just like operating data in Excel, our spreadsheet component delivers all well-known Excel clip board operations – copy, paste, cut. You won’t need extra training or new skills in order to start using it right away. It also comes with options for sorting, full keyboard navigation, values and formulas, cell dragging, column and rows editing, filtering, number formatting, resizing. The smart and fast calculation engine powers even the most complex estimations. With no dependencies on Excel. -* Data operations +- Data operations Collect and manage scientific, business, engineering, financial and educational data. Prepare and create analysis, advanced grids, reports, data input forms, budgeting, forecasting scenarios, custom spreadsheets. All of this thanks to the comprehensive API. -* Fast and secure data processing +- Fast and secure data processing With our spreadsheet, processing data is 100% safe and secure… -* Excel and CSV import & export +- Excel and CSV import & export With the built-in Excel import/export functionality, you can instantly load and open Excel documents and view them on-demand, add changes and save them. Also, effortlessly export your completed Excel .xlsx spreadsheets. @@ -117,5 +117,5 @@ ngOnInit() { ## API References -* [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) -* [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) +- [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) +- [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook) diff --git a/en/components/stepper.md b/en/components/stepper.md index a8085483f7..e7b3c3a525 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -5,15 +5,17 @@ _keywords: Angular Stepper component, Angular Wizard Component, Angular Stepper --- # Angular Stepper Component Overview -The Ignite UI for Angular Stepper is a highly customizable component that visualizes content as a process and shows its progress by dividing the content into successive steps. It appears as a vertical or horizontal line. Provided by the Ignite UI for [Angular Component library](https://www.infragistics.com/products/ignite-ui-angular), the stepper component delivers a wizard-like workflow and multiple features like step validation, styling, orientation and keyboard navigation. + +The Ignite UI for Angular Stepper is a highly customizable component that visualizes content as a process and shows its progress by dividing the content into successive steps. It appears as a vertical or horizontal line. Provided by the Ignite UI for [Angular Component library](https://www.infragistics.com/products/ignite-ui-angular), the stepper component delivers a wizard-like workflow and multiple features like step validation, styling, orientation and keyboard navigation. ## Angular Stepper Example + In this Angular Stepper example, you can see how users are given the opportunity to customize their credit card and they pass trough the process in five logical steps - selecting card type, adding business information, filling in personal information, providing shipping details and confirmation. Note that the fourth step in our Angular stepper demo gets enabled only if the user ticks the checkbox in the second step, signifying that their mailing address is different from the business physical address. - @@ -21,8 +23,8 @@ Note that the fourth step in our Angular stepper demo gets enabled only if the u Here is the a sample demonstrating how to achieve the above functionality using Angular Reactive Forms. - @@ -33,9 +35,10 @@ To get started with the Ignite UI for Angular Stepper component, first you need ```cmd ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. -The next step is to import the `IgxStepperModule` in your **app.module.ts** file. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxStepperModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -86,23 +89,26 @@ Now that you have the Angular Stepper module or directives imported, you can sta Now that you have the Angular Stepper module or directives imported, you can start with a basic configuration of the `igx-stepper` and its steps. ## Using the Angular Stepper + [IgxStepComponent]({environment:angularApiUrl}/classes/igxstepcomponent.html) is the representation of every step that belongs to the [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html). Steps provide [isValid]({environment:angularApiUrl}/classes/igxstepcomponent.html#isValid), [active]({environment:angularApiUrl}/classes/igxstepcomponent.html#active), [optional]({environment:angularApiUrl}/classes/igxstepcomponent.html#optional), [disabled]({environment:angularApiUrl}/classes/igxstepcomponent.html#disabled) and [completed]({environment:angularApiUrl}/classes/igxstepcomponent.html#completed) properties, which give you the ability to configure the step states according to your business requirement. ### Declaring a Stepper + Now that we have the stepper module imported, let’s get started with its configuration. Steps can be declared using one of the following approaches. + - Iterating through a data set ```html - {{step.indicator}} + {{step.indicator}}

- {{step.title}} + {{step.title}}

@@ -121,7 +127,8 @@ Steps can be declared using one of the following approaches. ``` -For each step the user has the ability to configure indicator, title, subtitle and content using the `igxStepIndicator`, `igxStepTitle`, `igxStepSubtitle` and `igxStepContent` directives as follows: + +For each step the user has the ability to configure indicator, title, subtitle and content using the `igxStepIndicator`, `igxStepTitle`, `igxStepSubtitle` and `igxStepContent` directives as follows: ```html @@ -135,43 +142,49 @@ For each step the user has the ability to configure indicator, title, subtitle a ``` - + +Ignite UI for Angular Stepper Step Structure ### Changing the Stepper Orientation -You can customize the stepper orientation through the exposed [orientation]({environment:angularApiUrl}/classes/igxsteppercomponent.html#orientation) property. It takes a member of the `IgxStepperOrientation` enum - `Horizontal` *(default value)* or `Vertical`. + +You can customize the stepper orientation through the exposed [orientation]({environment:angularApiUrl}/classes/igxsteppercomponent.html#orientation) property. It takes a member of the `IgxStepperOrientation` enum - `Horizontal` _(default value)_ or `Vertical`. **Horizontal Stepper Orientation** `horizontal` is the default value for the `igx-stepper` [orientation]({environment:angularApiUrl}/classes/igxsteppercomponent.html#orientation) property. When the stepper is horizontally orientated you have the opportunity to determine whether the steps’ content would be displayed above or below the steps’ headers. This could be achieved by setting the [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html) [contentTop]({environment:angularApiUrl}/classes/igxsteppercomponent.html#contentTop) boolean property, which default value is `false`. In case it is enabled the steps’ content would be displayed above the steps’ headers. - +Ignite UI for Angular Stepper Content Rendered Above Stepper **Vertical Stepper Orientation** You can easily switch from the horizontal to vertical layout. In order to change the default orientation you should set the [orientation]({environment:angularApiUrl}/classes/igxsteppercomponent.html#orientation) property to `vertical`. + ```html - - … - + + … + - - … - + + … + ``` -The sample below demonstrates how stepper [orientation]({environment:angularApiUrl}/classes/igxsteppercomponent.html#orientation) and [titles position](stepper.md#customizing-the-steps) could be changed runtime. -
-### Step States +### Step States + [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html) supports four steps states and each of them apply different styles by default: + - [**active**]({environment:angularApiUrl}/classes/igxstepcomponent.html#active) - Determines whether the step is the currently displayed. By design, if the user does not explicitly set some step’s active attribute to `true`, the initial active step would be the first non-disabled step. - [**disabled**]({environment:angularApiUrl}/classes/igxstepcomponent.html#disabled) - Determines whether the step is interactable. By default, the disabled attribute of a step is set to `false`. - [**optional**]({environment:angularApiUrl}/classes/igxstepcomponent.html#optional) - By default, the optional attribute of a step is set to `false`. If validity of a step in linear stepper is not required, then the optional attribute can be enabled in order to be able to move forward independently from the step validity. @@ -184,17 +197,17 @@ By default, the [isValid]({environment:angularApiUrl}/classes/igxstepcomponent.h The `igx-stepper` gives you the opportunity to set its steps flow using the [linear]({environment:angularApiUrl}/classes/igxsteppercomponent.html#linear) property. By default, linear is set to `false` and the user is enabled to select any non-disabled step in the [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html). -When the [linear]({environment:angularApiUrl}/classes/igxsteppercomponent.html#linear) property is set to `true`, the stepper will require the current non-optional step to be valid before proceeding to the next one. +When the [linear]({environment:angularApiUrl}/classes/igxsteppercomponent.html#linear) property is set to `true`, the stepper will require the current non-optional step to be valid before proceeding to the next one. -If the current non-optional step is not valid you cannot go forward to the next step until you validate the current one. +If the current non-optional step is not valid you cannot go forward to the next step until you validate the current one. > [!NOTE] > Optional steps validity is not taken into account in order to move forward. The following example demonstrates how to configure a linear stepper: - @@ -203,6 +216,7 @@ The following example demonstrates how to configure a linear stepper: ### Step Interactions [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html) provides the following API methods for step interactions: + - [**navigateTo**]({environment:angularApiUrl}/classes/igxsteppercomponent.html#navigateTo) – activates the step by given index. - [**next**]({environment:angularApiUrl}/classes/igxsteppercomponent.html#next) - activates the next non-disabled step. - [**prev**]({environment:angularApiUrl}/classes/igxsteppercomponent.html#prev) – activates the previous non-disabled step. @@ -216,7 +230,8 @@ The following example demonstrates how to configure a linear stepper: The Ignite UI for Angular Stepper gives you the ability to configure different options for titles, indicators and more. This could be achieved through the [stepType]({environment:angularApiUrl}/classes/igxsteppercomponent.html#stepType) property of the [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html). It takes a member of the `IgxStepType` enum: -- Full *(default value)* + +- Full _(default value)_ - Indicator - Title @@ -226,6 +241,7 @@ If titles and subtitles are defined, with this setup both indicators and titles The user would also have the ability to define the position of the title for the steps, so it could be placed before, after, above or below the step indicator. The user can configure the title position using the [titlePosition]({environment:angularApiUrl}/classes/igxsteppercomponent.html#titlePosition) property. Both properties take member of `IgxStepperTitlePosition` enum: + - end - start - bottom @@ -255,14 +271,15 @@ In this way if subtitles are defined, they will also be rendered below the step The sample below demonstrates all exposed step types and how they could be changed: -
The [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html) also allows you to customize the rendered indicators for active, invalid and completed steps. This could be achieved through the `igxStepActiveIndicator`, `igxStepInvalidIndicator` and `igxStepCompletedIndicator` directives: + ```html @@ -297,31 +314,112 @@ Setting `none` to the both animation type inputs disables stepper animations. ## Keyboard Navigation -Angular Stepper provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the steps. +Angular Stepper provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the steps. The [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html) navigation is compliant with [W3 accessibility standards](https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html#accessibilityfeatures) and convenient to use. **Key Combinations** - - Tab - moves the focus to the next tabbable element - - Shift + Tab - moves the focus to the previous tabbable element - - Arrow Down - moves the focus to the header of the next accessible step when the `igx-stepper` is **vertically orientated** - - Arrow Up - moves the focus to the header of the previous accessible step when the `igx-stepper` is **vertically orientated** - - Arrow Left - moves the focus to the header of the previous accessible step in both orientations - - Arrow Right - moves the focus to the header of the next accessible step in both orientations - - Home - moves the focus to the header of the FIRST enabled step in the `igx-stepper` - - End - moves the focus to the header of the LAST enabled step in the `igx-stepper` - - Enter / Space - activates the currently focused step - +- Tab - moves the focus to the next tabbable element +- Shift + Tab - moves the focus to the previous tabbable element +- Arrow Down - moves the focus to the header of the next accessible step when the `igx-stepper` is **vertically orientated** +- Arrow Up - moves the focus to the header of the previous accessible step when the `igx-stepper` is **vertically orientated** +- Arrow Left - moves the focus to the header of the previous accessible step in both orientations +- Arrow Right - moves the focus to the header of the next accessible step in both orientations +- Home - moves the focus to the header of the FIRST enabled step in the `igx-stepper` +- End - moves the focus to the header of the LAST enabled step in the `igx-stepper` +- Enter / Space - activates the currently focused step + > [!NOTE] > By design when the user presses the Tab key over the step header the focus will move to the step content container. In case the container should be skipped the developer should set the content container `[tabIndex]="-1"`. -The Stepper Component is also available in the low-code, [drag and drop App Builder™](https://www.infragistics.com/products/appbuilder). +The Stepper Component is also available in the low-code, [drag and drop App Builder™](https://www.infragistics.com/products/appbuilder). ## Angular Stepper Styling -Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the `igx-stepper` appearance. - -First, in order to use the functions exposed by the theme engine, we need to import the `index` file in our style file: +### Stepper Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$step-background
$step-hover-backgroundThe background of the step header on hover
$step-focus-backgroundThe background of the step header on focus
$indicator-backgroundThe background color of the step indicator
$title-colorThe color of the step title
$subtitle-colorThe color of the step subtitle
$current-step-backgroundThe background of the current step header
$invalid-step-backgroundThe background of the invalid step header
$complete-step-backgroundThe background of the complete step header
$disabled-indicator-backgroundThe indicator background of the disabled step
$disabled-title-colorThe title color of the disabled step
$disabled-subtitle-colorThe subtitle color of the disabled step
$step-separator-colorThe separator border color between steps
$indicator-background
$indicator-outlineThe outline color of the step indicator
$indicator-colorThe text color of the step indicator
$current-step-background
$current-step-hover-backgroundThe background of the current step header on hover
$current-step-focus-backgroundThe background of the current step header on focus
$current-indicator-backgroundThe background color of the current step indicator
$current-title-colorThe color of the current step title
$current-subtitle-colorThe color of the current step subtitle
$invalid-indicator-background
$invalid-indicator-outlineThe outline color of the invalid step indicator
$invalid-indicator-colorThe color of the invalid step indicator
$invalid-title-colorThe color of the invalid step title
$invalid-subtitle-colorThe color of the invalid step subtitle
$invalid-title-hover-colorThe color of the invalid step title on hover
$invalid-subtitle-hover-colorThe color of the invalid step subtitle on hover
$invalid-title-focus-colorThe color of the invalid step title on focus
$invalid-subtitle-focus-colorThe color of the invalid step subtitle on focus
$complete-step-background
$complete-step-hover-backgroundThe background of the complete step header on hover
$complete-step-focus-backgroundThe background of the complete step header on focus
$complete-indicator-backgroundThe background color of the complete step indicator
$complete-indicator-colorThe color of the completed step indicator
$complete-title-colorThe color of the complete step title
$complete-subtitle-colorThe color of the complete step subtitle
$complete-title-hover-colorThe color of the complete step title on hover
$complete-subtitle-hover-colorThe color of the complete step subtitle on hover
$complete-title-focus-colorThe color of the complete step title on focus
$complete-subtitle-focus-colorThe color of the complete step subtitle on focus
+ +Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the `igx-stepper` appearance. + +First, in order to use the functions exposed by the theme engine, we need to import the `index` file in our style file: ```scss @use "igniteui-angular/theming" as *; @@ -349,22 +447,63 @@ The last step is to include the component's theme. ``` ### Demo + The sample below demonstrates a simple styling applied through the [Ignite UI for Angular Theming](themes/index.md). - +### Styling with Tailwind + +You can style the stepper using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-stepper`, `dark-stepper`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [stepper-theme]({environment:sassApiUrl}/themes#function-stepper-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your stepper should look like this: + +
+ +
+
## API Reference -* [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html) -* [IgxStepComponent]({environment:angularApiUrl}/classes/igxstepcomponent.html) + +- [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html) +- [IgxStepComponent]({environment:angularApiUrl}/classes/igxstepcomponent.html) ## Additional Resources + Our community is active and always welcoming new ideas. -* [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) +- [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/style-guide.md b/en/components/style-guide.md index b9a2e3e549..4d27ab892d 100644 --- a/en/components/style-guide.md +++ b/en/components/style-guide.md @@ -1,6 +1,6 @@ # Style guide -### Colors +## Colors
@@ -37,18 +37,21 @@
-### badges +## badges +
NEW
UPDATED
-### Bold, italic and scratched +## Bold, italic and scratched + This text is **bold**. -This text is *italic*. +This text is _italic_. This text is ~~scratched~~. -### Headings +## Headings +
Header text h1
Header text h2
Header text h3
@@ -56,10 +59,10 @@ This text is ~~scratched~~.
Header text h5
Header text h6
-### Paragraph +## Paragraph -By default Markdown adds paragraphs at double line breaks. -Single line breaks by themselves are simply wrapped together into a single line. +By default Markdown adds paragraphs at double line breaks. +Single line breaks by themselves are simply wrapped together into a single line. If you want to have soft returns that break a single line, add two spaces at the end of the line. This line has a paragraph break at the end (empty line after). @@ -67,11 +70,11 @@ This line has a paragraph break at the end (empty line after). Theses two lines should display as a single line because there's no double space at the end. -The following line has a soft break at the end (two spaces at end) +The following line has a soft break at the end (two spaces at end) This line should be following on the very next line. This line has a paragraph break at the end (empty line after). -### Links +## Links [www.infragistics.com](https://www.infragistics.com/) @@ -79,29 +82,32 @@ This line has a paragraph break at the end (empty line after). [Internal link](#colors) -### Block Quotes +## Block Quotes +> >
Headers break on their own
- > Note that headers don't need line continuation characters as they are block elements and automatically break. Only text lines require the double spaces for single line breaks. -### Unordered Lists +## Unordered Lists + +- Item 1 +- Item 2 +- Item 3 -* Item 1 -* Item 2 -* Item 3 +## Ordered Lists -### Ordered Lists 1. **Item 1** Item 1 is really something 2. **Item 2** Item two is really something else -### Inline Code +## Inline Code + Structured statements like for `x =1 to 10` loop structures can be codified using single back ticks. -### Code Blocks +## Code Blocks + ```scss :host { ::ng-deep { @@ -111,18 +117,18 @@ Structured statements like for `x =1 to 10` loop structures > [!WARNING] > This is some Note Text > that spreads across two lines - > [!NOTE] > Singe line NOTE. - > [!IMPORTANT] > Don't forget to screw on your hat! -### Table +## Table + | test | test | test | test | test | |------|---------------------------------------------------------|------|------|------| | val | Using the Table menu set the desired size of the table. | val | val | val | @@ -130,7 +136,8 @@ Structured statements like for `x =1 to 10` loop structures
  • First @@ -155,7 +162,8 @@ Structured statements like for `x =1 to 10` loop structures -### Details +## Details +
    summary text diff --git a/en/components/switch.md b/en/components/switch.md index a3d52b96e2..5fd079c90d 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -10,8 +10,8 @@ _keywords: Angular Switch component, Angular Switch control, Ignite UI for Angul ## Angular Switch Example - @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Switch component, first you need t ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxSwitchModule` in your **app.module.ts** file. @@ -114,8 +114,8 @@ igx-switch { And the final result should be something like that: - @@ -131,33 +131,238 @@ If the `labelPosition` is not set, the label will be positioned after the switch ## Styling -Following the simplest approach, you can use CSS variables to customize the appearance of the switch: - -```css -igx-switch { - --thumb-on-color: #e3f0ff; - --thumb-off-color: #fff; - --track-on-color: #0064d9; - --track-off-color: #788fa6; - --track-on-hover-color: #0058bf; - --border-radius-track: 1rem; - --focus-outline-color: #0032a5; - --border-on-color: transparent; - --border-color: transparent; -} - -igx-switch:hover { - --track-off-color: #637d97; -} -``` - -By changing the values of these CSS variables, you can alter the entire look of the switch component. - -
    - -Another way to style the switch is by using **Sass**, along with our [`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) function. - -To start styling the switch using **Sass**, first import the `index` file, which includes all theme functions and component mixins: +### Switch Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + +
    + + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $track-off-color
    		$thumb-off-colorThumb color when switch is off
    $track-disabled-colorTrack color when switch is disabled
    $thumb-off-color
    		$track-off-colorTrack color when switch is off
    $thumb-disabled-colorThumb color when switch is disabled
    $track-on-color
    		$thumb-on-colorThumb color when switch is on
    $track-on-hover-colorTrack color when switch is on and hovered
    $track-on-disabled-colorTrack color when switch is on and disabled
    $thumb-on-color
    		$track-on-colorTrack color when switch is on
    $thumb-on-disabled-colorThumb color when switch is on and disabled
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $thumb-off-color
    		$border-colorBorder color derived from thumb off color
    $thumb-off-hover-colorThumb color on hover
    $border-color
    		$thumb-off-colorThumb off color derived from border color
    $border-hover-colorBorder color on hover
    $border-disabled-colorBorder color when disabled
    $track-off-color
    		$thumb-off-colorThumb off color derived from track off color
    $border-hover-colorBorder color on hover
    $track-disabled-colorTrack color when disabled
    $track-on-color
    		$thumb-on-colorThumb color when switch is on
    $thumb-on-disabled-colorThe color of the thumb when the switch is on and disabled
    $border-on-colorThe border color when the switch is on
    $border-on-hover-colorBorder color when switch is on and hovered
    $track-on-hover-colorTrack color when switch is on and hovered
    $track-on-disabled-colorTrack color when on and disabled
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $thumb-off-color
    		$border-colorBorder color derived from thumb off color
    $thumb-off-hover-colorThumb color on hover
    $border-color
    		$thumb-off-colorThumb off color derived from border color
    $border-hover-colorBorder color on hover
    $border-disabled-colorBorder color when disabled
    $track-off-color
    		$thumb-off-colorThumb off color derived from track off color
    $border-hover-colorBorder color on hover
    $track-disabled-colorTrack color when disabled
    $track-on-color
    		$thumb-on-colorThumb color when switch is on
    $thumb-on-disabled-colorThe color of the thumb when the switch is on and disabled
    $border-on-colorThe border color when the switch is on
    $border-on-hover-colorBorder color when switch is on and hovered
    $track-on-hover-colorTrack color when switch is on and hovered
    $track-on-disabled-colorTrack color when on and disabled
    $focus-fill-colorFill color when switch is focused
    $focus-fill-color
    		$focus-outline-colorOutline color derived from focus fill
    $focus-fill-hover-colorFocus fill color when hovered
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $thumb-off-color
    		$border-colorBorder color derived from thumb off color
    $thumb-off-hover-colorThumb color on hover
    $border-color
    		$thumb-off-colorThumb off color derived from border color
    $border-hover-colorBorder color on hover
    $border-disabled-colorBorder color when disabled
    $track-off-color
    		$thumb-off-colorThumb off color derived from track off color
    $border-hover-colorBorder color on hover
    $track-disabled-colorTrack color when disabled
    $track-on-color
    		$thumb-on-colorThumb color when switch is on
    $thumb-on-disabled-colorThe color of the thumb when the switch is on and disabled
    $border-on-colorThe border color when the switch is on
    $track-on-hover-colorTrack color when switch is on and hovered
    $track-on-disabled-colorTrack color when on and disabled
    $border-on-color
    		$border-on-hover-colorBorder color when switch is on and hovered
    $focus-outlined-color-focusedThe focus outlined color for focused state
    +
    +
    +
    + + +To get started with styling the switch, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; @@ -181,16 +386,52 @@ Finally, **include** the custom theme in your application: @include css-vars($custom-switch-theme); ``` -In the sample below, you can see how using the switch component with customized CSS variables allows you to create a design that visually resembles the switch used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.Switch/sample/sap.m.sample.Switch) design system. +In the sample below, you can see how using the switch component with customized CSS variables allows you to create a design that visually resembles the switch used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.Switch/sample/sap.m.sample.Switch) design system. - -> [!NOTE] -> The sample uses the [Fluent Light](themes/sass/schemas.md#predefined-schemas) schema. +### Styling with Tailwind + +You can style the switch using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-switch`, `dark-switch`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [IgxSwitch Theme]({environment:sassApiUrl}/themes#function-switch-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your switch should look like this: + +
    + +
    @@ -198,12 +439,12 @@ In the sample below, you can see how using the switch component with customized
    -* [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) -* [IgxSwitchComponent Styles]({environment:sassApiUrl}/themes#function-switch-theme) +- [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) +- [IgxSwitchComponent Styles]({environment:sassApiUrl}/themes#function-switch-theme) ## Theming Dependencies -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) ## Additional Resources @@ -211,5 +452,5 @@ In the sample below, you can see how using the switch component with customized Our community is active and always welcoming to new ideas. -* [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) +- [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/tabbar.md b/en/components/tabbar.md index 8a3130457c..920915c812 100644 --- a/en/components/tabbar.md +++ b/en/components/tabbar.md @@ -32,7 +32,7 @@ To get started with the Ignite UI for Angular Bottom Navigation component, first ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxBottomNavModule` in your **app.module.ts** file. @@ -206,6 +206,7 @@ Next, update the component's template markup as follows: ``` + You probably noticed that in addition to placing the icon and the span with the label between the item's header tags, we also attach the `igxBottomNavHeaderIcon` and the `igxBottomNavHeaderLabel` directives to them. These directives denote the respective elements and apply the proper styles to them. Finally, add the CSS classes used by the DIV and SPAN elements of the content's template to the component's CSS file: @@ -382,6 +383,62 @@ The approach described above is used by the following sample to demonstrate rout ## Styles +### Bottom Nav Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $background$label-colorThe label color used in idle state.
    $label-color$icon-colorThe icon color used in idle state.
    $label-disabled-colorThe disabled color of the label.
    $icon-color$label-colorThe label color used in idle state.
    $label-disabled-color$icon-disabled-colorThe disabled color of the icon.
    $icon-disabled-color$label-disabled-colorThe disabled color of the label.
    $label-selected-color$icon-selected-colorThe icon color used in selected state.
    $icon-selected-color$label-selected-colorThe label color used in selected state.
    + To get started with styling the tabs, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -389,7 +446,7 @@ To get started with styling the tabs, we need to import the `index` file, where // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`bottom-nav-theme`]({environment:sassApiUrl}/themes#function-bottom-nav-theme) and accepts various parameters that allow us to style the tab groups. @@ -423,23 +480,67 @@ The last step is to **include** the component theme in our application. iframe-src="{environment:demosBaseUrl}/layouts/tabbar-style/" > +### Styling with Tailwind + +You can style the bottom navigation using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the Tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-bottom-nav`, `dark-bottom-nav`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [IgxBottomNav Theme]({environment:sassApiUrl}/themes#function-bottom-nav-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your bottom nav should look like this: + +
    + +
    +
    ## API References +
    -* [IgxBottomNavComponent]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) -* [IgxBottomNavComponent Styles]({environment:sassApiUrl}/themes#function-bottom-nav-theme) -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxBottomNavComponent]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) +- [IgxBottomNavComponent Styles]({environment:sassApiUrl}/themes#function-bottom-nav-theme) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) + +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) +- [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/tabs.md b/en/components/tabs.md index ecce5edeb3..a0befe11e6 100644 --- a/en/components/tabs.md +++ b/en/components/tabs.md @@ -5,9 +5,10 @@ _keywords: Angular Tabs component, Angular Tabs control, Angular Tabs, Angular T --- # Angular Tabs Component Overview -Ignite UI for Angular Tabs is a full-featured user interface component that has the primary purpose to organize and group related content in a single tabbed view, thus saving space and making content more comprehensible. It packs different features like animations, templating, customization options, and others. -Tabs in Angular are extremely useful when you’re building a web page with plenty of content that must be fitted into categories and displayed in a concise and space-efficient way. +Ignite UI for Angular Tabs is a full-featured user interface component that has the primary purpose to organize and group related content in a single tabbed view, thus saving space and making content more comprehensible. It packs different features like animations, templating, customization options, and others. + +Tabs in Angular are extremely useful when you’re building a web page with plenty of content that must be fitted into categories and displayed in a concise and space-efficient way.

    @@ -17,7 +18,7 @@ The [`igx-tabs`]({environment:angularApiUrl}/classes/igxtabscomponent.html) comp ## Angular Tabs Example -This is a basic example of Angular Nested Tabs where we have one tab within another where only one view can be seen at the time. Using nested tabs in Angular, we can display information in a better, structured way. +This is a basic example of Angular Nested Tabs where we have one tab within another where only one view can be seen at the time. Using nested tabs in Angular, we can display information in a better, structured way.

    ## Angular Tabs Alignment + `IgxTabs` [`tabAlignment`]({environment:angularApiUrl}/classes/igxtabscomponent.html#tabAlignment) input property controls how tabs are positioned and arranged. It accepts four different values - start, center, end and justify. + - **Start** (default): the width of the tab header depends on the content (label, icon, both) and all tabs have equal padding. First tab is aligned to the tabs container left side. - **Center**: the width of the tab header depends on the content and occupies the tabs container center. If the space is not enough to fit all items, scroll buttons are displayed. - **End**: the width of the tab header depends on the content and all tabs have equal padding. Last tab is aligned to the tabs container right side. @@ -383,6 +386,325 @@ The above code creates an `igx-tabs` component with three tab items. Each tab it ## Styles +### Tabs Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + +
    + + + + + + + + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $item-background
    		$item-active-backgroundThe color used for the active/focused tab background.
    $item-text-colorThe color used for the tab text color.
    $item-icon-colorThe color used for the tab icon.
    $item-hover-backgroundThe background used for the tabs on hover.
    $indicator-colorThe color used for the active tab indicator.
    $button-backgroundThe color used for the button background.
    $button-hover-backgroundThe color used for the button background on hover.
    $item-active-background
    		$item-active-icon-colorThe color used for the active tab icon.
    $item-active-colorThe color used for the active tabs text.
    $tab-ripple-colorThe color used for the button background.
    $item-text-color
    		$item-hover-colorThe text color used for the tabs on hover if no `$item-hover-background` is provided
    $item-icon-colorThe color used for the tab icon if no `$item-background` is provided
    $item-active-colorThe color used for the active tabs text if no `$item-active-background` is provided
    $indicator-colorThe color used for the active tab indicator if no `$item-background` is provided
    $item-icon-color
    		$item-hover-icon-colorThe color used for the tab icon on hover.
    $item-active-icon-colorThe color used for the active tab icon.
    $indicator-colorThe color used for the active tab indicator.
    $button-background
    		$button-hover-backgroundThe color used for the button background on hover.
    $button-colorThe color used for the button icon/text color.
    $button-color
    		$button-disabled-colorThe color used for the disabled button icon/text.
    $button-ripple-colorThe color used for the button background on hover.
    $button-hover-background$button-hover-colorThe color used for the button icon/text color on hover.
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $item-background
    		$item-active-backgroundThe color used for the active/focused tab background.
    $item-text-colorThe color used for the tab text color.
    $item-icon-colorThe color used for the tab icon.
    $item-hover-backgroundThe background used for the tabs on hover.
    $indicator-colorThe color used for the active tab indicator.
    $button-backgroundThe color used for the button background.
    $button-hover-backgroundThe color used for the button background on hover.
    $item-active-background
    		$item-active-icon-colorThe color used for the active tab icon.
    $item-active-colorThe color used for the active tabs text.
    $tab-ripple-colorThe ripple color for the tab interaction.
    $item-text-color
    		$item-hover-colorThe text color used for the tabs on hover if no `$item-hover-background` is provided
    $item-icon-colorThe color used for the tab icon if no `$item-background` is provided
    $item-active-colorThe color used for the active tabs text if no `$item-active-background` is provided
    $indicator-colorThe color used for the active tab indicator if no `$item-background` is provided
    $item-icon-color
    		$item-hover-icon-colorThe color used for the tab icon on hover.
    $item-active-icon-colorThe color used for the active tab icon.
    $indicator-colorThe color used for the active tab indicator.
    $button-background
    		$button-hover-backgroundThe color used for the button background on hover.
    $button-colorThe color used for the button icon/text color.
    $button-color
    		$button-disabled-colorThe color used for the disabled button icon/text.
    $button-ripple-colorThe color used for the button background on hover.
    $button-hover-background$button-hover-colorThe color used for the button icon/text color on hover.
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $item-background
    		$item-active-backgroundThe color used for the active/focused tab background.
    $item-text-colorThe color used for the tab text color.
    $item-icon-colorThe color used for the tab icon.
    $item-hover-backgroundThe background used for the tabs on hover.
    $indicator-colorThe color used for the active tab indicator.
    $button-backgroundThe color used for the button background.
    $button-hover-backgroundThe color used for the button background on hover.
    $border-colorThe border color of the tabs.
    $item-active-background
    		$item-active-icon-colorThe color used for the active tab icon.
    $item-active-colorThe color used for the active tabs text.
    $tab-ripple-colorThe color used for the button background.
    $item-text-color
    		$item-hover-colorThe text color used for the tabs on hover if no `$item-hover-background` is provided
    $item-icon-colorThe color used for the tab icon if no `$item-background` is provided
    $button-colorThe color used for the button icon/text color if no `$button-background` is provided (non-material)
    $item-icon-color
    		$item-hover-icon-colorThe color used for the tab icon on hover if no `$item-hover-background` is provided
    $item-text-colorThe color used for the tab text color if no `$item-background` is provided
    $button-background
    		$button-hover-backgroundThe color used for the button background on hover.
    $button-colorThe color used for the button icon/text color.
    $button-color
    		$button-hover-colorThe color used for the button icon/text color on hover if no `$button-background` is provided
    $button-disabled-colorThe color used for the disabled button icon/text.
    $button-ripple-colorThe color used for the button background on hover.
    $button-hover-background$button-hover-colorThe color used for the button icon/text color on hover.
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $item-background
    		$item-active-backgroundThe color used for the active/focused tab background.
    $item-text-colorThe color used for the tab text color.
    $item-icon-colorThe color used for the tab icon.
    $item-hover-backgroundThe background used for the tabs on hover.
    $indicator-colorThe color used for the active tab indicator.
    $button-backgroundThe color used for the button background.
    $button-hover-backgroundThe color used for the button background on hover.
    $item-active-background
    		$item-active-icon-colorThe color used for the active tab icon.
    $item-active-colorThe color used for the active tabs text.
    $tab-ripple-colorThe color used for the button background.
    $item-text-color
    		$item-hover-colorThe text color used for the tabs on hover if no `$item-hover-background` is provided
    $item-icon-colorThe color used for the tab icon if no `$item-background` is provided
    $item-active-colorThe color used for the active tabs text if no `$item-active-background` is provided
    $indicator-colorThe color used for the active tab indicator if no `$item-background` is provided
    $item-icon-color
    		$item-hover-icon-colorThe color used for the tab icon on hover.
    $item-active-icon-colorThe color used for the active tab icon.
    $indicator-colorThe color used for the active tab indicator.
    $button-background
    		$button-hover-backgroundThe color used for the button background on hover.
    $button-colorThe color used for the button icon/text color.
    $button-color
    		$button-disabled-colorThe color used for the disabled button icon/text.
    $button-ripple-colorThe color used for the button background on hover.
    $button-hover-background$button-hover-colorThe color used for the button icon/text color on hover.
    +
    +
    +
    + + To get started with styling the tabs, we need to import the theming module, where all the theme functions and component mixins live: ```scss @@ -390,7 +712,7 @@ To get started with styling the tabs, we need to import the theming module, wher // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`tabs-theme`]({environment:sassApiUrl}/themes#function-tabs-theme). By passing just a few base parameters—such as `$item-background` and `$item-active-color`—you can style your tabs with minimal effort. The theme will automatically generate all necessary background and foreground colors for the various interaction states. @@ -425,28 +747,72 @@ The last step is to **include** the component theme in our application. iframe-src="{environment:demosBaseUrl}/layouts/tabs-style/" > +### Styling with Tailwind + +You can style the tabs using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-tabs`, `dark-tabs`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [IgxTabs Theme]({environment:sassApiUrl}/themes#function-tabs-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your tabs should look like this: + +
    + +
    +
    ## API References +
    -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) -* [IgxTabsComponent]({environment:angularApiUrl}/classes/igxtabscomponent.html) -* [IgxTabsComponent Styles]({environment:sassApiUrl}/themes#function-tabs-theme) -* [IgxTabItemComponent]({environment:angularApiUrl}/classes/igxtabitemcomponent.html) -* [IgxTabHeaderComponent]({environment:angularApiUrl}/classes/igxtabheadercomponent.html) -* [IgxTabContentComponent]({environment:angularApiUrl}/classes/igxtabcontentcomponent.html) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) +- [IgxTabsComponent]({environment:angularApiUrl}/classes/igxtabscomponent.html) +- [IgxTabsComponent Styles]({environment:sassApiUrl}/themes#function-tabs-theme) +- [IgxTabItemComponent]({environment:angularApiUrl}/classes/igxtabitemcomponent.html) +- [IgxTabHeaderComponent]({environment:angularApiUrl}/classes/igxtabheadercomponent.html) +- [IgxTabContentComponent]({environment:angularApiUrl}/classes/igxtabcontentcomponent.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) + +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) +- [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/texthighlight.md b/en/components/texthighlight.md index 154031e98f..312a5de8ad 100644 --- a/en/components/texthighlight.md +++ b/en/components/texthighlight.md @@ -10,8 +10,8 @@ The [`IgxTextHighlightDirective`]({environment:angularApiUrl}/classes/igxtexthig ## Angular Text Highlight Directive Example - @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Text Highlight directive, first yo ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxTextHighlightModule` in your **app.module.ts** file. @@ -246,8 +246,8 @@ export class HomeComponent { If the sample is configured properly, the final result should look like that: - @@ -341,8 +341,8 @@ export class HomeComponent { } ``` - @@ -432,9 +432,9 @@ As mentioned earlier, we can even combine them with a theme: ### Demo - @@ -444,20 +444,21 @@ As mentioned earlier, we can even combine them with a theme: For more detailed information regarding the TextHighlight directive's API, refer to the following link: -* [`IgxTextHighlight API`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html) +- [`IgxTextHighlight API`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html) Additional components that were used: -* [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [`IgxInputGroupComponent Styles`]({environment:sassApiUrl}/themes#function-input-group-theme) +- [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [`IgxInputGroupComponent Styles`]({environment:sassApiUrl}/themes#function-input-group-theme) +
    ## Additional Resources -* [Grid Search](grid/search.md) +- [Grid Search](grid/search.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/themes.md b/en/components/themes.md index d56eab640a..658053b842 100644 --- a/en/components/themes.md +++ b/en/components/themes.md @@ -8,28 +8,28 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI With only a few lines of code, users can easily change the theming for their components. Being developed through SASS, the API use is low-difficulty and offers restyling of one component, multiple components, or the entire suite. -### The Essence of a Theme +## The Essence of a Theme Since **IgniteUI for Angular** bases its component designs on the **    Material Design Guidelines**, we try to get as close as possible to colors, sizes, and overall look and feel of our components to those created by Google. Our approach to theming is based around several simple concepts. -#### Palettes +### Palettes The first concept is the one of palettes of colors. As in any visual tool, colors are the main difference between one application and another. The Material Design Guidelines prescribe predefined palettes of colors that range in hue and lightness for a base color. There's a good reason for that. They really want to ensure good color matching and contrast between the background colors and the foreground text colors. This is great, but limiting at the same time. If you wanted to have your own custom palette that matches your branding, you would be out of luck. We recognize this is a problem, so we invented an algorithm that would generate Material-like palettes from base colors you provide. Even more, we also generate contrast text colors for each hue in the palette. -#### Themes +### Themes The second concept is the one of themes. Palettes, wouldn't do much good if they weren't used by a theme. So we have themes for each component, and a global one, that styles the entire application and every component in it. You simply pass your generated palette to the global theme, we take care of the rest. You can, of course, style each component individually to your liking. We will take a closer look at how to do that later in this article. -#### Typography +### Typography The last concept revolves around typography. Although we have a default typeface choice, we really want to give you the power to style your application in every single way. Typography is such an important part of that. We provide a method for changing the font family, the sizes and weights for headings, subheadings and paragraph texts in your app. > [!NOTE] > Theming **requires** [**Sass**](https://github.com/sass/node-sass). -### Generating Color Palettes +## Generating Color Palettes Our theming library is based on Sass. If you used the **Ignite UI CLI** to bootstrap your app, you can specify the style in the **angular.json** config to _scss_, the CLI will take care of compiling the Sass styles for you. If you haven't used Ignite UI CLI then you have to configure your builder to compile Sass styles for you. @@ -63,7 +63,7 @@ Got it? Good! But how does one access any of the colors in the palette?
    -#### Getting Sub-Palette Colors +### Getting Sub-Palette Colors We provide a function that is easy to remember and use `color`. It takes three arguments - `palette`, `color`, and `variant`; @@ -85,7 +85,7 @@ $my-warning-color: color($my-color-palette, "warn");
    -#### Getting Contrast Text Colors +### Getting Contrast Text Colors Similar to how we get sub-palette colors, there's a way to get the contrast text color for each of the colors in the sub-palettes. @@ -100,11 +100,11 @@ $my-primary-800-text: contrast-color($my-palette, "primary", 600); } ``` -### Generating a Theme +## Generating a Theme If you've included the _"igniteui-angular.css"_ file in your application project, now is a good time to remove it. We are going to use our own _"my-app-theme.scss"_ file to generate our own theme. -Let's start from our very first example on this page. This time, though, we're going to be including two mixins `core` and `theme`; For now `core` doesn't accept any arguments. `theme`, however, does accept a few - `$palette`, `$schema`, `$exclude`, `$roundness`, `$elevation`, `$elevations`. For now, we'll only talk about the `$palette` argument. +Let's start from our very first example on this page. This time, though, we're going to be including two mixins `core` and `theme`; For now `core` doesn't accept any arguments. `theme`, however, does accept a few - `$palette`, `$schema`, `$exclude`, `$roundness`, `$elevation`, `$elevations`. For now, we'll only talk about the `$palette` argument. > [!IMPORTANT] > Including `core` before `theme` is essential. The `core` mixin provides all base definitions needed for `theme` to work. @@ -135,7 +135,6 @@ $my-color-palette: palette( That's it. Your application will now use the colors from your newly generated palette. - In its current state, the defining custom typography is limited to changing the `font family` of the application. We'll be updating this functionality with subsequent releases. Our intent is to provide a robust way to customize the typography in your application. To customize the typography use the `typography` mixin. It takes exactly one argument - `config`. diff --git a/en/components/themes/elevations.md b/en/components/themes/elevations.md index d22ff5a77a..e4c8b03ace 100644 --- a/en/components/themes/elevations.md +++ b/en/components/themes/elevations.md @@ -71,6 +71,7 @@ Example: Now, all components that use elevation levels 1 and 2 will have their shadows updated. ### Shadowing + You can shadow the globally set elevations for a specific scope only. We already saw that the button component uses elevation level 2 for its resting state. Level 2 is also used by the card and grid components. So to change the shadows for all three, all you need to do is: ```css @@ -80,6 +81,7 @@ igx-card { --ig-elevation-2: 0 3px 9px 0 rgba(0, 0, 0, .24); } ``` + This will set the `--resting-shadow` in the contained button and card, and the `--grid-shadow` in the grid, to the value assigned to `--ig-elevation-2`; Elevations can be created and consumed in a more powerful way using Sass as well. Check out the related topics below to learn more. @@ -92,5 +94,5 @@ Related topics: Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/index.md b/en/components/themes/index.md index afb3024912..4b2772f569 100644 --- a/en/components/themes/index.md +++ b/en/components/themes/index.md @@ -5,15 +5,17 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Theming + Ignite UI for Angular allows you to modify the styles of all component themes using CSS variables. If you really wanted to dig deep, we provide a powerful Sass theming engine that allows you to create global component themes tailored to your specific design language that work in all modern browsers. ->[!NOTE] +>[!NOTE] > This document describes the theming system in Ignite UI for Angular from version 12 forward. Starting with version 12 **CSS variables are the recommended way to modify the global and component themes**. > You can still use the Sass theming library as you would've prior to version 12. ## Basic Usage Ignite UI for Angular includes the following themes as part of its package: + - Material - Bootstrap - Fluent @@ -72,7 +74,7 @@ If you wanted to change the primary and secondary colors, all you have to do is } ``` -Let's break down the names of these color variables. The `ig` prefix is there as a unique identifier to indicate that this variable is part of an Ignite UI for Angular theme, `primary` is the color variable name, and `500` stands for the color variant. We will take a deeper look at palettes in the [Palettes](./palettes.md) section of the documentation. For now all you need to know is that we have several base color variables (primary, secondary, surface, success, info, etc.) that include different shades or _variants_ that are all generated from the main color variants. The `500` color variants that we set in the above example are considered the main variable color and all of the other variants for the given color variable are generated from the `500` variant. +Let's break down the names of these color variables. The `ig` prefix is there as a unique identifier to indicate that this variable is part of an Ignite UI for Angular theme, `primary` is the color variable name, and `500` stands for the color variant. We will take a deeper look at palettes in the [Palettes](./palettes.md) section of the documentation. For now all you need to know is that we have several base color variables (primary, secondary, surface, success, info, etc.) that include different shades or _variants_ that are all generated from the main color variants. The `500` color variants that we set in the above example are considered the main variable color and all of the other variants for the given color variable are generated from the `500` variant. Changing these variants, you can completely overhaul the entire palette. @@ -103,7 +105,7 @@ These are essentially stacked CSS [`box-shadow`](https://developer.mozilla.org/e There are several variables that allow you to configure the global behavior of the theme: -#### Roundness +### Roundness To configure the radius factor of all components you can change the value of the `--ig-radius-factor` variable. The default value is 1, meaning the default radius factor is used across component themes. @@ -116,7 +118,7 @@ Example: } ``` -#### Elevation Factor +### Elevation Factor To configure the elevation factor of all components you can change the value of the `--ig-elevation-factor` variable. The default value is 1, meaning the default elevations are used across component themes. @@ -208,5 +210,5 @@ Related topics: Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/misc/angular-material-theming.md b/en/components/themes/misc/angular-material-theming.md index 8c24225fe7..b2dd92c827 100644 --- a/en/components/themes/misc/angular-material-theming.md +++ b/en/components/themes/misc/angular-material-theming.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Material Theming +

    The Ignite UI for Angular theming engine makes it easy to be used together with external components imported from other theming libraries like the [`Angular Material`](https://material.angular.io/) library.

    @@ -12,7 +13,7 @@ The Ignite UI for Angular theming engine makes it easy to be used together with ## Ignite UI and Angular Material Overview -Angular Material is a UI component library for mobile and desktop Angular web applications. It includes several prebuilt themes and a great number of components that are based on the [`Material Design specification`](https://material.io/components). +Angular Material is a UI component library for mobile and desktop Angular web applications. It includes several prebuilt themes and a great number of components that are based on the [`Material Design specification`](https://material.io/components). The Ignite UI for Angular is a complete set of Material-based UI Widgets, Components & Sketch UI kits and supporting directives for Angular that enables developers to build modern high-performance apps. Our theming engine is easy to use and allows theming granularity on different levels from a single component, multiple components, or the entire suite. Furthermore, it can be used to style components from other theming libraries with very little effort. @@ -20,8 +21,8 @@ The following article demonstrates how to use both Ignite UI and Angular Materia ## Angular Material Theming Example - @@ -31,9 +32,9 @@ The following article demonstrates how to use both Ignite UI and Angular Materia ### How to install Angular Material -If you are using Angular CLI and have an existing Angular project, you can add Angular Material with the command below: +If you are using Angular CLI and have an existing Angular project, you can add Angular Material with the command below: -```cmd +```cmd ng add @angular/material ``` @@ -41,7 +42,7 @@ Then, you will have to choose one of the prebuilt themes and whether to set up g You can find more information about using the Angular Material library at their [`official documentation`](https://material.angular.io/guide/getting-started). -### How to install Ignite UI for Angular +### How to install Ignite UI for Angular To install the Ignite UI for Angular package along with all of its dependencies, font imports, and styles references, run the following command in your project: @@ -49,7 +50,7 @@ To install the Ignite UI for Angular package along with all of its dependencies, ng add igniteui-angular ``` -Then, you can use the Ignite UI components by importing their respective modules in your *app.module.ts* file: +Then, you can use the Ignite UI components by importing their respective modules in your _app.module.ts_ file: ```ts // manually addition of the Igx Avatar component @@ -71,21 +72,21 @@ Follow our [`Getting Started`](../../general/getting-started.md) topic for a com Let's see how our demo sample is done. It is a mixture of Ignite UI and Angular Material components, styled to fit nicely in one application. The navigation in our example is created using the material [`mat-toolbar`](https://material.angular.io/components/toolbar/overview) together with [`igx-buttons`]({environment:angularApiUrl}/classes/igxbuttondirective.html) and [`igx-avatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html). The [`menu`](https://material.angular.io/components/menu/overview) under the Campaigns button is also taken from the Angular Material library. Below the nav, we are using the [`igx-card`]({environment:angularApiUrl}/classes/igxcardcomponent.html) component to display some statistics. Within the cards, we have placed multiple items - [`igx-avatars`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) and [`igx-icons`]({environment:angularApiUrl}/classes/igxiconcomponent.html) as well as material [`buttons`](https://material.angular.io/components/button/overview). - +Angular Material Components Navigation Clicking on the `More` buttons, you will see the [`igx-dialog`]({environment:angularApiUrl}/classes/igxdialogcomponent.html): - +Ignite UI for Angular Dialog Next, we have added an [`igx-expansion-panel`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) showing information about some credit cards. Inside its content, there are [`mat-sliders`](https://material.angular.io/components/slider/overview), an [`igx-divider`]({environment:angularApiUrl}/classes/igxdividerdirective.html) and a [`mat-stepper`](https://material.angular.io/components/stepper/overview) with [`mat-form-fields`](https://material.angular.io/components/form-field/overview). - +Ignite UI for Angular Expansion Panel Finally, we inserted an Ignite UI for Angular [`icon button`]({environment:angularApiUrl}/classes/igxiconbuttondirective.html) in the top right corner, that changes the theme of the whole app: - +Dark Variant Theme -## Styling Angular Components +## Styling Angular Components To get started with styling components using the Ignite UI theming engine, create an scss file named of your choice that would be the base file for your global theme. We will call this file `_variables.scss`. Next, we need to import the Ignite UI and Angular Material `index` files: @@ -97,7 +98,7 @@ To get started with styling components using the Ignite UI theming engine, creat // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` ### Color Palettes @@ -116,7 +117,7 @@ $igx-light-palette: palette( ); ``` -Unlike Ignite UI palettes, Angular Material color palette maps include shades for only one color and their corresponding contrast colors. For example, we can see the `$mat-purple` palette: +Unlike Ignite UI palettes, Angular Material color palette maps include shades for only one color and their corresponding contrast colors. For example, we can see the `$mat-purple` palette: ```scss $light-primary-text: white; @@ -138,7 +139,7 @@ $mat-purple: ( ### Generating Theme Palettes -To define a theme palette, we will have to use the material `define-palette` function which generates a map of hues to colors. In our sample, we want to style Angular Material components with Ignite UI theme therefore we need to transform our `$light-material-palette` according to their structure. +To define a theme palette, we will have to use the material `define-palette` function which generates a map of hues to colors. In our sample, we want to style Angular Material components with Ignite UI theme therefore we need to transform our `$light-material-palette` according to their structure. To achieve this, we are going to create a Sass function with parameters for `$color`, `$saturations` and `$palette` that returns a map of all color variants followed by the contrast colors. The saturations we are using follow the [`Material Design color system`](https://material.io/design/color/the-color-system.html). @@ -199,7 +200,7 @@ $custom-mat-light-theme: mat.define-light-theme(( #### Dark Theme Palette -Following the previous approach, we are going to create material palettes for the dark mode. This time, we are also going to define a custom `igx-palette`: +Following the previous approach, we are going to create material palettes for the dark mode. This time, we are also going to define a custom `igx-palette`: ```scss // Custom palette @@ -234,7 +235,7 @@ In order to switch between `light` and `dark` mode, we are adding a custom `dark Ignite UI for Angular comes with predefined themes inspired by the [Material Design](https://material.io/design). To use them, first, you have to include our `core` mixin and then our built-in theme mixin - [theme]({environment:sassApiUrl}/themes#mixin-theme). We will also make use of our predefined material palettes - [$light-material-palette]({environment:sassApiUrl}/palettes#variable-light-material-palette) and [$dark-material-palette]({environment:sassApiUrl}/palettes#variable-dark-material-palette). -For the Angular Material components, we also need to include their `core` mixin and then the `all-component-themes` mixin with the aforementioned custom material themes. +For the Angular Material components, we also need to include their `core` mixin and then the `all-component-themes` mixin with the aforementioned custom material themes. ```scss // Make sure you always include the core mixin first @@ -297,7 +298,7 @@ Once we are done configuring color palettes and themes, we can make some additio #### Dark Mode -For our dark variant, we are going to apply the same CSS styles but using the `$custom-dark-palette`. In addition, we will update some of the colors of the `mat-stepper` component: +For our dark variant, we are going to apply the same CSS styles but using the `$custom-dark-palette`. In addition, we will update some of the colors of the `mat-stepper` component: ```scss :host { @@ -359,7 +360,7 @@ Then, add a CSS class to your navbar component following the pattern "bg - color ### Angular Components Typography -Ignite UI for Angular exposes four default type scales for each of its themes, which can be used inside the [`typography`]({environment:sassApiUrl}/typography#mixin-typography) mixin to define the global typography styles of an application. In our example, we are going to apply the material predifined `typeface` and `type-scale` but you can create custom ones if you wish. +Ignite UI for Angular exposes four default type scales for each of its themes, which can be used inside the [`typography`]({environment:sassApiUrl}/typography#mixin-typography) mixin to define the global typography styles of an application. In our example, we are going to apply the material predifined `typeface` and `type-scale` but you can create custom ones if you wish. ```scss :host { @@ -367,7 +368,7 @@ Ignite UI for Angular exposes four default type scales for each of its themes, w } ``` -To customize the Angular Material typography, we need to use their `define-typography-config` function. We will override their `$font-family` with the Ignite UI `$material-typeface` and their `$button` styles as follows: +To customize the Angular Material typography, we need to use their `define-typography-config` function. We will override their `$font-family` with the Ignite UI `$material-typeface` and their `$button` styles as follows: ```scss $custom-typography: mat.define-typography-config( @@ -391,29 +392,32 @@ $custom-mat-light-theme: mat.define-light-theme(( Check Angular Material [`Typography documentation`](https://material.angular.io/guide/typography) for more detailed information. ## API References +
    -* [Light Material Palette]({environment:sassApiUrl}/palettes#variable-light-material-palette) -* [Dark Material Palette]({environment:sassApiUrl}/palettes#variable-dark-material-palette) -* [Light Material Theme]({environment:sassApiUrl}/themes#mixin-light-theme) -* [Dark Material Theme]({environment:sassApiUrl}/themes#mixin-dark-theme) -* [Palette Function]({environment:sassApiUrl}/palettes#function-palette) -* [Typography Mixin]({environment:sassApiUrl}/typography#mixin-typography) +- [Light Material Palette]({environment:sassApiUrl}/palettes#variable-light-material-palette) +- [Dark Material Palette]({environment:sassApiUrl}/palettes#variable-dark-material-palette) +- [Light Material Theme]({environment:sassApiUrl}/themes#mixin-light-theme) +- [Dark Material Theme]({environment:sassApiUrl}/themes#mixin-dark-theme) +- [Palette Function]({environment:sassApiUrl}/palettes#function-palette) +- [Typography Mixin]({environment:sassApiUrl}/typography#mixin-typography) -Related topics: +Related topics: -* [Palettes](../sass/palettes.md) -* [Component Themes](../sass/component-themes.md) -* [Typography](../sass/typography.md) -* [Avatar Component](../../avatar.md) -* [Button Component](../../button.md) -* [Dialog Component](../../dialog.md) -* [Icon Component](../../icon.md) -* [Expansion Panel Component](../../expansion-panel.md) +- [Palettes](../sass/palettes.md) +- [Component Themes](../sass/component-themes.md) +- [Typography](../sass/typography.md) +- [Avatar Component](../../avatar.md) +- [Button Component](../../button.md) +- [Dialog Component](../../dialog.md) +- [Icon Component](../../icon.md) +- [Expansion Panel Component](../../expansion-panel.md) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) + +- [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/themes/misc/bootstrap-theming.md b/en/components/themes/misc/bootstrap-theming.md index e2f8ade8a5..c13f5b2bfc 100644 --- a/en/components/themes/misc/bootstrap-theming.md +++ b/en/components/themes/misc/bootstrap-theming.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Bootstrap Theming +

    The Ignite UI for Angular theming engine provides an opportunity to be used in conjunction with other component libraries such as the popular [`NG Bootstrap`](https://ng-bootstrap.github.io/) based on Bootstrap’s markup and CSS.

    @@ -16,8 +17,8 @@ The Ignite UI for Angular is a complete set of Material-based UI Widgets, Compon ## Demo - @@ -27,13 +28,13 @@ The Ignite UI for Angular is a complete set of Material-based UI Widgets, Compon ### Add NG Bootstrap -If you are using Angular CLI and have an existing Angular project, you can install NG Bootstrap with the command below: +If you are using Angular CLI and have an existing Angular project, you can install NG Bootstrap with the command below: -```cmd +```cmd ng add @ng-bootstrap/ng-bootstrap ``` -Once installed, you have to import the NG Bootstrap main module into your *app.module.ts* file: +Once installed, you have to import the NG Bootstrap main module into your _app.module.ts_ file: ```ts import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @@ -49,7 +50,7 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; At this point your applications is ready to use the NG Bootstrap components. You can find more information about using the Bootstrap library at their [`official documentation`](https://ng-bootstrap.github.io/#/getting-started). -### Add Ignite UI for Angular +### Add Ignite UI for Angular To install the Ignite UI for Angular package along with all of its dependencies, font imports, and styles references, run the following command in your project: @@ -57,7 +58,7 @@ To install the Ignite UI for Angular package along with all of its dependencies, ng add igniteui-angular ``` -Then, you can use the Ignite UI components by importing their respective modules in your *app.module.ts* file: +Then, you can use the Ignite UI components by importing their respective modules in your _app.module.ts_ file: ```ts // manually addition of the Igx Avatar component @@ -77,25 +78,25 @@ Follow our [`Getting Started`](../../general/getting-started.md) topic for a com ## Components -Let's see how our demo sample is done. It is a mixture of Ignite UI and NG Bootstrap components, styled to fit nicely in one application. The navigation in our example is created using the bootstrap [`navbar`](https://getbootstrap.com/docs/4.0/components/navbar/) together with [`igx-buttons`]({environment:angularApiUrl}/classes/igxbuttondirective.html) and [`igx-avatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html). The [`dropdown`](https://ng-bootstrap.github.io/#/components/dropdown/examples) under the Campaigns button is also taken from the bootstrap library. Below the nav, we are using the [`igx-card`]({environment:angularApiUrl}/classes/igxcardcomponent.html) component to display some statistics. Within the cards, we have placed multiple items - [`igx-avatars`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) and [`igx-icons`]({environment:angularApiUrl}/classes/igxiconcomponent.html) as well as bootstrap [`buttons`](https://getbootstrap.com/docs/4.0/components/buttons/) and [`ngb-ratings`](https://ng-bootstrap.github.io/#/components/rating/examples). +Let's see how our demo sample is done. It is a mixture of Ignite UI and NG Bootstrap components, styled to fit nicely in one application. The navigation in our example is created using the bootstrap [`navbar`](https://getbootstrap.com/docs/4.0/components/navbar/) together with [`igx-buttons`]({environment:angularApiUrl}/classes/igxbuttondirective.html) and [`igx-avatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html). The [`dropdown`](https://ng-bootstrap.github.io/#/components/dropdown/examples) under the Campaigns button is also taken from the bootstrap library. Below the nav, we are using the [`igx-card`]({environment:angularApiUrl}/classes/igxcardcomponent.html) component to display some statistics. Within the cards, we have placed multiple items - [`igx-avatars`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) and [`igx-icons`]({environment:angularApiUrl}/classes/igxiconcomponent.html) as well as bootstrap [`buttons`](https://getbootstrap.com/docs/4.0/components/buttons/) and [`ngb-ratings`](https://ng-bootstrap.github.io/#/components/rating/examples). - +Ignite UI for Angular Cards Clicking on the `More` buttons, you will see the [`igx-dialog`]({environment:angularApiUrl}/classes/igxdialogcomponent.html): - +Ignite UI for Angular Dialog Next, we have added an [`ngb-accordion`](https://ng-bootstrap.github.io/#/components/accordion/examples) showing information about credit cards. Inside its content, there is an [`igx-list`]({environment:angularApiUrl}/classes/igxlistcomponent.html) and `igx-button`. - +NG Bootstrap Accordion Finally, we inserted an Ignite UI for Angular `icon button` in the top right corner, that changes the theme of the whole app: - +Dark Variant Theme ## Styling -To get started with styling components using the Ignite UI theming engine, create an scss file named of your choice that would be the base file for your global theme. We will call this file `_variables.scss`. Next, we need to import the `index` file, where all the theme functions and component mixins live: +To get started with styling components using the Ignite UI theming engine, create an scss file named of your choice that would be the base file for your global theme. We will call this file `_variables.scss`. Next, we need to import the `index` file, where all the theme functions and component mixins live: ```scss // _variables.scss @@ -103,7 +104,7 @@ To get started with styling components using the Ignite UI theming engine, creat // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` ### Palettes @@ -207,7 +208,7 @@ At this point we have to modify the Bootstrap `$theme-colors` map with the Sass } ``` -The `light` and `dark` colors from the `$theme-colors` map, which don't have corresponding values in the Ignite UI palettes, can also be replaced with values at our discretion. For instance: +The `light` and `dark` colors from the `$theme-colors` map, which don't have corresponding values in the Ignite UI palettes, can also be replaced with values at our discretion. For instance: ```scss $custom-light: color($light-bootstrap-palette, "gray", 100); @@ -227,7 +228,7 @@ $custom-dark: color($light-bootstrap-palette, "gray", 800); #### Dark mode -For our dark variant, we are going to use our newly created `$custom-dark-palette`. We have to include it in the `dark` class styles and also modify the `$theme-colors` map with the new values. +For our dark variant, we are going to use our newly created `$custom-dark-palette`. We have to include it in the `dark` class styles and also modify the `$theme-colors` map with the new values. All components in Ignite UI for Angular use colors from the passed palette, therefore they fit nicely in the dark mode without any additional adjustments. However, we have to do some more styling changes for the ng-bootstrap components: @@ -288,7 +289,7 @@ All components in Ignite UI for Angular use colors from the passed palette, ther } ``` -Lastly, we need to import the Bootstrap library - *always import it at the end!* +Lastly, we need to import the Bootstrap library - _always import it at the end!_ ```scss :host { @@ -334,7 +335,7 @@ Then, add a CSS class to your navbar component following the pattern "bg - color ### Typography -Ignite UI for Angular exposes four default type scales for each of its themes, which can be used inside the [`typography`]({environment:sassApiUrl}/typography#mixin-typography) mixin to define the global typography styles of an application. In our example, we are going to apply the bootstrap predifined `typeface` and `type-scale` but you can create custom ones if you wish. +Ignite UI for Angular exposes four default type scales for each of its themes, which can be used inside the [`typography`]({environment:sassApiUrl}/typography#mixin-typography) mixin to define the global typography styles of an application. In our example, we are going to apply the bootstrap predefined `typeface` and `type-scale` but you can create custom ones if you wish. ```scss :host { @@ -343,29 +344,32 @@ Ignite UI for Angular exposes four default type scales for each of its themes, w ``` ## API References +
    -* [Light Bootstrap Palette]({environment:sassApiUrl}/palettes#variable-light-bootstrap-palette) -* [Dark Bootstrap Palette]({environment:sassApiUrl}/palettes#variable-dark-bootstrap-palette) -* [Light Bootstrap Theme]({environment:sassApiUrl}/themes#mixin-bootstrap-light-theme) -* [Dark Bootstrap Theme]({environment:sassApiUrl}/themes#mixin-bootstrap-dark-theme) -* [Palette Function]({environment:sassApiUrl}/palettes#function-palette) -* [Typography Mixin]({environment:sassApiUrl}/typography#mixin-typography) +- [Light Bootstrap Palette]({environment:sassApiUrl}/palettes#variable-light-bootstrap-palette) +- [Dark Bootstrap Palette]({environment:sassApiUrl}/palettes#variable-dark-bootstrap-palette) +- [Light Bootstrap Theme]({environment:sassApiUrl}/themes#mixin-bootstrap-light-theme) +- [Dark Bootstrap Theme]({environment:sassApiUrl}/themes#mixin-bootstrap-dark-theme) +- [Palette Function]({environment:sassApiUrl}/palettes#function-palette) +- [Typography Mixin]({environment:sassApiUrl}/typography#mixin-typography) -Related topics: +Related topics: -* [Palettes](../sass/palettes.md) -* [Component Themes](../sass/component-themes.md) -* [Typography](../sass/typography.md) -* [Avatar Component](../../avatar.md) -* [Button Component](../../button.md) -* [Dialog Component](../../dialog.md) -* [Icon Component](../../icon.md) -* [List Component](../../list.md) +- [Palettes](../sass/palettes.md) +- [Component Themes](../sass/component-themes.md) +- [Typography](../sass/typography.md) +- [Avatar Component](../../avatar.md) +- [Button Component](../../button.md) +- [Dialog Component](../../dialog.md) +- [Icon Component](../../icon.md) +- [List Component](../../list.md) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) + +- [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/themes/misc/printing-styles.md b/en/components/themes/misc/printing-styles.md index 3dc3d932d2..bfdc5e0755 100644 --- a/en/components/themes/misc/printing-styles.md +++ b/en/components/themes/misc/printing-styles.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Printing styles +

    The Ignite UI for Angular theming engine provides some default printing styles, which make sure that our components have at least the bare minimum to look the same on paper as they appear on the web page.

    @@ -14,8 +15,9 @@ In order to make sure that the components will be fully visible on the paper, yo By `default` the `printing styles` are incorporated in the `compiled CSS`. If you are not planning to print, we suggest you turn them off in order to reduce the size of the outputted CSS. - + You can do that in your theme `SCSS` file: + ```scss @use "igniteui-angular/theming" as *; @@ -29,12 +31,13 @@ You can do that in your theme `SCSS` file: @include theme($default-palette); ``` -Since **v13.2** we decided not to hide any component by default since we don't know what parts you want to be visible on paper, we leave that for you to decide. +Since **v13.2** we decided not to hide any component by default since we don't know what parts you want to be visible on paper, we leave that for you to decide. -In order to remove a piece or a whole component from the printed page, you can eather add the class .igx-no-print to the element/component you don't want to print, or if you don't have access to the DOM you can directly target that element tag or class and set its display: none. +In order to remove a piece or a whole component from the printed page, you can either add the class .igx-no-print to the element/component you don't want to print, or if you don't have access to the DOM you can directly target that element tag or class and set its display: none. Let's say that you can't' accesses a button in the DOM to put `.igx-no-print` on it. You can still hide that button from printing styles using SCSS. + ```scss @media print { [igxButton] { diff --git a/en/components/themes/misc/tailwind-classes.md b/en/components/themes/misc/tailwind-classes.md index 870259a982..12ca8c8424 100644 --- a/en/components/themes/misc/tailwind-classes.md +++ b/en/components/themes/misc/tailwind-classes.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, Tailwind CSS, Angular styling, Angular theming --- # Tailwind CSS Integration with Ignite UI for Angular +

    Ignite UI for Angular offers full theming customization through CSS variables and a powerful Sass engine. In this guide, you'll learn how to integrate Tailwind CSS into an Angular project and enhance it with custom utility classes provided by the `igniteui-theming` package. These classes expose Ignite UI design tokens for colors, shadows, and typography, enabling a seamless utility-first styling experience.


    @@ -18,6 +19,7 @@ _keywords: Ignite UI for Angular, Tailwind CSS, Angular styling, Angular theming > ``` ### 1. Install Tailwind + Install tailwind using the following command: ```cmd @@ -37,6 +39,7 @@ Create a `.postcssrc.json` file in the root of your project and add the `@tailwi ``` ### 3.Import Tailwind CSS + In your main stylesheet (`styles.css` or `styles.scss`), import Tailwind and the Ignite UI Tailwind theme configuration. ```css @@ -54,6 +57,7 @@ If your project uses `sass` for styling: > Ensure the import path resolves correctly from `node_modules`. ## Using Ignite UI Custom Utility Classes + The `igniteui-theming` package includes a custom Tailwind configuration that exposes Ignite UI design tokens through utility classes. These include support for: - Colors and contrast colors @@ -64,16 +68,18 @@ The `igniteui-theming` package includes a custom Tailwind configuration that exp Let’s look at how to use each. -#### Color Utility Classes +### Color Utility Classes + Use Ignite UI color tokens directly in your HTML: + ```html

    This is a title

    ``` -You can explore Tailwind’s full color system [here](https://tailwindcss.com/docs/color), and apply it using the Ignite UI-provided class names. +You can explore Tailwind's full color system in the [Tailwind color documentation](https://tailwindcss.com/docs/color), and apply it using the Ignite UI-provided class names.
    -#### Shadow utility classes +### Shadow utility classes You can add depth using any of the predefined [elevation levels](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/elevations) (from 0 to 24): @@ -81,16 +87,18 @@ You can add depth using any of the predefined [elevation levels](https://www.inf
    Elevated container
    ``` -You can find all the shadow-related utility classes provided by Tailwind [here](https://tailwindcss.com/docs/box-shadow) +You can find all the shadow-related utility classes provided by Tailwind in the [Tailwind box shadow documentation](https://tailwindcss.com/docs/box-shadow)
    -#### Typography custom utility styles +### Typography custom utility styles + To apply the font, add the `font-ig` class to a top-level element. You can also define the base font size using the `text-base` utility class. We provide custom utility classes for each typography level (e.g., h1, h2, body-1). Use them like so: ```html

    This paragraph gets the h3 styles

    ``` + Each class applies all necessary font settings, spacing, and sizing according to the [Ignite UI type scale](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/typography). >[!NOTE] @@ -103,8 +111,8 @@ In the sample below, you’ll see a 404 page built entirely with Tailwind utilit > You can see how to style each component by checking out the **Styling** section in its respective documentation topic. - @@ -112,6 +120,7 @@ In the sample below, you’ll see a 404 page built entirely with Tailwind utilit >This sample is fictional and fully custom, it’s not part of the Ignite UI component library. ## Summary + With just a few configuration steps, you can combine Tailwind’s utility-first approach with Ignite UI’s robust design system. This integration allows you to rapidly build consistent, themed UI components using well-defined tokens for color, elevation, and typography—right from your HTML. ## Additional Resources @@ -119,5 +128,5 @@ With just a few configuration steps, you can combine Tailwind’s utility-first
    Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/palettes.md b/en/components/themes/palettes.md index 6b4b68a936..d53a48f3b9 100644 --- a/en/components/themes/palettes.md +++ b/en/components/themes/palettes.md @@ -152,7 +152,8 @@ Palettes in Ignite UI for Angular dictate whether a theme is going to be light o To make this a bit clearer, below is a list of some `gray` and `surface` color variants in both a light and a dark theme; -*Material Light:* +_Material Light:_ + ```css :root { //... @@ -165,7 +166,8 @@ To make this a bit clearer, below is a list of some `gray` and `surface` color v } ``` -*Material Dark:* +_Material Dark:_ + ```css :root { //... @@ -178,12 +180,12 @@ To make this a bit clearer, below is a list of some `gray` and `surface` color v } ``` -Be mindful when changing the `gray` and `surface` color variants as they are used in most components and have a big impact on their overall look and feel. +Be mindful when changing the `gray` and `surface` color variants as they are used in most components and have a big impact on their overall look and feel. ## Other Colors So far we've covered the `primary`, `secondary`, `gray`, and `surface` color variants and how you can override them. There are four more colors - `info`, `success`, `warn`, and `error`. They are usually used to set the colors in different states. For example, the `igx-input-group` component uses these colors in its input validation states. -They can be changed as the other color variants, all we need to do it to set the `500` variant and all of the other varints will be generated. +They can be changed as the other color variants, all we need to do it to set the `500` variant and all of the other variants will be generated. ```css :root { @@ -202,5 +204,5 @@ Related topics: Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/roundness.md b/en/components/themes/roundness.md index dc244609c7..89712aeaef 100644 --- a/en/components/themes/roundness.md +++ b/en/components/themes/roundness.md @@ -5,9 +5,11 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Roundness + Ignite UI for Angular allows you to customize the shape of components by adjusting their roundness using a value between 0 and 1. ## Overview + Many Ignite UI components have predefined minimum and maximum border-radius values, which can be adjusted using the `--ig-radius-factor` CSS variable. When you set `--ig-radius-factor` to 0, the component uses its minimum border-radius and will appear more block-like with sharp corners. When set to 1, the component uses its maximum predefined border-radius and will appear rounded. @@ -46,8 +48,8 @@ igx-chip { You can see the difference between the minimum and maximum border-radius values in the example below: - @@ -59,5 +61,5 @@ Related topics: Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/sass/animations.md b/en/components/themes/sass/animations.md index 1441e1da72..189a186554 100644 --- a/en/components/themes/sass/animations.md +++ b/en/components/themes/sass/animations.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Animations +

    Ignite UI for Angular includes over 100+ pre-built animations specially designed for a better user experience.

    @@ -46,6 +47,7 @@ Here's an example of creating a new animation mixin that can be used with our `a } } ``` +
    ### Animation Mixin @@ -61,6 +63,7 @@ The [animation]({environment:sassApiUrl}/animations#mixin-animation) mixin serve @include animation('fade-in-top' 3s $ease-out-quad infinite); } ``` +
    ### Timing Functions @@ -126,20 +129,22 @@ animations: [ ### Timing Functions Ignite UI for Angular includes a set of timing functions that can be used to ease in or out an animation. There are three main timing function groups - [EaseIn]({environment:angularApiUrl}/enums/easein.html), [EaseOut]({environment:angularApiUrl}/enums/easeout.html), and [EaseInOut]({environment:angularApiUrl}/enums/easeinout.html), each containing the following timings: - - quad - - cubic - - quart - - quint - - sine - - expo - - circ - - back + +- quad +- cubic +- quart +- quint +- sine +- expo +- circ +- back To use a specific timing function, import it first: -``` typescript +``` typescript import { EaseOut } from "igniteui-angular/animations/easings"; ``` + and then use it as value for the easing param in any animation: ``` typescript @@ -151,16 +156,18 @@ useAnimation(fadeIn, { ``` ## API References +
    -* [Animations]({environment:sassApiUrl}/animations) -* [AnimationSettings]({environment:angularApiUrl}/interfaces/animationsettings.html) -* [IAnimationParams]({environment:angularApiUrl}/interfaces/ianimationparams.html) +- [Animations]({environment:sassApiUrl}/animations) +- [AnimationSettings]({environment:angularApiUrl}/interfaces/animationsettings.html) +- [IAnimationParams]({environment:angularApiUrl}/interfaces/ianimationparams.html) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/sass/configuration.md b/en/components/themes/sass/configuration.md index 9e8b771242..d2acb1f416 100644 --- a/en/components/themes/sass/configuration.md +++ b/en/components/themes/sass/configuration.md @@ -36,21 +36,24 @@ $my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $
    ## Additional Resources + Learn the concepts: -* [Palettes](./palettes.md) -* [Typography](./typography.md) -* [Elevations](./elevations.md) -* [Schemas](./schemas.md) -* [Animations](./animations.md) +- [Palettes](./palettes.md) +- [Typography](./typography.md) +- [Elevations](./elevations.md) +- [Schemas](./schemas.md) +- [Animations](./animations.md) Learn how to create application-wide themes: -* [Application Themes](./global-themes.md) + +- [Application Themes](./global-themes.md) Learn how to create component-specific themes: -* [Component Themes](./component-themes.md) + +- [Component Themes](./component-themes.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/sass/elevations.md b/en/components/themes/sass/elevations.md index b5c31b9e25..f8c018fe1b 100644 --- a/en/components/themes/sass/elevations.md +++ b/en/components/themes/sass/elevations.md @@ -5,13 +5,16 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Elevations +

    Elevations are used to establish and maintain functional boundaries between Document Object Model trees to enable better functional encapsulation. You can create sets of elevations using our Sass theming library.

    ## Overview -Elevations in Ignite UI for Angular are declared as a map of 25 elements. Each element is a key-value pair where the key is the elevation level name (0..24) and the value is a list of 3 `box-shadow` declarations. We allow you to generate new sets of elevations where you can define the color for the shadows. Additionally, we expose functions for retrieving a specific elevation level from the elevations map. We expose a global variable `$elevations` that is used across components by default. If you've not read the CSS variables [documentation](../elevations.md) related to Elevations, we suggest you do that first before reading on. + +Elevations in Ignite UI for Angular are declared as a map of 25 elements. Each element is a key-value pair where the key is the elevation level name (0..24) and the value is a list of 3 `box-shadow` declarations. We allow you to generate new sets of elevations where you can define the color for the shadows. Additionally, we expose functions for retrieving a specific elevation level from the elevations map. We expose a global variable `$elevations` that is used across components by default. If you've not read the CSS variables [documentation](../elevations.md) related to Elevations, we suggest you do that first before reading on. ## Usage + The following section demonstrates how to create and retrieve custom elevations. ### Configuring Elevations @@ -66,7 +69,7 @@ In addition to this, you can tell the theme to ignore/not use elevations complet ); ``` -Since the `elevation` function returns a list of box shadows, you can use the return value of that function to modify only certain elevations in your component themes. +Since the `elevation` function returns a list of box shadows, you can use the return value of that function to modify only certain elevations in your component themes. ```scss $card-theme: card-theme( @@ -77,6 +80,7 @@ $card-theme: card-theme( ``` You can also pass simple box shadows without taking advantage of the `elevation` function: + ```scss $card-theme: card-theme( $resting-shadow: 0 10px 10px 10px #666 @@ -86,9 +90,11 @@ $card-theme: card-theme( @include css-vars($card-theme); } ``` +
    ## Custom Elevations + It is possible to create an elevations map that doesn't adhere to the [Material Design Guidelines](https://material.io/design/environment/elevation.html) as generated by the `elevations` function. Make sure your custom elevation maps contain at least 25 elevation levels. Here's the elevations map signature our themes expect to build correctly: ```scss @@ -102,18 +108,21 @@ $elevations: ( ``` ## Elevation Schema Declarations + The elevation levels are also used in theme schema declarations. More on that in the [Schema](schemas.md) section of the documentation.
    ## API References -* [Creating Elevations]({environment:sassApiUrl}/elevations#mixin-elevations) -* [Retrieving Elevations]({environment:sassApiUrl}/elevations#function-elevation) +- [Creating Elevations]({environment:sassApiUrl}/elevations#mixin-elevations) +- [Retrieving Elevations]({environment:sassApiUrl}/elevations#function-elevation) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) + +- [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/themes/sass/global-themes.md b/en/components/themes/sass/global-themes.md index b36bf25851..3017f60d1b 100644 --- a/en/components/themes/sass/global-themes.md +++ b/en/components/themes/sass/global-themes.md @@ -5,16 +5,19 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Global Themes +
    The global theme allows you to quickly generate a theme that uses your custom color palette, schema, and elevations. The color palette, schema, and elevations will be propagated to all components that don't have custom themes created for them.
    ## Overview + If you've included the _`igniteui-angular.css`_ file in your application project, now is a good time to remove it. We are going to use our own _`my-app-theme.scss`_ file to generate a global theme for all components in our application. **Ignite UI for Angular** uses a global theme by default to theme the entire suite of components. You can, however, create themes scoped to components you have in your app, depending on your use case. For now, we will be including all of our themes in a single file. -To generate a global theme we're going to be including two mixins `core` and `theme`. Both of those mixins accept a few arguments: +To generate a global theme we're going to be including two mixins `core` and `theme`. Both of those mixins accept a few arguments: ### Core mixin +
    | Name | Type | Default | Description | @@ -24,6 +27,7 @@ To generate a global theme we're going to be including two mixins `core` and `th ### Theme mixins +
    | Name | Type | Default | Description | @@ -61,12 +65,13 @@ $my-color-palette: palette( @include theme($my-color-palette); ``` -Let's explain what the `core` and `theme` mixins do. The `core` mixin takes care of some configurations, like adding enhanced accessibility(e.g. colors suitable for color blind users) and printing styles for all components. The `theme` mixin includes each individual component style (bar the ones listed as excluded) and configures the palette, schema, elevations, and roundness that is not listed in the `$exclude` list of components. +Let's explain what the `core` and `theme` mixins do. The `core` mixin takes care of some configurations, like adding enhanced accessibility(e.g. colors suitable for color blind users) and printing styles for all components. The `theme` mixin includes each individual component style (bar the ones listed as excluded) and configures the palette, schema, elevations, and roundness that is not listed in the `$exclude` list of components. > [!IMPORTANT] > Including `core` before `theme` is essential. The `core` mixins provide all base definitions needed for the `theme` mixin to work correctly. ## Excluding Components +
    The `theme` mixin allows you to provide a list of component names to be excluded from the global theme styles. For instance, if you want to completely remove all styles we include for the `igx-avatar` and `igx-badge` to reduce the amount of produced CSS or to supply your own custom styles, you can do so by passing the list of components like so: @@ -98,11 +103,12 @@ $allowed: (igx-avatar, igx-badge); ## Light and Dark Themes -We also provide *__light__* and *__dark__* versions for our four themes - Material, Fluent, Indigo, Bootstrap. +We also provide _**light**_ and _**dark**_ versions for our four themes - Material, Fluent, Indigo, Bootstrap. To use any of the versions, you would simply need to pass it to our [theme]({environment:sassApiUrl}/themes#mixin-theme) mixin: -*__Light__* +_**Light**_ + ```scss @include core(); @include typography( @@ -114,7 +120,9 @@ To use any of the versions, you would simply need to pass it to our [theme]({env $palette: $light-material-palette, ); ``` -*__Dark__* + +***Dark**_ + ```scss @include core(); @include typography( @@ -126,7 +134,9 @@ To use any of the versions, you would simply need to pass it to our [theme]({env $palette: $dark-material-palette, ); ``` + ### Available Themes + Ignite UI for Angular gives you the option to pick from a set of predefined themes. The table below shows all the built-in themes that you can use right away. @@ -137,19 +147,20 @@ The table below shows all the built-in themes that you can use right away. | [**Fluent Light**](presets/fluent.md) | `$light-fluent-schema` | $light-fluent-palette
    $light-fluent-excel-palette
    $light-fluent-word-palette | | [**Fluent Dark**](presets/fluent.md#fluent-dark-theme) | `$dark-fluent-schema` | $dark-fluent-palette
    $dark-fluent-excel-palette
    $dark-fluent-word-palette | | [**Bootstrap Light**](presets/bootstrap.md) | `$light-bootstrap-schema` | $light-bootstrap-palette | -| [**Bootstrap Dark**](presets/bootstrap.md#bootstrap-dark-theme) | `$dark-bootstrap-schema ` | $dark-bootstrap-palette | +| [**Bootstrap Dark**](presets/bootstrap.md#bootstrap-dark-theme) | `$dark-bootstrap-schema` | $dark-bootstrap-palette | | [**Indigo Light**](presets/indigo.md) | `$light-indigo-schema` | $light-indigo-palette | -| [**Indigo Dark**](presets/indigo.md#indigo-dark-theme) | `$dark-indigo-schema ` | $dark-indigo-palette | +| [**Indigo Dark**](presets/indigo.md#indigo-dark-theme) | `$dark-indigo-schema` | $dark-indigo-palette | ## Additional Resources +
    Learn how to create individual component themes: -* [Component Themes](component-themes.md) +- [Component Themes](component-themes.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/sass/index.md b/en/components/themes/sass/index.md index 1e858d822d..ded9384864 100644 --- a/en/components/themes/sass/index.md +++ b/en/components/themes/sass/index.md @@ -10,6 +10,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
    ## Overview + Since **IgniteUI for Angular** bases its component designs on the [Material Design Principles](https://material.io/guidelines/material-design/introduction.html), we try to get as close as possible to colors, sizes, typography, and overall look and feel of our components to those created by Google for our default theme. The Material Design system keeps changing and doesn't stray from implementing major changes, which ultimately affects how we write and modify the styles of the components we ship. With support for 3 additional themes - Microsoft Fluent, Bootstrap, and our own Indigo Design systems, adapting the Material Design system is not a straight-forward task. It required us to build a very modular, configurable, and yet maintainable base from which vastly different component styles can be generated. We also have to support old and new browsers alike, so Sass has been a tremendous help in this endeavor, giving us tools that allowed us to create a visceral system of variables, functions and mixins. Our approach to theming is based around several concepts - Theme Schemas, Palettes, Typography, Roundness, Elevations, and Animations. These concepts are then mixed to produce the final theme. Each concept is further broken down to allow for a more granular approach to styling. @@ -22,45 +23,55 @@ We will explain every single concept in detail and the related APIs so that you > Although the [**Sass**](https://sass-lang.com) theming library is powerful, most people will only need to modify a few CSS variables to customize the default theme. We encourage you to read through the CSS variables documentation first. You should only need to use Sass if you wanted to modify the produced theme on a deeper level. A good example would be when you need to create several different reusable theme variants for the same component, or to tree-shake the produced CSS to only include styles for the components you use in your app. ## Palettes + The first concept we need to understand is palettes. As in any visual tool, colors are the main differentiating factor between one application and another. The Material Design Guidelines prescribe predefined palettes of colors that range in hue, lightness, and saturation for a given base color. There's a good reason for that. They really want to ensure good color matching and contrast between the background colors and the foreground text colors. This is great but limiting at the same time. If you wanted to have your own custom palette based on the Material guidelines that matches your branding, you would probably be out of luck. We recognize this is a problem, so we invented an algorithm that generates Material-like palettes from base colors you provide. We also generate contrast text colors for each hue in the palette. ## Schemas + The second important concept revolves around theme schemas. Theme schemas are like recipes for individual component themes. They give individual component themes information about what palette colors they should use and what the overall roundness and shadows should be. For instance, a component scheme tells a component theme that the background color of an element should be the `500` variant from the `primary` color, without caring what palette the user passes to the component theme. ## Typography + Typography is a separate module in our Sass theming library and is decoupled from the individual component themes. Although we have a default typeface of choice, we really want to give you the power to style your application in every single way. Typography is such an important part of that. We provide a method for changing the font family, the sizes and weights for headings, subheadings, buttons, body text, etc. in your app. ## Roundness + The Sass theming system defines minimum and maximum roundness for each component. You may be more familiar with the term `border-radius` in the context of CSS. Roundness is similar in that it uses `border-radius` to style the elements of the component, however, roundness in the context of the theming system is a number between 0 and 1. A component that has a roundness of 0 uses the minimum border-radius as defined by the component theme - it could be 0 or a non-zero value. Likewise, setting the roundness to 1 will set the border-radius to the maximum allowed radius for the component. While the minimum and maximum border-radius are defined in the component theme itself, the base roundness value is set in the component schema. ## Elevations + Elevations are the shadows being set for different parts of each component theme. They are based on 25(0-24) levels as prescribed by the Material Design guidelines. Having a finite number of shadows allows us to have a consistent way of defining depth hierarchy in our applications. In Sass they are defined as a map of 24 elevation levels with `box-shadows` as values and later passed to a component theme. Component schemas will provide generic information to the theme about the elevation levels specific elements should use. ## Animations + Some components use keyframe transitions and animations to communicate changes of state in a clear way. We include a huge library of keyframe animations and timing functions that can be imported and used throughout your application. They are treeshaken so including the same animation mixin twice produces only a single CSS declaration in your output stylesheet. ## Themes + Finally, we have component themes. Palettes, Schemas, Elevations, Roundness, and Animations wouldn't do much good on their own if they weren't used by a theme. We provide themes for individual component, and a global one, that styles the entire application and every component in it. You simply pass the palette and schema to the global theme, we take care of the rest. You can, of course, style each component individually to your liking by creating custom schemas, elevations, and by passing different values for roundness and colors to the component theme mixins. ## Additional Resources +
    Learn the concepts: -* [Configuration](./configuration.md) -* [Palettes](./palettes.md) -* [Typography](./typography.md) -* [Elevations](./elevations.md) -* [Schemas](./schemas.md) -* [Animations](./animations.md) +- [Configuration](./configuration.md) +- [Palettes](./palettes.md) +- [Typography](./typography.md) +- [Elevations](./elevations.md) +- [Schemas](./schemas.md) +- [Animations](./animations.md) Learn how to create application-wide themes: -* [Application Themes](./global-themes.md) + +- [Application Themes](./global-themes.md) Learn how to create component-specific themes: -* [Component Themes](./component-themes.md) + +- [Component Themes](./component-themes.md) Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/sass/palettes.md b/en/components/themes/sass/palettes.md index a8abe2e014..f1d58061db 100644 --- a/en/components/themes/sass/palettes.md +++ b/en/components/themes/sass/palettes.md @@ -5,11 +5,13 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Palettes +

    The Ignite UI for Angular theming engine provides several powerful functions and mixins for generating and retrieving colors.

    ## Overview -Palettes in the context of Ignite UI for Angular are declared as [Sass Maps](https://sass-lang.com/documentation/values/maps) with the keys of those map being the palette colors (`primary`, `secondary`, `surface`, etc.). Each color is in turn a map itself and has all color variants listed as keys. The values assigned to those color variants are the actual colors used throughout all component themes. All palette maps are generated programatically by the palette function. The function accepts arguments for `primary`, `secondary`, `surface`, `gray`, `info`, `success`, `warn`, and `error` colors. The `primary` color is usually your brand color. It is mostly used to style static elements, such as the `igx-navbar` component. The `secondary` color is the one used on elements that are actionable, such as buttons, switches, sliders, etc. + +Palettes in the context of Ignite UI for Angular are declared as [Sass Maps](https://sass-lang.com/documentation/values/maps) with the keys of those map being the palette colors (`primary`, `secondary`, `surface`, etc.). Each color is in turn a map itself and has all color variants listed as keys. The values assigned to those color variants are the actual colors used throughout all component themes. All palette maps are generated programmatically by the palette function. The function accepts arguments for `primary`, `secondary`, `surface`, `gray`, `info`, `success`, `warn`, and `error` colors. The `primary` color is usually your brand color. It is mostly used to style static elements, such as the `igx-navbar` component. The `secondary` color is the one used on elements that are actionable, such as buttons, switches, sliders, etc. The `surface` color is the one used for background color of some components, such as cards, menus, date/time pickers, banners sheets, etc.. The only required arguments are the ones for `primary`, `secondary` and `surface` colors. We default the colors for `surface`, `gray`, `info`, `success`, `warn`, and `error` to a predefined set of our choosing. To get started with your first color palette, create an _scss_ file that would be the base file for your global theme. I will call mine _`_variables.scss`_. @@ -147,6 +149,7 @@ $handmade-palette: (
    ## Predefined Palettes + We provide predefined light and dark palettes, which you can use along with our schemas to create themes for your components: - Light Palettes @@ -261,6 +264,7 @@ For instance, if you want to generate CSS classes that apply background color to $prefix: 'bg' ); ``` + The above code will generate CSS classes for each color variant in the palette. For instance, the `500` color variant of the `primary` palette will be given the following class `.bg-primary-500`; ```html @@ -271,7 +275,7 @@ The above code will generate CSS classes for each color variant in the palette. ## CSS Variables -When reading about the color palette in the [CSS Variables](../palettes.md) section of the documentation, you would've noticed that all palette colors are included as CSS variables. We do this internally every time we generate a theme using the `theme` mixin. The `theme` calls another mixin in its body - `palette`. It takes a palette and converts the colors in it into CSS variables. +When reading about the color palette in the [CSS Variables](../palettes.md) section of the documentation, you would've noticed that all palette colors are included as CSS variables. We do this internally every time we generate a theme using the `theme` mixin. The `theme` calls another mixin in its body - `palette`. It takes a palette and converts the colors in it into CSS variables. You use this mixin when you want your custom palette colors to be included as CSS variables. @@ -288,15 +292,18 @@ $my-palette: palette( ``` ## API Reference -* [Palettes]({environment:sassApiUrl}/palettes#function-palette) -* [Getting Palette Colors]({environment:sassApiUrl}/palettes#function-color) -* [Getting Contrast Colors]({environment:sassApiUrl}/palettes#function-contrast-color) -* [Generating Color Classes]({environment:sassApiUrl}/utilities#mixin-color-classes) -* [Schemas](./schemas.md) + +- [Palettes]({environment:sassApiUrl}/palettes#function-palette) +- [Getting Palette Colors]({environment:sassApiUrl}/palettes#function-color) +- [Getting Contrast Colors]({environment:sassApiUrl}/palettes#function-contrast-color) +- [Generating Color Classes]({environment:sassApiUrl}/utilities#mixin-color-classes) +- [Schemas](./schemas.md) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) + +- [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/themes/sass/presets/bootstrap.md b/en/components/themes/sass/presets/bootstrap.md index 98895fd3d5..9d519c9c96 100644 --- a/en/components/themes/sass/presets/bootstrap.md +++ b/en/components/themes/sass/presets/bootstrap.md @@ -44,4 +44,4 @@ In order to switch from `Material` to `Bootstrap`, you can use the [theme]({envi ## API Overview -* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) diff --git a/en/components/themes/sass/presets/fluent.md b/en/components/themes/sass/presets/fluent.md index 7313cd6f98..de6d2d519e 100644 --- a/en/components/themes/sass/presets/fluent.md +++ b/en/components/themes/sass/presets/fluent.md @@ -47,4 +47,4 @@ We also support Word and Excel palettes. To use them just pass one of the two _* ## API Overview -* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) diff --git a/en/components/themes/sass/presets/indigo.md b/en/components/themes/sass/presets/indigo.md index 6562163fdf..133a779840 100644 --- a/en/components/themes/sass/presets/indigo.md +++ b/en/components/themes/sass/presets/indigo.md @@ -45,4 +45,4 @@ In order to switch from `Material` to `Indigo`, you can use the [theme]({environ ## API Overview -* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) diff --git a/en/components/themes/sass/presets/material.md b/en/components/themes/sass/presets/material.md index 7786ffbcff..f3752c83ca 100644 --- a/en/components/themes/sass/presets/material.md +++ b/en/components/themes/sass/presets/material.md @@ -68,4 +68,4 @@ Since all individual components use the `$light-material-palette` by default, if ## API Overview -* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) diff --git a/en/components/themes/sass/roundness.md b/en/components/themes/sass/roundness.md index 1abb31e4c1..c121e11390 100644 --- a/en/components/themes/sass/roundness.md +++ b/en/components/themes/sass/roundness.md @@ -5,10 +5,12 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Roundness +

    Ignite UI for Angular allows you to change the shape of components by setting their roundness to a value between 0 and 1.

    ## Overview + Border radius is defined in the [theme schema](https://github.com/IgniteUI/igniteui-theming/blob/18f878033898e1b6a3bb0ed28993e9a4037d1a80/sass/themes/schemas/components/light/_toast.scss#L44) of the component (see the example below). The border radius for any component defined in this manner can then be controlled via the `$roundness` parameter of the [theme]({environment:sassApiUrl}/themes#mixin-theme) mixin or a single CSS variable called `--ig-radius-factor`. ```scss @@ -38,6 +40,7 @@ As you can see from the example, the component schema for the [Toast]({environme ``` ### How to use? + Let's see how we can change the default values for the toast from the example above. If you want the toast to still be affected by the `$roundness` or the `--ig-radius-factor` variable in the resulting theme, use the `border-radius` function provided by the Ignite UI for Angular package. @@ -59,18 +62,20 @@ igx-toast { } ``` -We can also use the `border-radius` mixin to directly assign the border-radius property to elements. +We can also use the `border-radius` mixin to directly assign the border-radius property to elements. ```scss button { @include border-radius(rem(4px), rem(4px), rem(16px)); } ``` + Now the `border-radius` on the button will be affected by the `$roundness` and `--ig-radius-factor` variables.
    ### Baseline border radius values + The table below shows an excerpt of some of the component border radius values as defined in the Material schema. | **Component** | **Min/Max Radius** | **Default Radius** | @@ -102,5 +107,5 @@ Please refer to the [Schema]({environment:sassApiUrl}/schemas) documentation for Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/sass/schemas.md b/en/components/themes/sass/schemas.md index e4d7358e2e..32caa5c9a8 100644 --- a/en/components/themes/sass/schemas.md +++ b/en/components/themes/sass/schemas.md @@ -5,11 +5,13 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Schemas +

    Schemas are a simple, declarative way to list all properties a component theme uses.

    ## Overview + Schemas are like recipes. They are simple Sass maps, similar to JSON that allow us to define all properties a theme might use. Those properties can be colors, elevation levels, roundness, etc. Anything a theme consumes can be described as a `schema`, then passed to the global or component theme. A component schema can extend an existing component schema and override its properties. **Schemas should be used when you want to change the default theme properties of a component in a way that will not result in duplicating CSS style rules or CSS variables**. @@ -53,13 +55,14 @@ $light-avatar: ( As you can see from the example above, the component schema defines the properties the [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) consumes. It just prescribes the colors the avatar should use, without referencing a concrete color palette map. -Let's take the `background` property for example. It tells the avatar theme what the default background should be. +Let's take the `background` property for example. It tells the avatar theme what the default background should be. -*The `background` can be assigned any value, that is, a value that can be assigned to the CSS `background-color` property.* You can also assign a map to `background`, like in the sample above. When you assign a map to the `background` property, the map should contain functions as the key names (e.g. `color`), and arguments for the functions as values for said keys. We do this to be able to resolve the values later on, when the avatar theme is being built. See, because we don't know the palette a user might pass to the avatar theme, we should be able to resolve it later on, only when the palette is known. +_The `background` can be assigned any value, that is, a value that can be assigned to the CSS `background-color` property._ You can also assign a map to `background`, like in the sample above. When you assign a map to the `background` property, the map should contain functions as the key names (e.g. `color`), and arguments for the functions as values for said keys. We do this to be able to resolve the values later on, when the avatar theme is being built. See, because we don't know the palette a user might pass to the avatar theme, we should be able to resolve it later on, only when the palette is known.
    ## Extending Schemas + As you saw from the example above. Schemas are simple maps and as such can be extended by overriding some of their properties. You might want to _extend_ the material avatar schema by only changing its `background` property, without having to copy all other properties manually. This is easily done using the `extend` function we provide. ```scss @@ -71,23 +74,25 @@ $my-avatar-schema: extend($light-avatar, ( Now the value of `$my-avatar-schema` will contain all properties of `$_light-avatar`, but the value for `background` will have be `limegreen`. ## Predefined Schemas + We provide predefined light and dark schemas that we use in our theme presets: - Light Schemas - - `$light-material-schema` - - `$light-fluent-schema` - - `$light-bootstrap-schema` - - `$light-indigo-schema` + - `$light-material-schema` + - `$light-fluent-schema` + - `$light-bootstrap-schema` + - `$light-indigo-schema` - Dark Schemas - - `$dark-material-schema` - - `$dark-fluent-schema` - - `$dark-bootstrap-schema` - - `$dark-indigo-schema` + - `$dark-material-schema` + - `$dark-fluent-schema` + - `$dark-bootstrap-schema` + - `$dark-indigo-schema` We use the light and dark schemas accordingly with the light and dark palettes to create the component themes. For example, using the `$light-material-schema` along with the `$light-material-palette` will help us create all of the light material component themes. And vice versa - using the `$dark-material-schema` along with the `$dark-material-palette` will give us the dark material component themes. ## Consuming Schemas -Until now we have shown what a component schema is and how you can create one, but we have not talked about how you can use schemas in your Sass project. + +Until now we have shown what a component schema is and how you can create one, but we have not talked about how you can use schemas in your Sass project. Individual component schemas are bundled up in a global schema map for all components we have. So the `$light-avatar` schema is stored in the `$material-avatar` variable, which is then used in the global `$light-material-schema`. The `$light-material-schema` map contains all component names as keys, and their corresponding schemas as values. The `$light-material-schema` looks something like this: @@ -154,14 +159,17 @@ Although schemas require a deeper knowledge of our theming library compared to t We use schemas internally to create variations that result in different pre-bundled themes for Material, Bootstrap, Fluent, and Indigo. ## API Overview -* [Light Components Schema]({environment:sassApiUrl}/schemas#variable-light-material-schema) -* [Dark Components Schema]({environment:sassApiUrl}/schemas#variable-dark-material-schema) -* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) -* [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) + +- [Light Components Schema]({environment:sassApiUrl}/schemas#variable-light-material-schema) +- [Dark Components Schema]({environment:sassApiUrl}/schemas#variable-dark-material-schema) +- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +- [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) + +- [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/themes/sass/typography.md b/en/components/themes/sass/typography.md index eab3fd7dcf..0299c8582a 100644 --- a/en/components/themes/sass/typography.md +++ b/en/components/themes/sass/typography.md @@ -263,5 +263,5 @@ Here's a list of all CSS classes we provide by default:
    Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/spacing.md b/en/components/themes/spacing.md index d7f0800ca4..3b97af12c5 100644 --- a/en/components/themes/spacing.md +++ b/en/components/themes/spacing.md @@ -17,6 +17,7 @@ Ignite UI for Angular provides a sophisticated spacing system that scales dynami ## The Relationship Between Sizing and Spacing The spacing system in Ignite UI is closely tied to component sizing. Components can have three different sizes: + - **Small** - Compact spacing for dense layouts - **Medium** - Default balanced spacing. - **Large** - Comfortable spacing for touch-friendly interfaces @@ -121,18 +122,21 @@ The spacing system uses multipliers to scale base values: This cascading approach ensures consistent spacing relationships while giving you fine-grained control through CSS custom properties alone. ## API References -* [Utilities - Pad]({environment:sassApiUrl}/utilities#function-pad) -* [Utilities - Pad Inline]({environment:sassApiUrl}/utilities#function-pad-inline) -* [Utilities - Pad Block]({environment:sassApiUrl}/utilities#function-pad-block) + +- [Utilities - Pad]({environment:sassApiUrl}/utilities#function-pad) +- [Utilities - Pad Inline]({environment:sassApiUrl}/utilities#function-pad-inline) +- [Utilities - Pad Block]({environment:sassApiUrl}/utilities#function-pad-block) ### Sizing Functions and Mixins -* [Themes - Sizable Mixin]({environment:sassApiUrl}/themes#mixin-sizable) -* [Themes - Sizable Function]({environment:sassApiUrl}/themes#function-sizable) + +- [Themes - Sizable Mixin]({environment:sassApiUrl}/themes#mixin-sizable) +- [Themes - Sizable Function]({environment:sassApiUrl}/themes#function-sizable) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) +- [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/themes/typography.md b/en/components/themes/typography.md index df8feeebc3..facb0a6e42 100644 --- a/en/components/themes/typography.md +++ b/en/components/themes/typography.md @@ -12,6 +12,7 @@ The typography in Ignite UI for Angular is modeled after the [Material Type Syst

    ## Overview + The type system is a **_type scale_** consisting of **_13 different category type styles_** used across most components. All of the scale categories are completely reusable and adjustable by the end user. Here's a list of all 13 category styles as defined for the Material Theme in Ignite UI for Angular: @@ -34,9 +35,10 @@ Here's a list of all 13 category styles as defined for the Material Theme in Ign
    -Each theme defines its own type scale. This means each one of the themes we ship - Material, Fluent, Boostrap, and Indigo will have its own type scale. They all share the same _scale categories_, but can have different font family, weight, size, text transform, letter spacing, and line height. +Each theme defines its own type scale. This means each one of the themes we ship - Material, Fluent, Bootstrap, and Indigo will have its own type scale. They all share the same _scale categories_, but can have different font family, weight, size, text transform, letter spacing, and line height. ## Usage +> > [!IMPORTANT] > By default we don't apply any typography styles. To use our typography in your application you have to set the `ig-typography` CSS class on a top-level element. All of its children will then use our typography styles. @@ -71,7 +73,7 @@ To change the font family in all components, all you have to do is overwrite the ## Type Styles -The type styles are used internally by most of the components in Ignite UI for Angular. For instance, the documentation says the button component uses the button type style. This means that we can modify the typography of the button component by ovewriting the included `--ig-button-*` CSS variables. +The type styles are used internally by most of the components in Ignite UI for Angular. For instance, the documentation says the button component uses the button type style. This means that we can modify the typography of the button component by overwriting the included `--ig-button-*` CSS variables. Let's say we want to change the text of the button in the Material Theme to always be lowercase. diff --git a/en/components/tile-manager.md b/en/components/tile-manager.md index 50b0710fda..7ce12d6656 100644 --- a/en/components/tile-manager.md +++ b/en/components/tile-manager.md @@ -9,7 +9,7 @@ The Tile Manager component enables the display of content in individual tiles. I ## Angular Tile Manager Example -The following Ignite UI for Angular Tile Manager Example shows the component in action. +The following Ignite UI for Angular Tile Manager Example shows the component in action. ``` -For a complete introduction to the Ignite UI for Angular, read the [*Getting Started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_Getting Started_](general/getting-started.md) topic. For further information on the usage of the Tile Manager component, you can check out [this topic]({environment:infragisticsBaseUrl}/products/ignite-ui-web-components/web-components/components/layouts/tile-manager.html). diff --git a/en/components/time-picker.md b/en/components/time-picker.md index 0fdba1894c..8b4d1a7239 100644 --- a/en/components/time-picker.md +++ b/en/components/time-picker.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Time Picker Overview +

    The time picker component allows users to input or select time portions of a `Date` object from a dropdown or dialog with spinners, which is then mirrored in the input field. In dropdown mode, which is the default one, the input field is editable and users can also edit selected time.

    @@ -12,6 +13,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI

    The time picker component has different built-in templates for displaying a clock button, as well as features like validation, custom time formatting, and more.

    ## Angular Time Picker Example + In general, users can enter a preferred time either through text input or by choosing a time value from an Angular Time Picker dropdown. The basic Angular Time Picker example below shows how users can easily enter the value with the help of the dropdown or by using the keyboard.
    • ### Binding + The Time Picker in Angular can be bound to either a Date object or time-only string value in `ISO 8601` format by setting the [`value`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#value) property or `ngModel`. First create a time string in `ISO 8601` format: @@ -114,6 +117,7 @@ or set [`value`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html ``` To use it in a reactive form you need to set a `formControlName` on the picker + ```html @@ -133,6 +137,7 @@ export class SampleFormComponent { ``` ### Projecting components + The time picker component allows projecting child components - the same as in the [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html): [`igxLabel`](label-input.md), [`IgxHint`](input-group.md#hints), [`igxPrefix`](input-group.md#prefix--suffix), [`igxSuffix`](input-group.md#prefix--suffix), excluding [`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html). More detailed information about this can be found in the [Label & Input](label-input.md) topic. In the default configuration, a dropdown/dialog toggle icon is shown as a prefix. It can be changed or redefined using the [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) component. It can be decorated with either [`igxPrefix`](input-group.md#prefix--suffix) or [`igxSuffix`](input-group.md#prefix--suffix), which will define its position - at the start of the input or at the end respectively. @@ -148,6 +153,7 @@ In the following example we have added a custom label and hint and changed the d {{date.toLocaleString()}} ``` + ```typescript public date: Date = new Date(); ``` @@ -160,6 +166,7 @@ And here's our templated Ignite UI for Angular Time Picker:     ## Custom action buttons + The [`IgxTimePickerComponent`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) supports action button customization. To achieve that, wrap the buttons in `ng-template` marked with the [`igxPickerActions`]({environment:angularApiUrl}/classes/igxpickeractionsdirective.html) directive selector. In the example below, custom action buttons are added for 'CANCEL', 'DONE' and 'NOW' actions. @@ -198,6 +205,7 @@ And there we have it, a re-templated time picker with dropdown, custom actions a
    ## Customizing the toggle and clear icons + The [`IgxTimePickerComponent`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) can be configured with [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) and [`IgxPickerClearComponent`]({environment:angularApiUrl}/classes/igxpickerclearcomponent.html), these can be used to change the toggle and clear icons without having to add your own click handlers. ```html @@ -213,14 +221,17 @@ The [`IgxTimePickerComponent`]({environment:angularApiUrl}/classes/igxtimepicker ``` ### Keyboard Navigation -* Users can navigate the component's time portions via the keyboard Up and Down arrow keys or by scrolling in the input field and in the dropdown/dialog. Navigation in the input is possible regardless of the [`minValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#minValue) or [`maxValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#maxValue), while navigation in the dropdown/dialog will be restricted within the [`minValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#maxValue) range. -* The time picker dropdown can be opened either by toggle icon click, Space key or Alt + Down keys press. In dialog mode this can be done by input click. -* Enter key press or mouse click outside the dropdown/dialog applies the selection and closes the dropdown/dialog. -* Pressing the Escape key cancels the selection and closes the dropdown/dialog. -* When entered a new value while dropdown is closed, click outside of the time picker or press Tab to move the focus so that the value is accepted. + +- Users can navigate the component's time portions via the keyboard Up and Down arrow keys or by scrolling in the input field and in the dropdown/dialog. Navigation in the input is possible regardless of the [`minValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#minValue) or [`maxValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#maxValue), while navigation in the dropdown/dialog will be restricted within the [`minValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#maxValue) range. +- The time picker dropdown can be opened either by toggle icon click, Space key or Alt + Down keys press. In dialog mode this can be done by input click. +- Enter key press or mouse click outside the dropdown/dialog applies the selection and closes the dropdown/dialog. +- Pressing the Escape key cancels the selection and closes the dropdown/dialog. +- When entered a new value while dropdown is closed, click outside of the time picker or press Tab to move the focus so that the value is accepted. ## Examples + ### Dialog Mode + The default time picker mode is editable dropdown mode. To change the time picker mode to read-only dialog mode, set the [`mode`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#mode) input to [`dialog`]({environment:angularApiUrl}/index.html#pickerinteractionmode): ```typescript @@ -256,6 +267,7 @@ In dialog mode, the dialog header displays the currently selected time in the pi When the [`minValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#maxValue) are set the dialog displays the time within that range only. See the [Min max value](#min-max-value) example below, for more details. ### Display and input format + The time picker component supports different display and input formats. The display format is the format of the value when in edit mode and can be one of the listed Angular [DatePipe](https://angular.io/api/common/DatePipe) formats. This allows it to support predefined format options, such as `shortTime` and `longTime`. @@ -270,20 +282,24 @@ Alternatively, if the [`inputFormat`]({environment:angularApiUrl}/classes/igxtim [displayFormat]="`shortTime`"> ``` + >[!NOTE] > The `IgxTimePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. ### Increment and decrement + The time picker exposes public [`increment`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#increment) and [`decrement`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#decrement) methods, which accept two optional parameters: the `DatePart` to be modified and the `delta` by which it will be changed. If not specified the `DatePart` defaults to `Hours` and the `delta` defaults to [`itemsDelta`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#itemsDelta). You can find a sample that illustrates the use of both methods at [Date Time Editor Directive](date-time-editor.md#increment-decrement). ### Forms and Validation + The time picker component supports all directives from the core FormsModule [NgModel](https://angular.io/api/forms/NgModel) and [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) (FormControl, FormGroup, etc.). This also includes the [Forms Validators](https://angular.io/api/forms/Validators) functions. In addition, the component's [min and max values](#min-max-value) also act as form validators. The [Reactive Forms Integration](angular-reactive-form-validation.md) sample demonstrates how to use the igxTimePicker in Reactive Forms. #### Min max value + You can specify [`minValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#minValue) and [`maxValue`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#maxValue) to restrict the user input, in which case the dropdown/dialog will display the time within that range only. In dropdown mode however, it is still possible for the user to type in an invalid time. You can handle the [`validationFailed`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#validationFailed) event in order to notify the user if that happens. >[!NOTE] @@ -320,14 +336,14 @@ public onValidationFailed() { ```html - + (onValidationFailed)="onValidationFailed()"> + @@ -349,6 +365,7 @@ And there we have it:
    #### Using date and time picker together + In some cases when the [`IgxDatePicker`](date-picker.md) and the IgxTimePicker are used together, we might need them to be bound to one and the same Date object value. To achieve that in template driven forms, use the `ngModel` to bind both components to the same Date object. @@ -378,7 +395,7 @@ To get started with styling the time picker, we need to import the `index` file, // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`time-picker-theme`]({environment:sassApiUrl}/themes#function-dialog-theme) and accepts parameters that style the time picker. @@ -421,6 +438,7 @@ Now, the time picker's items are properly rendered **inside** of our component's ```scss @include css-vars($my-time-picker-theme); ``` + >[!WARNING] >If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` @@ -443,28 +461,32 @@ Now, the time picker's items are properly rendered **inside** of our component's
    ## API References +
    -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) -* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxTimePickerComponent]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) -* [IgxTimePickerComponent Styles]({environment:sassApiUrl}/themes#function-time-picker-theme) -* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) +- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) +- [IgxTimePickerComponent]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) +- [IgxTimePickerComponent Styles]({environment:sassApiUrl}/themes#function-time-picker-theme) +- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) +- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Theming Dependencies -* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) + +- [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources -* [Date Time Editor](date-time-editor.md) -* [Label & Input](label-input.md) -* [Reactive Forms Integration](angular-reactive-form-validation.md) + +- [Date Time Editor](date-time-editor.md) +- [Label & Input](label-input.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) Our community is active and always welcoming to new ideas. -* [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) + +- [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/toast.md b/en/components/toast.md index 1018413b90..3f922007ae 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -5,13 +5,14 @@ _keywords: Angular Toast component, Angular Toast control, Ignite UI for Angular --- # Angular Toast Component Overview +

    The Ignite UI for Angular Toast component provides information and warning messages that are auto-hiding, non-interactive and cannot be dismissed by the user. Notifications can be displayed at the bottom, the middle, or the top of the page.

    ## Angular Toast Example - @@ -26,7 +27,7 @@ To get started with the Ignite UI for Angular Toast component, first you need to ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxToastModule` in your **app.module.ts** file. @@ -74,6 +75,7 @@ Now that you have the Ignite UI for Angular Toast module or component imported, ## Using the Angular Toast ### Show Toast + In order to display the toast component, use its [`open()`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#open) method and call it on a button click. You can pass the toast content inside the element. ```html @@ -112,6 +114,7 @@ public showMessage() { ## Examples ### Hide/Auto Hide + Once opened, the toast disappears after a period specified by the [`displayTime`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#displayTime) input which is set initially to 4000 milliseconds. This behavior is enabled by default but you can change this by setting [`autoHide`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#autoHide) to **false**. This way, the toast remains visible. Using the toast [`close()`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#close) method, you can close the component. ```html @@ -122,15 +125,16 @@ Once opened, the toast disappears after a period specified by the [`displayTime` Notification displayed ``` -If the sample is configured properly, the toast will appear when the *Show button* is clicked. For the first component auto-hide feature is disabled and the toast will disappear on 'Hide' button click. +If the sample is configured properly, the toast will appear when the _Show button_ is clicked. For the first component auto-hide feature is disabled and the toast will disappear on 'Hide' button click. In the other two components you can see in action how to pass different messages through the [`open()`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#open) method and use content projection. - ### Display Time + Use [`displayTime`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#displayTime) and set it to an interval in milliseconds to configure how long the toast component is visible. ```html @@ -147,6 +151,7 @@ If the sample is configured properly, the toast auto hides faster. ### Positioning + Use [`positionSettings`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#positionSettings) property to configure where the toast 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 @@ -169,8 +174,8 @@ public open(toast) { ... ``` - @@ -178,6 +183,32 @@ public open(toast) { ## Styling +### Toast Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $background$text-colorThe text-color used for the toast.
    $text-color$border-colorThe border-color used for the toast.
    + To get started with styling the toast, we need to import the index file, where all the theme functions and component mixins live: ```scss @@ -185,7 +216,7 @@ To get started with styling the toast, we need to import the index file, where a // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/themes#function-toast-theme) and provide the `$background`, `$text-color` and `$border-radius` parameters. @@ -208,23 +239,64 @@ The last step is to pass the custom toast theme: ### Demo - +### Styling with Tailwind + +You can style the toast using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the Tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-toast`, `dark-toast`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [IgxToast Theme]({environment:sassApiUrl}/themes#function-toast-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your toast should look like this: + +
    + +
    +
    ## API References +
    -* [IgxToastComponent]({environment:angularApiUrl}/classes/igxtoastcomponent.html) -* [IgxToastComponent Styles]({environment:sassApiUrl}/themes#function-toast-theme) +- [IgxToastComponent]({environment:angularApiUrl}/classes/igxtoastcomponent.html) +- [IgxToastComponent Styles]({environment:sassApiUrl}/themes#function-toast-theme) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) + +- [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/toggle.md b/en/components/toggle.md index 8dd3cdc016..c16c21ef37 100644 --- a/en/components/toggle.md +++ b/en/components/toggle.md @@ -11,8 +11,8 @@ _keywords: Angular Toggle directive, Angular Toggle control, Angular Toggle Comp ## Angular Toggle Example - @@ -25,7 +25,7 @@ To get started with the Ignite UI for Angular Toggle directive, first you need t ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxToggleModule` in your **app.module.ts** file. @@ -95,7 +95,7 @@ export class Class { } ``` -Then in the template of our component, we can apply the directive on the element we want to be togglable: +Then in the template of our component, we can apply the directive on the element we want to be toggleable: ```html @@ -107,11 +107,11 @@ Then in the template of our component, we can apply the directive on the element ``` -## Examples +## Examples -### Change Position +### Change Position -In the next sample, we'll use a different positioning strategy so that the content is displayed below the button. +In the next sample, we'll use a different positioning strategy so that the content is displayed below the button. The `igxToggle` directive uses the [`IgxOverlayService`]({environment:angularApiUrl}/classes/igxoverlayservice.html) provider. The `open`, `close` and `toggle` methods accept optional overlay settings that control how the content is displayed. If omitted, the default overlay settings are used as seen in the previous sample. @@ -145,8 +145,8 @@ The `igxToggle` directive uses the [`IgxOverlayService`]({environment:angularApi This is how our toggle should look like now: - @@ -173,8 +173,8 @@ If we would like to take advantage of this functionality, we will have to use th After these changes the toggle should work exactly in the same way. - @@ -199,8 +199,8 @@ There is a convenient way to keep the state of the `igxToggle` directive and com If all went well, it will look like this: - @@ -229,31 +229,35 @@ public offsetToggleSet() { } ``` - ## API References +
    -* [IgxToggleDirective]({environment:angularApiUrl}/classes/igxtoggledirective.html) -* [IgxToggleActionDirective]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) +- [IgxToggleDirective]({environment:angularApiUrl}/classes/igxtoggledirective.html) +- [IgxToggleActionDirective]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) Additional components and/or directives with relative APIs that were used: -* [IgxOverlayOutletDirective]({environment:angularApiUrl}/classes/igxoverlayoutletdirective.html) -* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [igxNavigationService]({environment:angularApiUrl}/classes/igxnavigationservice.html) +- [IgxOverlayOutletDirective]({environment:angularApiUrl}/classes/igxoverlayoutletdirective.html) +- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) +- [igxNavigationService]({environment:angularApiUrl}/classes/igxnavigationservice.html) ## Theming Dependencies -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) + +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) + +- [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/tooltip.md b/en/components/tooltip.md index 5096454193..d34b16b6e0 100644 --- a/en/components/tooltip.md +++ b/en/components/tooltip.md @@ -11,8 +11,8 @@ While most tooltips have a limited number of available positions, with the [`igx ## Angular Tooltip Example - @@ -26,7 +26,7 @@ To get started with the Ignite UI for Angular Tooltip directive, first you need ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxTooltipModule` in your **app.module.ts** file. @@ -258,8 +258,8 @@ Now for the tooltip! For its content, we will create a container that will be po If all went well, this is how our location and tooltip should look like: - @@ -270,8 +270,8 @@ If all went well, this is how our location and tooltip should look like: The tooltip integrates seamlessly with other components, allowing you to create advanced tooltips that contain components within them. In the following example, you can see how we create descriptive tooltips by using the [`IgxList`]({environment:angularApiUrl}/classes/igxlistcomponent.html), [`IgxAvatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html), [`IgxIcon`]({environment:angularApiUrl}/classes/igxiconcomponent.html), [`IgxBadge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html), [`IgxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.html), [`IgxCard`]({environment:angularApiUrl}/classes/igxcardcomponent.html) and [`IgxCategoryChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) components. - @@ -299,6 +299,7 @@ To further customize the tooltip, use the [`overlaySettings`]({environment:angul
    Her name is Madelyn James
    ``` + ```ts public positionSettings: PositionSettings = { horizontalDirection: HorizontalAlignment.Left, @@ -382,8 +383,8 @@ The arrow element is positioned based on the provided position settings. If the In the following example, you can see a demonstration of all position options and the arrow positioning behavior in action: - @@ -477,12 +478,52 @@ So now our styled tooltip should look like this: ### Demo - +### Styling with Tailwind + +You can style the tooltip using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the Tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-tooltip`, `dark-tooltip`. + +Once applied, these classes enable dynamic theme calculations. You can then override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [IgxTooltip Theme]({environment:sassApiUrl}/themes#function-tooltip-theme). The syntax is as follows: + +```html +
    + Her name is Madelyn James +
    +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your tooltip should look like this: + +
    + +
    +
    ## Accessibility @@ -512,21 +553,21 @@ Extra care should be taken in the following scenarios: In this article we learned how to create, configure and style awesome tooltips for the elements on our page! We also used some additional Ignite UI for Angular components like icons and avatars to improve on the design of our application! The respective APIs are listed below: -* [IgxTooltipDirective]({environment:angularApiUrl}/classes/igxtooltipdirective.html) -* [IgxTooltipTargetDirective]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) +- [IgxTooltipDirective]({environment:angularApiUrl}/classes/igxtooltipdirective.html) +- [IgxTooltipTargetDirective]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) Additional components and/or directives that were used: -* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxToggleDirective]({environment:angularApiUrl}/classes/igxtoggledirective.html) -* [IgxToggleActionDirective]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) +- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxToggleDirective]({environment:angularApiUrl}/classes/igxtoggledirective.html) +- [IgxToggleActionDirective]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) Styles: -* [IgxTooltipDirective Styles]({environment:sassApiUrl}/themes#function-tooltip-theme) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) -* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxTooltipDirective Styles]({environment:sassApiUrl}/themes#function-tooltip-theme) +- [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) +- [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme)
    @@ -535,5 +576,5 @@ Styles:
    Our community is active and always welcoming to new ideas. -* [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) +- [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/transaction-classes.md b/en/components/transaction-classes.md index 1f5840fc2e..9e0b50deb3 100644 --- a/en/components/transaction-classes.md +++ b/en/components/transaction-classes.md @@ -10,7 +10,7 @@ _keywords: batch editing, igniteui for angular, infragistics The Transaction is the main building block of the [Transaction service]({environment:angularApiUrl}/classes/igxtransactionservice.html). The Transaction is actually every operation that you execute on the data. The [`Transaction`]({environment:angularApiUrl}/interfaces/transaction.html) interface defines three properties: [`id`]({environment:angularApiUrl}/interfaces/transaction.html#id), [`newValue`]({environment:angularApiUrl}/interfaces/transaction.html#newValue) and [`type`]({environment:angularApiUrl}/interfaces/transaction.html#type). -The [`id`]({environment:angularApiUrl}/interfaces/transaction.html#id) of the Transaction should be unique per data record and defines the record that this transaction is affecting. The [`type`]({environment:angularApiUrl}/enums/transactiontype.html#type) may be any of the three transaction types: `ADD`, `DELETE` and `UPDATE`, depending what operation you execute. The [`newValue`]({environment:angularApiUrl}/interfaces/transaction.html#newValue) contains the value of the new record in case you are adding an `ADD` transaction. If you are updating an existing record, the [`newValue`]({environment:angularApiUrl}/interfaces/transaction.html#newValue) would contain the changes only. You may have several transactions of `UPDATE` type with same id. If you are deleting a record, the [`newValue`]({environment:angularApiUrl}/interfaces/transaction.html#newValue) will contain the value of the deleted record. +The [`id`]({environment:angularApiUrl}/interfaces/transaction.html#id) of the Transaction should be unique per data record and defines the record that this transaction is affecting. The [`type`]({environment:angularApiUrl}/enums/transactiontype.html#type) may be any of the three transaction types: `ADD`, `DELETE` and `UPDATE`, depending what operation you execute. The [`newValue`]({environment:angularApiUrl}/interfaces/transaction.html#newValue) contains the value of the new record in case you are adding an `ADD` transaction. If you are updating an existing record, the [`newValue`]({environment:angularApiUrl}/interfaces/transaction.html#newValue) would contain the changes only. You may have several transactions of `UPDATE` type with same id. If you are deleting a record, the [`newValue`]({environment:angularApiUrl}/interfaces/transaction.html#newValue) will contain the value of the deleted record. You can see an example of how adding each type of transaction looks like in the [How to use the Transaction service](transaction-how-to-use.md) topic. @@ -27,13 +27,14 @@ With the accumulated state being a partial object, we can also use the service t The [`igxBaseTransactionService`]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) has no undo stack so it does not provide undo/redo functionality. A detailed example of how you may use [`igxBaseTransactionService`]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) to enable Row Editing is provided in the following topics: -* [Grid Row Editing](grid/row-editing.md) -* [Tree Grid Row Editing](treegrid/row-editing.md) -* [Hierarchical Grid Row Editing](hierarchicalgrid/row-editing.md) + +- [Grid Row Editing](grid/row-editing.md) +- [Tree Grid Row Editing](treegrid/row-editing.md) +- [Hierarchical Grid Row Editing](hierarchicalgrid/row-editing.md) ## General information on igxTransactionService and igxHierarchicalTransactionService -[`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html) and [`igxHierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) are injectable middlewares, that implement the [`Transaction Service`]({environment:angularApiUrl}/interfaces/transactionservice.html) interface. A component may use those to accumulate changes without affecting the underlying data. The provider exposes API to *access*, *manipulate* (undo and redo) and *discard or commit* one or all changes to the data. +[`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html) and [`igxHierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) are injectable middlewares, that implement the [`Transaction Service`]({environment:angularApiUrl}/interfaces/transactionservice.html) interface. A component may use those to accumulate changes without affecting the underlying data. The provider exposes API to _access_, _manipulate_ (undo and redo) and _discard or commit_ one or all changes to the data. In a more concrete example, [`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html) and [`igxHierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) can work with both cell editing and row editing of the [`IgxGrid`](grid/grid.md). The transaction for the cell edit is added when the cell exits edit mode. When row editing starts the grid sets its transaction service in pending state by calling [`startPending`]({environment:angularApiUrl}/interfaces/transactionservice.html#startpending). Each edited cell is added to the pending transaction log and is not added to the main transaction log. When the row exits edit mode all the changes are added to the main transaction log and to the undo log as a single transaction. @@ -48,7 +49,8 @@ If you want your component to use transactions when making data operation, you n The [`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html) provides an undo stack so you may get advantage of the undo/redo functionality. The Undo stack is actually an array that contains arrays of transactions. When using the [`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html), you may check the [`canUndo`]({environment:angularApiUrl}/classes/igxtransactionservice.html#canundo) accessor in order to understand if there are any transactions in the Undo stack. If there are - you may use the [`undo`]({environment:angularApiUrl}/classes/igxtransactionservice.html#undo) method to remove the last transaction and [`redo`]({environment:angularApiUrl}/classes/igxtransactionservice.html#redo) to apply the last undone transaction. You may find a detailed example of how igxGrid with Batch Editing is implemented in the following topic: -* [Grid Batch Editing](grid/batch-editing.md) + +- [Grid Batch Editing](grid/batch-editing.md) ## Using igxHierarchicalTransactionService @@ -57,6 +59,7 @@ You may find a detailed example of how igxGrid with Batch Editing is implemented The [`igxHierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) is designed to handle the relations between parents and children (use this when you have a hierarchical data structure, as in [`igxTreeGrid`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html), for example). The service ensures that a new record will be added to the place you expect when adding an `ADD` transaction. When you delete a parent record, its' children will be promoted to the higher level of hierarchy, or will be deleted with their parent, depending on implementation. You can see the [`cascadeOnDelete`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#cascadeondelete) property of the tree grid for a concrete example - depending on the value, deleting a parent record will have different effects on its children. In your application, you may want to handle the scenario where the user tries to add a child record to a parent record that is already deleted and is waiting for the transaction to be committed. The Transaction Service will not allow adding a record to a parent that is to be deleted and an error message will be shown in the Console. However, you may check if a parent is to be deleted and implement your own alert to the user using the following code: + ```typescript const state = this.transactions.getState(parentRecordID); if (state && state.type === TransactionType.DELETE) { @@ -65,13 +68,16 @@ In your application, you may want to handle the scenario where the user tries to ``` You may find a detailed examples of how [`igxTreeGrid`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) and [`igxHierarchicalGrid`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) with Batch Editing are implemented in the following topics: -* [Tree Grid Batch Editing](treegrid/batch-editing.md) -* [Hierarchical Grid Batch Editing](hierarchicalgrid/batch-editing.md) + +- [Tree Grid Batch Editing](treegrid/batch-editing.md) +- [Hierarchical Grid Batch Editing](hierarchicalgrid/batch-editing.md) ## Transaction Factory + In the concrete implementation of transactions inside of Ignite UI for Angular grids, a factory is used in order to instantiate the proper transaction service, depending on the value of the grid's [`batchEditing`]({environment:angularApiUrl}/classes/igxgridcomponent.html#batchediting). There are two separate transaction factories - the [`IgxFlatTransactionFactory`]({environment:angularApiUrl}/classes/igxflatransactionfactory.html) (used for [`Grid`](grid/batch-editing.md) and [`Hierarchical Grid`](hierarchicalgrid/batch-editing.md)) and [`IgxHierarchicalTransactionFactory`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionfactory.html) (used for [Tree Grid](treegrid/batch-editing.md)). Both classes expose only one method - `create` - which returns a new instance of the proper [type](#general-information-on-igxtransactionservice-and-igxhierarchicaltransactionservice). The parameter passed (`TRANSACTION_TYPE`) is internally used - `None` is used when `batchEditing` is **false** and `Base` - when batch editing is enabled. An `enum` is used (instead of a `true` - `false` flag), as it allows to be expanded upon. ## Using Transaction Factory + Both [`IgxFlatTransactionFactory`]({environment:angularApiUrl}/classes/igxflatransactionfactory.html) and [`IgxHierarchicalTransactionFactory`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionfactory.html) are provided in `root` and are exposed in the public API. If you want to instantiate a new instance of a transaction service, depending on some arbitrary check, you can use a transaction factory. In the below example, you can see how you can instantiate different transaction services depending on an arbitrary (`hasUndo`) flag: @@ -96,7 +102,7 @@ export class MyCustomComponent { } ``` -Both factory classes can be extended and overriden in the DI hierarchy (using the `providers` array) in order to provide your own, custom implementation. This, combined with the fact that all of the classes the get instantiated by the factories are also public, gives you a lot of control over what's provided to the components that use transaction implementations internally. +Both factory classes can be extended and overridden in the DI hierarchy (using the `providers` array) in order to provide your own, custom implementation. This, combined with the fact that all of the classes the get instantiated by the factories are also public, gives you a lot of control over what's provided to the components that use transaction implementations internally. For example, to override the transaction service used internally by the `IgxGridComponent`, you can do the following: @@ -145,11 +151,12 @@ export class GridViewComponent { Now, when `batchEditing` is set to `true`, the grid will receive an instance of `CustomTransactionService`. ## Additional Resources +
    -* [Transaction Service API]({environment:angularApiUrl}/interfaces/transactionservice.html) -* [Transaction Service](transaction.md) -* [How to use the Transaction service](transaction-how-to-use.md) -* [Grid Batch Editing](grid/batch-editing.md) -* [Tree Grid Batch Editing](treegrid/batch-editing.md) -* [Hierarchical Grid Batch Editing](hierarchicalgrid/batch-editing.md) +- [Transaction Service API]({environment:angularApiUrl}/interfaces/transactionservice.html) +- [Transaction Service](transaction.md) +- [How to use the Transaction service](transaction-how-to-use.md) +- [Grid Batch Editing](grid/batch-editing.md) +- [Tree Grid Batch Editing](treegrid/batch-editing.md) +- [Hierarchical Grid Batch Editing](hierarchicalgrid/batch-editing.md) diff --git a/en/components/transaction-how-to-use.md b/en/components/transaction-how-to-use.md index d36b16dc16..e8024a1c96 100644 --- a/en/components/transaction-how-to-use.md +++ b/en/components/transaction-how-to-use.md @@ -6,7 +6,7 @@ _keywords: batch editing, igniteui for angular, infragistics # How to use the Transaction service -You may get advantage of the [`Transaction Service`]({environment:angularApiUrl}/interfaces/transactionservice.html) when using any component that needs to preserve the state of its data source and to commit many transactions at once. +You may get advantage of the [`Transaction Service`]({environment:angularApiUrl}/interfaces/transactionservice.html) when using any component that needs to preserve the state of its data source and to commit many transactions at once. When working with the Ignite UI for Angular grid components, you may use the [`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html) and [`igxHierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) that are integrated with the grids and provide batch editing out of the box. However, if you need to use transactions with any other Ignite UI for Angular or custom component, you may again use the [`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html) and implement similar behavior. @@ -15,8 +15,8 @@ When working with the Ignite UI for Angular grid components, you may use the [`i In this topic we will use [`igxList`]({environment:angularApiUrl}/classes/igxlistcomponent.html) component to demonstrate how to enable transactions. We will demonstrate how to add transactions, how to transform the data through a [pipe](https://angular.io/guide/pipes) and how to visually update the view in order to let the user see the changes that are about to be committed. - @@ -135,11 +135,12 @@ export class TransactionBasePipe implements PipeTransform { ### Define edit functionality The second list item contains an edit button, which updates the item's data. + ```html edit ``` -When the button is pressed, inside the `onEdit` event handler, an 'UPDATE' transaction is created: +When the button is pressed, inside the `onEdit` event handler, an 'UPDATE' transaction is created: ```typescript public onEdit(): void { @@ -174,7 +175,7 @@ The third list item contains a delete button, which deletes the item's data. ``` -When the button is pressed, inside `onDelete` event handler, a 'DELETE' transaction is created: +When the button is pressed, inside `onDelete` event handler, a 'DELETE' transaction is created: ```typescript public onDelete(): void { @@ -207,7 +208,7 @@ At the end of the list an ADD button is added, which adds a new item to the list ``` ``` -When the button is pressed, inside the `onAdd` event handler, an 'ADD' transaction is created: +When the button is pressed, inside the `onAdd` event handler, an 'ADD' transaction is created: ```typescript public onAdd(): void { @@ -277,6 +278,7 @@ public onCommit(): void { } ``` + If we are using the [`igxHierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) we can also use an overload of the [`commit`]({environment:angularApiUrl}/classes/igxtransactionservice.html#commit) method which expects primaryKey and childDataKey as arguments. ```typescript @@ -301,8 +303,9 @@ public onClear(): void { ``` ## Additional Resources +
    -* [Transaction Service API]({environment:angularApiUrl}/interfaces/transactionservice.html) -* [Transaction Service](transaction.md) -* [Transaction Service class hierarchy](transaction-classes.md) \ No newline at end of file +- [Transaction Service API]({environment:angularApiUrl}/interfaces/transactionservice.html) +- [Transaction Service](transaction.md) +- [Transaction Service class hierarchy](transaction-classes.md) diff --git a/en/components/transaction.md b/en/components/transaction.md index af19fa17b9..15e430dd0e 100644 --- a/en/components/transaction.md +++ b/en/components/transaction.md @@ -8,6 +8,7 @@ _keywords: batch editing, igniteui for angular, infragistics The [`Transaction Service`]({environment:angularApiUrl}/interfaces/transactionservice.html) is an injectable middleware (through [Angular's DI](https://angular.io/guide/dependency-injection)) that a component may use to accumulate changes without immediately affecting the underlying data. Transaction Service Architecture > [!NOTE] @@ -20,20 +21,22 @@ Every time you execute an operation ([**transaction**]({environment:angularApiUr We have built three classes on top of the [`Transaction Service`]({environment:angularApiUrl}/interfaces/transactionservice.html) that provide users with the ability to commit all changes they have made, or only changes made to a specific record, at once. Those classes are [`igxBaseTransactionService`]({environment:angularApiUrl}/classes/igxbasetransactionservice.html), [`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html) and [`igxHierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html). The [`igxTransactionService`]({environment:angularApiUrl}/classes/igxtransactionservice.html) and [`igxHierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) are fully integrated with our [igxGrid]({environment:angularApiUrl}/classes/igxgridcomponent.html), [igxHierarchicalGrid]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) and [igxTreeGrid]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) components. You can find detailed examples of using those components with transactions enabled in the following topics: -* [igxGrid Batch Editing and Transactions](grid/batch-editing.md) -* [igxHierarchicalGrid Batch Editing and Transactions](hierarchicalgrid/batch-editing.md) -* [igxTreeGrid Batch Editing and Transactions](treegrid/batch-editing.md) + +- [igxGrid Batch Editing and Transactions](grid/batch-editing.md) +- [igxHierarchicalGrid Batch Editing and Transactions](hierarchicalgrid/batch-editing.md) +- [igxTreeGrid Batch Editing and Transactions](treegrid/batch-editing.md) A more detailed overview of the opportunities that the [`Transaction Service`]({environment:angularApiUrl}/interfaces/transactionservice.html) provides can be found in our ["Building a transaction service for managing large scale editing experiences" blog](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e) ## Additional Resources +
    -* [Transaction Service API]({environment:angularApiUrl}/interfaces/transactionservice.html) -* [Transaction Service class hierarchy](transaction-classes.md) -* [How to use the Transaction service](transaction-how-to-use.md) -* [Build CRUD operations with igxGrid](general/how-to/how-to-perform-crud.md) -* [Grid Batch Editing](grid/batch-editing.md) -* [Tree Grid Batch Editing](treegrid/batch-editing.md) -* [Hierarchical Grid Batch Editing](hierarchicalgrid/batch-editing.md) -* ["Building a transaction service for managing large scale editing experiences" blog](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e) +- [Transaction Service API]({environment:angularApiUrl}/interfaces/transactionservice.html) +- [Transaction Service class hierarchy](transaction-classes.md) +- [How to use the Transaction service](transaction-how-to-use.md) +- [Build CRUD operations with igxGrid](general/how-to/how-to-perform-crud.md) +- [Grid Batch Editing](grid/batch-editing.md) +- [Tree Grid Batch Editing](treegrid/batch-editing.md) +- [Hierarchical Grid Batch Editing](hierarchicalgrid/batch-editing.md) +- ["Building a transaction service for managing large scale editing experiences" blog](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e) diff --git a/en/components/tree.md b/en/components/tree.md index f9649b0c3d..23fb1c4105 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -14,10 +14,11 @@ _keywords: angular tree, angular tree component, angular tree view, angular tree The Angular Tree Component allows users to represent hierarchical data in a tree-view structure with parent-child relationships, as well as to define static tree-view structure without a corresponding data model. Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures. The Ignite UI for Angular Tree Component also provides load on demand capabilities, item activation, bi-state and tri-state cascading selection of items through built-in checkboxes, built-in keyboard navigation and more. ## Angular Tree Example + In this basic Angular Tree example, you can see how to define an `igx-tree` and its nodes by specifying the node hierarchy and iterating through a hierarchical data set. - @@ -30,9 +31,10 @@ To get started with the Ignite UI for Angular Tree component, first you need to ```cmd ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. -The next step is to import the `IgxTreeModule` in your app.module file. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxTreeModule` in your app.module file. ```typescript // app.module.ts @@ -90,7 +92,7 @@ Now that we have the Ignite UI for Angular Tree module or directives imported, l ## Using the Angular Tree [IgxTreeNodesComponent]({environment:angularApiUrl}/classes/igxtreenodecomponent.html) is the representation of every node that belongs to the [IgxTreeComponent]({environment:angularApiUrl}/classes/igxtreecomponent.html). -Nodes provide [disabled]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#disabled), [active]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#active), [selected]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#selected) and [expanded]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#expanded) properties, which give you opportunity to configure the states of the node as per your requirement. +Nodes provide [disabled]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#disabled), [active]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#active), [selected]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#selected) and [expanded]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#expanded) properties, which give you opportunity to configure the states of the node as per your requirement. [data]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#data) property can be used to add a reference to the data entry the node represents. Binding `[data]` is required for searching through nodes using [IgxTreeComponent.findNodes()]({environment:angularApiUrl}/classes/igxtreecomponent.html#findNodes). ### Declaring a tree @@ -101,13 +103,13 @@ Nodes can be declared using one of the following approaches. ```html - - {{ node.text }} - - + + {{ node.text }} + + {{ child.text }} - - + + ``` @@ -115,15 +117,15 @@ Nodes can be bound to a data model so that their expanded and selected states ar ```html - - {{ node.text }} - - - + + {{ node.text }} + + + {{ child.text }} - - + + ``` @@ -133,62 +135,66 @@ In order to render a tree you do not necessarily need a data set - individual no ```html - - I am a parent node 1 - Alt Text - - I am a child node 1 - - - I am a child node of the child - - - - - - - I am a parent node 2 - Alt Text + + I am a parent node 1 + Alt Text + + I am a child node 1 + + + I am a child node of the child + + + + + + + I am a parent node 2 + Alt Text - I am a child node 1 - - + I am a child node 1 + + - I am a parent node 3 - + I am a parent node 3 + ``` ### Nodes with links + When a node should render a link, the `IgxTreeNodeLink` directive should be added to the `` tag. This will ensure the proper aria role is assigned to the node's DOM elements. ```html - - {{ node.text }} - - + + {{ node.text }} + + {{ child.text }} - - + + ``` + ### Node Interactions + [IgxTreeNodeComponent]({environment:angularApiUrl}/classes/igxtreenodecomponent.html) could be expanded or collapsed: -- by clicking on the node expand indicator *(default behavior)*. + +- by clicking on the node expand indicator _(default behavior)_. - by clicking on the node if the `igx-tree` [toggleNodeOnClick]({environment:angularApiUrl}/classes/igxtreecomponent.html#toggleNodeOnClick) property is set to `true`. ```html - - {{ node.text }} - + + {{ node.text }} + {{ child.text }} - - + + ``` @@ -196,16 +202,17 @@ By default, multiple nodes could be expanded at the same time. In order to chang ```html - - {{ node.text }} - + + {{ node.text }} + {{ child.text }} - - + + ``` In addition, the IgxTree provides the following API methods for node interactions: + - [**expand**]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#expand) - expands the node with animation. - [**collapse**]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#collapse) - collapses the node with animation. - [**toggle**]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#toggle) - toggles node expansion state with animation. @@ -214,19 +221,22 @@ In addition, the IgxTree provides the following API methods for node interaction - [**deselectAll**]({environment:angularApiUrl}/classes/igxtreecomponent.html#deselectAll) - deselects all nodes. If a nodes array is passed, deselects only the specified nodes. Does not emit nodeSelection event. ### Finding Nodes + You can find a specific node within an IgxTree by using the [findNodes]({environment:angularApiUrl}/classes/igxtreecomponent.html#findNodes) method. It returns an array of nodes, which match the specified data. When finding nodes in more complex data structure scenarios, like composite primary keys, you can pass a custom comparer function in order to specify the criteria for finding nodes based on the data. + ```html - - {{ node.text }} - node.imageAlt - + + {{ node.text }} + node.imageAlt + {{ child.text }} - - + + ``` + ```typescript export class MyTreeViewComponent { public data: { [key: string]: any, valueKey: string } = MY_DATA; @@ -240,8 +250,11 @@ export class MyTreeViewComponent { } } ``` + ### Templating -To create a reusable template for your nodes, declare `` **within `igx-tree`**. + +To create a reusable template for your nodes, declare `` **within `igx-tree`**. + ```html @@ -258,7 +271,9 @@ To create a reusable template for your nodes, declare `` **within ` ``` + Additionally, by using the [expandIndicator]({environment:angularApiUrl}/classes/igxtreecomponent.html#expandIndicator) input you have the ability to set a custom template to be used for rendering the expand/collapse indicators of nodes. + ```html @@ -270,76 +285,147 @@ Additionally, by using the [expandIndicator]({environment:angularApiUrl}/classes ``` ## Angular Tree Selection + In order to setup node selection in the `igx-tree`, you just need to set its [selection]({environment:angularApiUrl}/classes/igxtreecomponent.html#selection) property. This property accepts the following three modes: **None**, **BiState** and **Cascading**. Below we will take a look at each of them in more detail. + ### None + In the `igx-tree` by default node selection is disabled. Users cannot select or deselect a node through UI interaction, but these actions can still be completed through the provided API method. + ### Bi-State + To enable bi-state node selection in the `igx-tree` just set the [selection]({environment:angularApiUrl}/classes/igxtreecomponent.html#selection) property to **BiState**. This will render a checkbox for every node. Each node has two states - selected or not. This mode supports multiple selection. + ```html ``` + ### Cascading -To enable cascading node selection in the `igx-tree`, just set the selection property to **Cascading**. This will render a checkbox for every node. + +To enable cascading node selection in the `igx-tree`, just set the selection property to **Cascading**. This will render a checkbox for every node. + ```html ``` + In this mode a parent's selection state entirely depends on the selection state of its children. When a parent has some selected and some deselected children, its checkbox is in an indeterminate state. ### Angular Tree Checkbox + The Angular Tree component provides built-in support for checkboxes, allowing users to select more than one item. The TreeView checkboxes also have a tri-state mode, which is applicable only for partially selected parent nodes. In this mode, a parent node will go into the indeterminate state when some but not all of the child nodes are checked. + ## Keyboard Navigation + Keyboard navigation in IgxTree provides a rich variety of keyboard interactions for the user. This functionality is enabled by default and allows users to navigate through the nodes. The IgxTree navigation is compliant with W3C accessibility standards and convenient to use. **Key Combinations** - - Arrow Down - navigates to the next visible node. Marks the node as active. Does nothing if on the LAST node - - Ctrl + Arrow Down - navigates to the next visible node. Does nothing if on the LAST node - - Arrow Up - navigates to the previous visible node. Marks the node as active. Does nothing if on the FIRST node - - Ctrl + Arrow Up - navigates to the previous visible node. Does nothing if on the FIRST node - - Arrow Left - on an expanded parent node, collapses it. If on a child node, moves to its parent node. - - Arrow Right - on an expanded parent node, navigates to the first child of the node. If on a collapsed parent node, expands it. - - Home - navigates to the FIRST node - - End - navigates to the LAST visible node - - Tab - navigates to the next focusable element on the page, outside of the tree - - Shift + Tab - navigates to the previous focusable element on the page, outside of the tree - - Space - toggles selection of the current node. Marks the node as active. - - Shift + Space - toggles selection of all nodes between the active one and the one pressed Space while holding Shift if selection is enabled - - Enter - activates the focused node. If the node has link in it, open the link - - * - expands the node and all sibling nodes on the same level +- Arrow Down - navigates to the next visible node. Marks the node as active. Does nothing if on the LAST node +- Ctrl + Arrow Down - navigates to the next visible node. Does nothing if on the LAST node +- Arrow Up - navigates to the previous visible node. Marks the node as active. Does nothing if on the FIRST node +- Ctrl + Arrow Up - navigates to the previous visible node. Does nothing if on the FIRST node +- Arrow Left - on an expanded parent node, collapses it. If on a child node, moves to its parent node. +- Arrow Right - on an expanded parent node, navigates to the first child of the node. If on a collapsed parent node, expands it. +- Home - navigates to the FIRST node +- End - navigates to the LAST visible node +- Tab - navigates to the next focusable element on the page, outside of the tree +- Shift + Tab - navigates to the previous focusable element on the page, outside of the tree +- Space - toggles selection of the current node. Marks the node as active. +- Shift + Space - toggles selection of all nodes between the active one and the one pressed Space while holding Shift if selection is enabled +- Enter - activates the focused node. If the node has link in it, open the link +- * - expands the node and all sibling nodes on the same level When selection is enabled, end-user selection of nodes is only allowed through the rendered checkbox. Since both selection types allow multiple selection, the following mouse + keyboard interactions are available: - - Click - when performed on the node checkbox, toggles selection of the node if selection is enabled. Otherwise, focuses the node - - Shift + Click - when performed on the node checkbox, toggles selection of all nodes between the active one and the one clicked while holding Shift if selection is enabled +- Click - when performed on the node checkbox, toggles selection of the node if selection is enabled. Otherwise, focuses the node +- Shift + Click - when performed on the node checkbox, toggles selection of all nodes between the active one and the one clicked while holding Shift if selection is enabled ## Angular Tree Load On Demand The Ignite UI for Angular IgxTree can be rendered in such way that it requires the minimal amount of data to be retrieved from the server so the user could see it as quickly as possible. With this dynamic data loading approach, only after the user expands a node, the children for that particular parent node will be retrieved. This mechanism, also known as Load on Demand, can be easily configured to work with any remote data. + ### Demo - After the user clicks the expand icon, it is replaced by a loading indicator. When the [loading]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#loading) property resolves to `false`, the loading indicator disappears and the children are loaded. ## Styling -Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the tree appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the `index` file in our style file: + +### Tree Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Primary PropertyDependent PropertyDescription
    $background
    		$foregroundThe color used for the tree node content.
    $background-selectedThe background color used for the selected tree node.
    $hover-colorThe background color used for the tree node on hover.
    $background-activeThe background color used for the active tree node.
    $background-disabledThe background color used for the tree node in disabled state.
    $background-selected
    		$foreground-selectedThe color used for the content of the selected tree node.
    $hover-selected-colorThe background color used for the selected tree node on hover.
    $background-active
    		$foreground-activeThe color used for the content of the active tree node.
    $background-active-selectedThe background color used for the active selected tree node.
    $background-active-selected$foreground-active-selectedThe color used for the content of the active selected tree node.
    $background-disabled$foreground-disabledThe color used for the content of the disabled tree node.
    + +Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the tree appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the `index` file in our style file: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` -Following the simplest approach, we create a new theme that extends the [tree-theme]({environment:sassApiUrl}/themes#function-tree-theme) and provide just the `$background` parameter, the theme will automatically calculate all the other necessary colors, of course you can override any of the other properties: +Following the simplest approach, we create a new theme that extends the [tree-theme]({environment:sassApiUrl}/themes#function-tree-theme) and provide just the `$background` parameter, the theme will automatically calculate all the other necessary colors, of course you can override any of the other properties: ```scss $custom-tree-theme: tree-theme( @@ -348,33 +434,83 @@ $custom-tree-theme: tree-theme( ``` The last step is to include the component's theme. + ```scss @include css-vars($custom-tree-theme); ``` ### Demo - +### Styling with Tailwind + +You can style the tree using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the Tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-tree`, `dark-tree`. + +Once applied, these classes enable dynamic theme calculations. You can then override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [IgxTree Theme]({environment:sassApiUrl}/themes#function-tree-theme). The syntax is as follows: + +```html + + @for (type of data; track type) { + + {{ type.Name }} + @for (value of type.Children; track value) { + + {{ value.Name }} + + } + + } + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your tree should look like this: + +
    + +
    + ## Known Issues and Limitations |Limitation|Description| |--- |--- | | Recursive template nodes | The `igx-tree` does not support recursively creating the igx-tree-nodes via template. [Learn more](https://github.com/IgniteUI/igniteui-angular/wiki/Tree-Specification#assumptions-and-limitations). All of the nodes should be declared manually, meaning if you intend to visualize a very deep hierarchy, this would impact the size of your template file. The tree is intended to be primarily used as a layout / navigational component. If a hierarchical data source with numerous levels of depth and homogenous data needs to be visualized, you could use the [**IgxTreeGrid**](treegrid/tree-grid.md)| |Using IgxTreeNodes with old View Engine (pre-Ivy)|There is an issue in Angular's View Engine (pre-Ivy) that prevents the tree from being used when `enableIvy: false` is set in tsconfig.json| -|Tab navigation in FireFox|Tabbing into the tree via keyboard navigation, when the tree has a scrollbar, will first focus the igx-tree-node element. This is the default behavior in FireFox, however it can be resolved by putting an explicit `tabIndex = -1` on the tree. +|Tab navigation in FireFox|Tabbing into the tree via keyboard navigation, when the tree has a scrollbar, will first focus the igx-tree-node element. This is the default behavior in FireFox, however it can be resolved by putting an explicit `tabIndex = -1` on the tree.| + ## API References +
    -* [IgxTreeComponent]({environment:angularApiUrl}/classes/igxtreecomponent.html) -* [IgxTreeNodeComponent]({environment:angularApiUrl}/classes/igxtreenodecomponent.html) +- [IgxTreeComponent]({environment:angularApiUrl}/classes/igxtreecomponent.html) +- [IgxTreeNodeComponent]({environment:angularApiUrl}/classes/igxtreenodecomponent.html) ## Additional Resources +
    Our community is active and always welcoming to new ideas. -* [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) +- [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/treegrid/groupby.md b/en/components/treegrid/groupby.md index 7929b84c64..506338b3ed 100644 --- a/en/components/treegrid/groupby.md +++ b/en/components/treegrid/groupby.md @@ -18,6 +18,7 @@ The `treeGridGrouping` pipe groups the data based on the provided parameters and ``` The pipe arguments are the following: + - groupingExpressions - an array of [`IGroupingExpression`]({environment:angularApiUrl}/interfaces/igroupingexpression.html) objects which contains information about the fields used to generate the hierarchy and the sorting details for each group - groupKey - a string value for the name of the generated hierarchy column - childDataKey - a string value for the field where the child collection of the generated parent rows is stored @@ -35,6 +36,7 @@ The UI component with selector `igx-tree-grid-group-by-area` handles the UI inte ``` The component's inputs are the following: + - grid - `IgxTreeGridComponent` that is used for the grouping - expressions - an array of [`IGroupingExpression`]({environment:angularApiUrl}/interfaces/igroupingexpression.html) objects which contains the fields used to generate the hierarchy - hideGroupedColumns - a boolean value indicating whether to hide the columns by which grouping was performed @@ -46,16 +48,16 @@ The component's inputs are the following: ## Angular Tree Grid Group By Example -
    -#### Implementation +### Implementation -In this sample we are using the `treeGridGrouping` pipe and the UI component with selector `igx-tree-grid-group-by-area` for the grouping. The data is grouped by the **"category"**, **"type"** and **"contract"** fields. The resulting hierarchy is displayed in the newly created **"categories"** column. The pipe also calculates aggregated values for the generated parent rows for the **"price"**, **"change"** and **"changeP"** columns. +In this sample we are using the `treeGridGrouping` pipe and the UI component with selector `igx-tree-grid-group-by-area` for the grouping. The data is grouped by the **"category"**, **"type"** and **"contract"** fields. The resulting hierarchy is displayed in the newly created **"categories"** column. The pipe also calculates aggregated values for the generated parent rows for the **"price"**, **"change"** and **"changeP"** columns. ```html
    -#### Implementation +### Implementation In this sample, data is loaded in portions. Initially, only the top level categories are displayed, then child data is served once a parent row is expanded. For more information on this approach, please refer to the [Tree Grid Load On Demand](load-on-demand.md) topic. The data is grouped by the **"ShipCountry"**, **"ShipCity"** and **"Discontinued"** fields and the resulting hierarchy is displayed in a separate column. The grouping is performed on a remote service - the data is modified and corresponding child and parent keys are assigned that are used to display the final data in a hierarchical view. For more information on how this service works you can take a look at the `TreeGridGroupingLoadOnDemandService` class in the `remoteService.ts` file. @@ -168,19 +170,19 @@ private reloadData() {
    -* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ### Additional Resources
    -* [TreeGrid overview](tree-grid.md) -* [TreeGrid Summaries](summaries.md) -* [Grid Summaries](../grid/summaries.md) +- [TreeGrid overview](tree-grid.md) +- [TreeGrid Summaries](summaries.md) +- [Grid Summaries](../grid/summaries.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/treegrid/load-on-demand.md b/en/components/treegrid/load-on-demand.md index d74161b647..a1347dc79b 100644 --- a/en/components/treegrid/load-on-demand.md +++ b/en/components/treegrid/load-on-demand.md @@ -11,8 +11,8 @@ The Ignite UI for Angular [`IgxTreeGrid`]({environment:angularApiUrl}/classes/ig ## Angular Tree Grid Load On Demand Example - @@ -32,7 +32,7 @@ The Load on Demand feature is compatible with both types of Tree Grid data sourc The [`loadChildrenOnDemand`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#loadChildrenOnDemand) callback provides two parameters: - parentID - the ID of the parent row that is being expanded. -- done - callback that should be called with the children when they are retrieved from the server. +- done - callback that should be called with the children when they are retrieved from the server. ```typescript public loadChildren = (parentID: any, done: (children: any[]) => void) => { @@ -40,7 +40,7 @@ public loadChildren = (parentID: any, done: (children: any[]) => void) => { } ``` -After the user clicks the expand icon, it is replaced by a loading indicator. When the `done` callback is called, the loading indicator disappears and the children are loaded. The Tree Grid adds the children to the underlying data source and populates the necessary keys automatically. +After the user clicks the expand icon, it is replaced by a loading indicator. When the `done` callback is called, the loading indicator disappears and the children are loaded. The Tree Grid adds the children to the underlying data source and populates the necessary keys automatically. If you have a way to provide an information whether a row has children prior to its expanding, you could use the [`hasChildrenKey`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#hasChildrenKey) input property. This way you could provide a boolean property from the data objects which indicates whether an expansion indicator should be displayed. @@ -70,18 +70,18 @@ If you want to provide your own custom loading indicator, you may create an ng-t
    -* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ### Additional Resources
    -* [Tree Grid overview](tree-grid.md) -* [Tree Grid Virtualization and Performance](virtualization.md) +- [Tree Grid overview](tree-grid.md) +- [Tree Grid Virtualization and Performance](virtualization.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/treegrid/tree-grid.md b/en/components/treegrid/tree-grid.md index 7f07534418..f62690bc35 100644 --- a/en/components/treegrid/tree-grid.md +++ b/en/components/treegrid/tree-grid.md @@ -27,7 +27,7 @@ To get started with the Ignite UI for Angular Tree Grid component, first you nee ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](../general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. The next step is to import the `IgxTreeGridModule` in your **app.module.ts** file. @@ -93,6 +93,7 @@ Regardless of which option is used for building the tree grid's hierarchy (child Initially the tree grid will expand all node levels and show them. This behavior can be configured using the [`expansionDepth`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#expansionDepth) property. By default its value is **Infinity** which means all node levels will be expanded. You may control the initial expansion depth by setting this property to a numeric value. For example **0** will show only root level nodes, **1** will show root level nodes and their child nodes and so on. ### Child Collection + When we are using the **child collection** option, every data object contains a child collection, that is populated with items of the same type as the parent data object. This way every record in our tree grid will have a direct reference to any of its children. In this case the [`data`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#data) property of our tree grid that contains the original data source will be a hierarchically defined collection. For this sample, let's use the following collection structure: @@ -194,6 +195,7 @@ Finally, we will enable the toolbar of our tree grid, along with the column hidi You can see the result of the code from above at the beginning of this article in the [Angular Tree Grid Example](#angular-tree-grid-example) section. ### Primary and Foreign keys + When we are using the **primary and foreign keys** option, every data object contains a primary key and a foreign key. The primary key is the unique identifier of the current data object and the foreign key is the unique identifier of its parent. In this case the [`data`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#data) property of our tree grid that contains the original data source will be a flat collection. The following is an example of a component which contains a flat collection defined with primary and foreign keys relation: @@ -290,7 +292,7 @@ To get started with styling the Tree Grid, we need to import the `index` file, w // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Following the simplest approach, we create a new theme that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the tree grid as desired. @@ -337,7 +339,7 @@ The last step is to **include** the component theme in our application. ## Performance (Experimental) -The `igxTreeGrid`'s design allows it to take advantage of the Event Coalescing feature that has Angular introduced. This feature allows for improved performance with roughly around **`20%`** in terms of interactions and responsiveness. This feature can be enabled on application level by simply setting the `ngZoneEventCoalescing ` and `ngZoneRunCoalescing` properties to `true` in the `bootstrapModule` method: +The `igxTreeGrid`'s design allows it to take advantage of the Event Coalescing feature that has Angular introduced. This feature allows for improved performance with roughly around **`20%`** in terms of interactions and responsiveness. This feature can be enabled on application level by simply setting the `ngZoneEventCoalescing` and `ngZoneRunCoalescing` properties to `true` in the `bootstrapModule` method: ```typescript platformBrowserDynamic() @@ -347,7 +349,6 @@ platformBrowserDynamic() >[!NOTE] > This is still in experimental feature for the `igxTreeGrid`. This means that there might be some unexpected behaviors in the Tree Grid. In case of encountering any such behavior, please contact us on our [Github](https://github.com/IgniteUI/igniteui-angular/discussions) page. - >[!NOTE] > Enabling it can affects other parts of an Angular application that the `igxTreeGrid` is not related to. @@ -376,36 +377,37 @@ platformBrowserDynamic()
    -* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) -* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) -* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) +- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) +- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) +- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +- [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) -* [IgxChip Theme]({environment:sassApiUrl}/themes#function-chip-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) -* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) -* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) -* [IgxSnackBar Theme]({environment:sassApiUrl}/themes#function-snackbar-theme) -* [IgxBadge Theme]({environment:sassApiUrl}/themes#function-badge-theme) + +- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +- [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) +- [IgxChip Theme]({environment:sassApiUrl}/themes#function-chip-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +- [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +- [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) +- [IgxSnackBar Theme]({environment:sassApiUrl}/themes#function-snackbar-theme) +- [IgxBadge Theme]({environment:sassApiUrl}/themes#function-badge-theme) ## Additional Resources
    -* [Grid Sizing](sizing.md) -* [Data Grid](../grid/grid.md) -* [Row Editing](row-editing.md) +- [Grid Sizing](sizing.md) +- [Data Grid](../grid/grid.md) +- [Row Editing](row-editing.md)
    Our community is active and always welcoming to new ideas. -* [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) +- [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/zoomslider-overview.md b/en/components/zoomslider-overview.md index 5ba213bf06..ee0c092d1c 100644 --- a/en/components/zoomslider-overview.md +++ b/en/components/zoomslider-overview.md @@ -85,5 +85,5 @@ You can find more information about charts in [Chart Features](charts/chart-feat The following is a list of API members mentioned in the above sections: -* [`IgxZoomSliderComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxzoomslidercomponent.html) -* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxZoomSliderComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxzoomslidercomponent.html) +- [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) diff --git a/en/images/general/ThemeingWidget1.gif b/en/images/general/ThemingWidget1.gif similarity index 100% rename from en/images/general/ThemeingWidget1.gif rename to en/images/general/ThemingWidget1.gif diff --git a/jp/components/avatar.md b/jp/components/avatar.md index afb2b04fc7..c923ddea95 100644 --- a/jp/components/avatar.md +++ b/jp/components/avatar.md @@ -87,7 +87,7 @@ Ignite UI for Angular Avatar コンポーネントには、3 つの形状 (正 ```html ``` -`background` プロパティを使用して背景色を変更できます。また、`color` プロパティを使用してイニシャルの色を設定します。 +`background` プロパティを使用して背景の色を変更できます。また、`color` プロパティを使用してイニシャルの色を設定します。 ```scss // avatar.component.scss @@ -142,7 +142,33 @@ igx-avatar { ## スタイル設定 -Avatar のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。 +### Avatar テーマのプロパティ マップ + +`$background` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$colorアバターに使用されるテキストの色
    $icon-colorアバターに使用されるアイコンの色
    + +Avatar のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -187,6 +213,44 @@ $custom-avatar-theme: avatar-theme( iframe-src="{environment:demosBaseUrl}/layouts/avatar-styling/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `avatar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-avatar`、`dark-avatar`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[avatar-theme]({environment:sassApiUrl}/themes#function-avatar-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、avatar は次のようになります: + +
    + +
    + ### カスタム サイズ変更 `igx-avatar` を直接ターゲットとして `--size` 変数を使用することができます。 diff --git a/jp/components/badge.md b/jp/components/badge.md index d44b7d78d9..3d0c4a27ae 100644 --- a/jp/components/badge.md +++ b/jp/components/badge.md @@ -183,7 +183,7 @@ export class AppModule {} ``` >[!NOTE] ->[`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) には、バッジの外観を構成するための [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) および [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) 入力があります。公式の[マテリアル アイコン セット](https://material.io/icons/)から名前を指定して、アイコンを設定できます。バッジタイプは、[`default`]({environment:angularApiUrl}/enums/type.html#default)、[`info`]({environment:angularApiUrl}/enums/type.html#info)、[`success`]({environment:angularApiUrl}/enums/type.html#success)、[`warning`]({environment:angularApiUrl}/enums/type.html#warning)、または [`error`]({environment:angularApiUrl}/enums/type.html#error) のいずれかに設定できます。その型により、特定の背景色が適用されます。 +>[`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) には、バッジの外観を構成するための [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) および [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) 入力があります。公式の[マテリアル アイコン セット](https://material.io/icons/)から名前を指定して、アイコンを設定できます。バッジタイプは、[`default`]({environment:angularApiUrl}/enums/type.html#default)、[`info`]({environment:angularApiUrl}/enums/type.html#info)、[`success`]({environment:angularApiUrl}/enums/type.html#success)、[`warning`]({environment:angularApiUrl}/enums/type.html#warning)、または [`error`]({environment:angularApiUrl}/enums/type.html#error) のいずれかに設定できます。その型により、特定の背景の色が適用されます。 サンプルでは、[`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) と [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) が icon と type という名前のモデルプロパティにバインドされています。 @@ -290,6 +290,32 @@ class Member { ## スタイル設定 +### Badge テーマのプロパティ マップ + +`$background-color` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background-color$icon-colorバッジ内のアイコンの色
    $text-colorバッジ内のテキストの色
    + Badge のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -299,7 +325,7 @@ Badge のスタイル設定は、すべてのテーマ関数とコンポーネ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`badge-theme`]({environment:sassApiUrl}/themes#function-badge-theme) を拡張する新しいテーマを作成し、バッジの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。`$background-color` を設定すると、`$icon-color` と `$text-color` は、背景色とのコントラストが高い黒または白に自動的に割り当てられます。なお、`$border-radius` プロパティはバッジの `shape` が `square` に設定されている場合のみ適用されます。 +最も簡単な方法は、[`badge-theme`]({environment:sassApiUrl}/themes#function-badge-theme) を拡張する新しいテーマを作成し、バッジの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。`$background-color` を設定すると、`$icon-color` と `$text-color` は、背景の色とのコントラストが高い黒または白に自動的に割り当てられます。なお、`$border-radius` プロパティはバッジの `shape` が `square` に設定されている場合のみ適用されます。 ```scss $custom-badge-theme: badge-theme( @@ -322,6 +348,41 @@ $custom-badge-theme: badge-theme( iframe-src="{environment:demosBaseUrl}/data-display/badge-styling-sample/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `badge` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-badge`、`dark-badge`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[badge-theme]({environment:sassApiUrl}/themes#function-badge-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、badge は次のようになります: + +
    + +
    ## API リファレンス
    diff --git a/jp/components/button-group.md b/jp/components/button-group.md index 6287d62aa7..0d32ed651f 100644 --- a/jp/components/button-group.md +++ b/jp/components/button-group.md @@ -249,6 +249,159 @@ public ngOnInit() { ## スタイル設定 +### Button Group テーマのプロパティ マップ + +`$item-background` プロパティの値を設定すると、下の表にリストされている関連するすべての依存プロパティが自動的に更新され、視覚的な一貫性が維持されます。次の表は、プライマリ プロパティをカスタマイズしたときに影響を受けるプロパティを示しています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    +
    $item-background
    +     		$item-hover-background項目のホバー時の背景の色
    $item-selected-background選択項目の背景の色
    $item-focused-backgroundフォーカス時の項目の背景の色
    $disabled-background-color無効な項目の背景の色
    $item-border-color項目の境界線の色
    $item-text-color項目のテキストの色
    $idle-shadow-color項目のアイドル シャドウの色
    +
    $item-hover-background
    +     		$item-selected-hover-background選択された項目のホバー時の背景の色
    $item-focused-hover-backgroundフォーカス + ホバー時の背景の色
    $item-hover-text-colorホバー時の項目のテキストの色
    $item-hover-icon-colorホバー時の項目のアイコンの色
    +
    $item-selected-background
    +     		$item-selected-focus-backgroundフォーカス時の選択項目の背景の色
    $disabled-selected-background無効な選択項目の背景の色
    $item-selected-text-color選択項目のテキストの色
    $item-selected-icon-color選択項目のアイコンの色
    $item-selected-hover-text-colorホバー時の選択項目のテキストの色
    $item-selected-hover-icon-colorホバー時の選択項目のアイコンの色
    +
    $item-border-color
    +     		$item-hover-border-colorホバー時の項目の境界線の色
    $item-focused-border-colorフォーカス時の項目の境界線の色
    $item-selected-border-color選択項目の境界線の色
    $item-selected-hover-border-colorホバー時の選択項目の境界線の色
    $item-disabled-border無効な項目の境界線の色
    $disabled-selected-border-color無効な選択項目の境界線の色
    + ボタン グループ のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -258,7 +411,7 @@ public ngOnInit() { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`button-group-theme`]({environment:sassApiUrl}/themes#function-button-group-theme) を拡張し、`$item-background` のみを指定して新しいテーマを作成します。これにより、インタラクション状態の色、前景色、境界線の色が自動的に算出されます。必要に応じて任意のテーマ パラメーターをオーバーライドすることも可能です。 +最もシンプルな方法として、[`button-group-theme`]({environment:sassApiUrl}/themes#function-button-group-theme) を拡張し、`$item-background` のみを指定して新しいテーマを作成します。これにより、インタラクション状態の色、前景の色、境界線の色が自動的に算出されます。必要に応じて任意のテーマ パラメーターをオーバーライドすることも可能です。 ```scss $custom-button-group: button-group-theme( @@ -276,13 +429,50 @@ $custom-button-group: button-group-theme( ### デモ - +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `button-group` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-button-group`、`dark-button-group`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[button-group-theme]({environment:sassApiUrl}/themes#function-button-group-theme) で確認できます。構文は次のとおりです: + +```html + +... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、button group は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/button.md b/jp/components/button.md index 31aad99baa..72c3eb6882 100644 --- a/jp/components/button.md +++ b/jp/components/button.md @@ -250,23 +250,1161 @@ protected get sizeStyle() { ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してボタンの外観をカスタマイズする方法です。 - -```css -[igxButton] { - --background: #ff4d4f; - --hover-background: #ff7875; - --active-background: #d9363e; - --focus-visible-background: #ff4d4f; - --focus-visible-foreground: #fff; -} -``` +### Button テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + +
    + + + + + + + + +
    +
    +

    Material テーマ

    +

    Flat ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    +

    Contained ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $active-backgroundアクティブ時の背景の色
    $active-foregroundアクティブ時の前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    +

    Outlined ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $border-colorアウトライン ボタンの境界線の色
    $hover-border-colorホバー時のアウトライン ボタンの境界線の色
    $focus-border-colorフォーカス時のアウトライン ボタンの境界線の色
    $focus-visible-border-colorフォーカスが表示されている時のアウトライン ボタンの境界線の色
    $active-border-colorアクティブ時のアウトライン ボタンの境界線の色
    +

    FAB ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時の前景
    $active-backgroundアクティブ時の背景の色
    $active-foregroundアクティブ時の前景の色
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    +
    + +
    +

    Fluent テーマ

    +

    Flat ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    +

    Contained ボタン

    + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $active-foregroundアクティブ時の前景の色
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    +

    Outlined ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のアウトライン ボタンの背景の色
    $focus-backgroundフォーカス時のアウトライン ボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のアウトライン ボタンの背景の色
    $active-backgroundアクティブ時のアウトライン ボタンの背景の色
    $hover-foregroundホバー時のアウトライン ボタンの前景の色
    $icon-color-hoverホバー時のアウトライン ボタンのアイコンの色
    $focus-foregroundフォーカス時のアウトライン ボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のアウトライン ボタンの前景の色
    $active-foregroundアクティブなアウトライン ボタンの前景の色
    $focus-visible-foregroundフォーカスが表示されている時のアウトライン ボタンの前景の色
    $focus-visible-border-colorフォーカスが表示されている時のアウトライン ボタンの境界線の色
    $border-colorアウトライン ボタンの境界線の色
    $hover-border-colorホバー時のアウトライン ボタンの境界線の色
    $focus-border-colorフォーカス時のアウトライン ボタンの境界線の色
    $active-border-colorアクティブなアウトライン ボタンの境界線の色
    +

    FAB ボタン

    + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $active-backgroundアクティブ時の背景の色
    $active-foregroundアクティブ時の前景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    +
    -これらの CSS 変数の値を変更することで、ボタンの全体的な外観を変更できます。 +
    +

    Bootstrap テーマ

    +

    Flat ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    $disabled-foreground無効なボタンの前景の色
    $disabled-icon-color無効なボタンのアイコンの色
    $shadow-colorシャドウの色
    +

    Contained ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $active-foregroundアクティブ時の前景の色
    $shadow-colorシャドウの色
    $disabled-background無効な背景の色
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    +

    Outlined ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    $disabled-foreground無効なボタンの前景の色
    $disabled-icon-color無効なボタンのアイコンの色
    $disabled-border-color無効なボタンの境界線の色
    $hover-border-colorホバー時の境界線の色
    $focus-border-colorフォーカス時の境界線の色
    $focus-visible-border-colorフォーカス表示の境界線の色
    $active-border-colorアクティブ時の境界線の色
    $shadow-colorシャドウの色
    +

    FAB ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $disabled-background無効な背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $active-foregroundアクティブ時の前景の色
    $shadow-colorシャドウの色
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    +
    -
    +
    +

    Indigo テーマ

    +

    Flat ボタン

    + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    $shadow-colorシャドウの色
    +

    Contained ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $active-foregroundアクティブ時の前景の色
    $shadow-colorシャドウの色
    $disabled-background無効な背景の色
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    +

    Outlined ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    $border-color境界線の色
    $hover-border-colorホバー時の境界線の色
    $focus-border-colorフォーカス時の境界線の色
    $focus-visible-border-colorフォーカス表示の境界線の色
    $active-border-colorアクティブ時の境界線の色
    $shadow-colorシャドウの色
    +

    FAB ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $disabled-background無効な背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $active-foregroundアクティブ時の前景の色
    $shadow-colorシャドウの色
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    +
    +
    +
    -ボタンにスタイルを設定する別の方法は、**Sass** と [`button-theme`]({environment:sassApiUrl}/index.html#function-button-theme) 関数を使用することです。 +> **注:** 結果の依存プロパティは、選択したテーマ (Material、Fluent、Bootstrap、Indigo) によって若干異なる場合があります。 **Sass** を使用してボタンのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 @@ -345,8 +1483,68 @@ $custom-contained-theme: contained-button-theme( iframe-src="{environment:demosBaseUrl}/data-entries/buttons-style/" > -> [!NOTE] -> サンプルでは、[Bootstrap Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します。 ボタンにはタイプがあるため、クラスは次のように使用されます: `light-contained-button`、`light-flat-button`、`dark-outlined-button`、`dark-fab-button`。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは [button-theme]({environment:sassApiUrl}/themes#function-button-theme) で確認できます。これはさまざまなバリエーションで異なって反映されます。`flat` ボタンと `outlined` ボタンの主なプロパティは `$foreground` で、`contained` ボタンと `fab` ボタンの主なプロパティは `$background` です。構文は次のとおりです: + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、button は次のようになります: + +
    + +
    ### カスタム サイズ変更 diff --git a/jp/components/calendar.md b/jp/components/calendar.md index bb3a3a0889..d578f9d586 100644 --- a/jp/components/calendar.md +++ b/jp/components/calendar.md @@ -361,7 +361,7 @@ Tab キーを使用してページを移動する場合、*igxCalendarComponent* - [翌月] ボタン - 日ビューの選択した日付、現在の日付、最初のフォーカス可能な (無効ではない) 日付 -複数の選択された日付を含む Angular Calendar では、最初の日付のみがタブ位置として導入されます。たとえば、Angular Calendar の複数選択が有効で、日付を選択した場合: **2020 年 10 月 13 日**、**2020 年 10 月 17 日**および **2020 年 10 月 21 日**のみは、タブ ナビゲーション中にアクセスできます。Angular Calendar 範囲ピッカーでは、選択した範囲の最初の日付のみがページ タブ シーケンスの一部になります。 +複数の選択された日付を含む Angular Calendar では、最初の日付のみがタブ位置として導入されます。たとえば、Angular Calendar の複数選択が有効で、日付を選択した場合: **2020 年 10 月 13 日**、**2020 年 10 月 17 日**および **2020 年 10 月 21 日**のみは、タブ ナビゲーション中にアクセスできます。Angular Calendar 範囲ピッカーでは、選択した範囲の最初の日付のみがページ タブ シーケンスの一部になります。 >[!NOTE] > *V10.2.0* からの動作変更- 日ビューの Tab キー ナビゲーションは使用できなくなりました。日付ビューの日付間を移動するには、矢印キーを使用します。 @@ -457,6 +457,308 @@ export class CalendarSample9Component { ## スタイル設定 +### Calendar テーマのプロパティ マップ + +`$header-background` プロパティと `$content-background` プロパティを変更すると、関連するすべての theme プロパティが自動的に調整され、カレンダー コンポーネントのスタイルが一貫して設定されます。影響を受ける theme プロパティの詳細な概要については、以下の表を参照してください。 + +
    + + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-foregroundカレンダー ヘッダーのテキストの色
    $picker-hover-foregroundピッカーのホバー前景
    $picker-focus-foregroundピッカーのフォーカス前景
    $navigation-hover-colorナビゲーションのホバー色
    $navigation-focus-colorナビゲーションのフォーカス色
    $date-selected-background選択された日付の背景
    $date-selected-current-background選択された日付の背景
    $date-selected-foreground選択した日付の前景
    $date-selected-current-foreground選択した現在の日付の前景
    $date-selected-current-border-color選択している現在の日付の境界線の色
    $date-selected-special-border-color選択している現在の特別な日付の境界線の色
    $ym-selected-background選択した年/月の背景
    $ym-selected-hover-background選択した日付の年/月のホバー背景
    $ym-selected-current-background現在選択されている年/月の背景
    $ym-selected-current-hover-background現在選択されている年/月のホバー背景
    $ym-selected-foreground選択した年/月の前景
    $ym-selected-hover-foreground選択した年/月のホバー前景
    $ym-selected-current-foreground現在選択されている年/月の前景
    $ym-selected-current-hover-foreground現在選択されている年/月のホバー前景
    $content-background
    		$content-foregroundカレンダー コンテンツ領域内のテキストとアイコンの色
    $weekend-color週末の色
    $inactive-color有効範囲外の日付の色
    $weekday-color曜日ラベルの色
    $picker-backgroundピッカーの背景
    $date-hover-backgroundホバー時の日付の背景
    $date-hover-foregroundホバー時の日付の前景
    $date-focus-backgroundフォーカス時の日付の背景
    $date-focus-foregroundフォーカス時の日付の前景
    $date-current-background現在の日付の背景
    $date-current-foreground現在の日付の前景
    $date-current-border-color現在の日付の境界線の色
    $ym-current-background現在の年/月の背景
    $ym-current-hover-background現在の年/月のホバー時の背景
    $ym-current-foreground現在の年/月の前景
    $ym-current-hover-foreground現在の年/月のホバー時の前景
    $date-selected-range-background選択範囲の背景
    $date-selected-range-foreground選択した日付範囲の前景
    $date-selected-current-range-background現在選択されている日付範囲の背景
    $date-selected-current-range-hover-background現在選択されている日付範囲のホバー時の背景
    $date-selected-current-range-focus-background現在選択されている日付範囲のフォーカス時の背景
    $date-selected-current-range-foreground現在選択されている日付範囲の前景
    $date-special-foreground特別な日付の前景
    $date-special-border-color特別な日付の境界線の色
    $date-special-hover-border-color特別な日付のホバー境界線の色
    $date-special-focus-foreground特別な日付のフォーカス背景
    $date-special-range-foreground特別な日付範囲の前景
    $date-special-range-border-color特別な日付範囲の境界線の色
    $date-special-range-hover-background特別な日付範囲のホバー背景
    $date-selected-special-border-color選択している現在の特別な日付の境界線の色
    $date-selected-special-hover-border-colorホバー時の特別な日付 (選択) の境界線の色
    $date-selected-special-focus-border-colorフォーカス時の特別な日付 (選択) の境界線の色
    $date-disabled-foreground無効な日付の前景
    $date-disabled-range-foreground無効な範囲の前景
    $date-border-radius
    		$date-range-border-radius日付範囲の境界の半径を制御します
    $date-current-border-radius現在の日付の境界線の半径を制御します
    $date-special-border-radius特別な日付の境界線の半径を制御します
    $date-border-radius指定されておらず、$date-range-border-radius が設定されている場合は、$date-range-border-radius の値が使用されます
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-foregroundカレンダー ヘッダーのテキストの色
    $picker-hover-foregroundピッカーのホバー前景
    $picker-focus-foregroundピッカーのフォーカス前景
    $date-current-background現在の日付の背景
    $date-current-hover-foregroundホバー時の現在の日付の前景
    $date-current-focus-foregroundフォーカス時の現在の日付の前景
    $date-selected-current-foreground現在選択されている日付の前景
    $date-selected-current-hover-foregroundホバー時の現在選択されている日付の前景
    $date-selected-current-focus-foregroundフォーカス時の現在選択されている日付の前景
    $date-special-border-color特別な日付の境界線の色
    $date-special-hover-foreground特別な日付のホバー背景
    $content-background
    		$content-foregroundカレンダー コンテンツ領域内のテキストとアイコンの色
    $weekend-color週末の色
    $inactive-color有効範囲外の日付の色
    $weekday-color曜日ラベルの色
    $picker-backgroundピッカーの背景
    $date-hover-backgroundホバー時の日付の背景
    $date-hover-foregroundホバー時の日付の前景
    $date-focus-backgroundフォーカス時の日付の背景
    $date-focus-foregroundフォーカス時の日付の前景
    $date-selected-background選択された日付の背景
    $date-selected-hover-background選択した日付のホバー背景
    $date-selected-focus-background選択した日付のフォーカス背景
    $date-selected-foreground選択した日付の前景
    $date-selected-hover-foreground選択した日付のホバー前景
    $date-selected-focus-foreground選択した日付のフォーカス前景
    $date-selected-range-background選択した日付範囲の背景
    $date-selected-range-foreground選択した日付範囲の前景
    $date-disabled-foreground無効な日付の前景
    $date-disabled-range-foreground無効な範囲の前景
    $date-border-radius
    		$date-range-border-radius日付範囲の境界の半径を制御します
    $date-current-border-radius現在の日付の境界線の半径を制御します
    $date-special-border-radius特別な日付の境界線の半径を制御します
    $date-border-radius指定されておらず、$date-range-border-radius が設定されている場合は、$date-range-border-radius の値が使用されます
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-foregroundカレンダー ヘッダーのテキストの色
    $picker-backgroundピッカーの背景
    $picker-hover-foregroundピッカーのホバー前景
    $weekday-color曜日ラベルの色
    $picker-focus-foregroundピッカーのフォーカス前景
    $date-special-border-color特別な日付の境界線の色
    $date-special-focus-foreground特別な日付のフォーカス背景
    $content-background
    		$content-foregroundカレンダー コンテンツ領域内のテキストとアイコンの色
    $weekend-color週末の色
    $inactive-color有効範囲外の日付の色
    $weekday-color曜日ラベルの色
    $date-hover-backgroundホバー時の日付の背景
    $date-hover-foregroundホバー時の日付の前景
    $date-focus-backgroundフォーカス時の日付の背景
    $date-focus-foregroundフォーカス時の日付の前景
    $date-current-background現在の日付の背景
    $date-current-foreground現在の日付の前景
    $date-current-border-color現在の日付の境界線の色
    $date-selected-background選択された日付の背景
    $date-selected-current-background現在選択されている日付の背景
    $date-selected-foreground選択した日付の前景
    $date-selected-current-foreground現在選択されている日付の前景
    $date-selected-special-border-color選択している現在の特別な日付の境界線の色
    $date-selected-special-hover-border-colorホバー時の特別な日付 (選択) の境界線の色
    $date-selected-special-focus-border-colorフォーカス時の特別な日付 (選択) の境界線の色
    $date-selected-range-background選択した日付範囲の背景
    $date-selected-range-foreground選択した日付範囲の前景
    $date-disabled-foreground無効な日付の前景
    $date-disabled-range-foreground無効な範囲の前景
    $date-border-radius
    		$date-range-border-radius日付範囲の境界の半径を制御します
    $date-current-border-radius現在の日付の境界線の半径を制御します
    $date-special-border-radius特別な日付の境界線の半径を制御します
    $date-border-radius指定されておらず、$date-range-border-radius が設定されている場合は、$date-range-border-radius の値が使用されます
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-foregroundカレンダー ヘッダーのテキストの色
    $picker-backgroundピッカーの背景
    $picker-hover-foregroundピッカーのホバー前景
    $picker-focus-foregroundピッカーのフォーカス前景
    $navigation-hover-colorナビゲーションのホバー色
    $navigation-focus-colorナビゲーションのフォーカス色
    $date-current-background現在の日付の背景
    $date-current-border-color現在の日付の境界線の色
    $date-current-hover-background現在の日付にホバーした時の背景
    $date-current-hover-border-color現在の日付にホバーした時の境界線の色
    $date-current-focus-background現在の日付のフォーカス時の背景
    $date-current-focus-border-color現在の日付のフォーカス時の境界線の色
    $date-current-foreground現在の日付の前景
    $date-current-hover-foreground現在の日付にホバーした時の前景
    $date-current-focus-foreground現在の日付のフォーカス時の前景
    $date-selected-current-border-color現在選択されている日付の境界線の色
    $content-background
    		$content-foregroundカレンダー コンテンツ領域内のテキストとアイコンの色
    $weekend-color週末の色
    $inactive-color有効範囲外の日付の色
    $weekday-color曜日ラベルの色
    $date-hover-backgroundホバー時の日付の背景
    $date-hover-foregroundホバー時の日付の前景
    $date-focus-backgroundフォーカス時の日付の背景
    $date-focus-foregroundフォーカス時の日付の前景
    $date-selected-background選択された日付の背景
    $date-selected-current-background現在選択されている日付の背景
    $date-selected-foreground選択した日付の前景
    $date-selected-current-foreground現在選択されている日付の前景
    $date-selected-current-border-color現在選択されている日付の境界線の色
    $date-selected-range-background選択した日付範囲の背景
    $date-selected-range-foreground選択した日付範囲の前景
    $date-selected-current-range-background選択した範囲内の現在の日付の背景
    $date-selected-current-range-hover-backgroundホバー時の選択した範囲内の日付の背景
    $date-selected-current-range-foreground選択した範囲内の現在の日付の前景
    $date-disabled-foreground無効な日付の前景
    $date-disabled-range-foreground無効な範囲の前景
    $date-border-radius
    		$date-range-border-radius日付範囲の境界の半径を制御します
    $date-current-border-radius現在の日付の境界線の半径を制御します
    $date-special-border-radius特別な日付の境界線の半径を制御します
    $date-border-radius指定されておらず、$date-range-border-radius が設定されている場合は、$date-range-border-radius の値が使用されます
    +
    +
    +
    + カレンダーのスタイル設定を開始するには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -466,7 +768,7 @@ export class CalendarSample9Component { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme) を拡張し、`$header-background` と `$content-background` のみを指定して新しいテーマを作成します。これにより、インタラクション状態に応じた色やコントラストのある前景色が自動的に算出されます。必要に応じて任意のテーマ パラメーターをオーバーライドすることも可能です。 +最もシンプルな方法として、[`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme) を拡張し、`$header-background` と `$content-background` のみを指定して新しいテーマを作成します。これにより、インタラクション状態に応じた色やコントラストのある前景の色が自動的に算出されます。必要に応じて任意のテーマ パラメーターをオーバーライドすることも可能です。 ```scss $custom-calendar-theme: calendar-theme( @@ -489,6 +791,45 @@ $custom-calendar-theme: calendar-theme( iframe-src="{environment:demosBaseUrl}/scheduling/calendar-styling-sample/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `calendar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-calendar`、`dark-calendar`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、calendar は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/card.md b/jp/components/card.md index a958224b48..1bf0d4f630 100644 --- a/jp/components/card.md +++ b/jp/components/card.md @@ -7,7 +7,7 @@ _language: ja # Angular Card (カード) コンポーネントの概要

    -Angular Card は、タイトル テキスト、説明、画像スタイル、CTA (行動喚起) ボタン、リンクなどのさまざまな要素を持つ柔軟なコンテナーを表します。特定のシナリオ/コンテンツを可能な限り最適な方法で表現するために、さまざまな表示オプション、ヘッダー、フッター、背景色、アニメーションなどを提供します。 +Angular Card は、タイトル テキスト、説明、画像スタイル、CTA (行動喚起) ボタン、リンクなどのさまざまな要素を持つ柔軟なコンテナーを表します。特定のシナリオ/コンテンツを可能な限り最適な方法で表現するために、さまざまな表示オプション、ヘッダー、フッター、背景の色、アニメーションなどを提供します。 この軽量の Angular Card コンポーネントは、あらゆる種類のカードの作成に使用されます。その中には、名刺、マテリアル フリッピング カード、スタック カードなどがあります。

    @@ -330,24 +330,44 @@ Angular Card の操作領域では、すでに説明したコンテンツに追 ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してカードの外観をカスタマイズする方法です。 - -```css -igx-card { - --border-radius: 8px; - --outline-color: #f0f0f0; - --background: #bfbfbf; - --header-text-color: #000; -} -``` - -これらの CSS 変数の値を変更することで、カード コンポーネントの全体的な外観を変更できます。 - -
    - -カードにスタイルを設定する別の方法は、**Sass** と [`card-theme`]({environment:sassApiUrl}/index.html#function-card-theme) 関数を使用することです。 - -**Sass** を使用してカードのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Card テーマのプロパティ マップ + +`$background` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$header-text-colorカード タイトルのテキストの色
    $subtitle-text-colorカードのサブタイトルのテキストの色
    $content-text-colorカード コンテンツのテキストの色
    $actions-text-colorカード ボタンのテキストの色
    + +カードのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントのミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -356,29 +376,73 @@ igx-card { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`card-theme`]({environment:sassApiUrl}/themes#function-card-theme) を拡張し、少数のスタイル パラメーターのみを指定して新しいテーマを作成します。`$background` パラメーターのみを指定した場合でも、適切な前景色 (黒または白) が自動的に選ばれて割り当てられます。 +最もシンプルな方法として、[`card-theme`]({environment:sassApiUrl}/themes#function-card-theme) を拡張し、少数のスタイル パラメーターのみを指定して新しいテーマを作成します。`$background` パラメーターのみを指定した場合でも、適切な前景の色 (黒または白) が自動的に選ばれて割り当てられます。 ```scss -$custom-card-theme: card-theme( +$colorful-card: card-theme( $background: #011627, $subtitle-text-color: #ecaa53, ); ``` -最後に、カスタム テーマをアプリケーションに**含めます**。 +ご覧のとおり、`card-theme` は項目の基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。 + +最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss @include css-vars($custom-card-theme); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用したカード コンポーネントが、[`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) デザイン システムのカードに視覚的に似たデザインを実現している様子を確認できます。 +以下のサンプルでは、カスタマイズした CSS 変数を使用したカード コンポーネントが、[`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) デザイン システムのカードに視覚的に似たデザインを実現している様子を確認できます。 + - +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `card` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 + +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-card`、`dark-card`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[card-theme]({environment:sassApiUrl}/themes#function-card-theme) で確認できます。構文は次のとおりです: + +```html + +... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、card は次のようになります: + +
    + +
    + ### まとめ このトピックでは Card コンポーネントの詳細について説明しました。最初にテキスト コンテンツのみを含むベーシックなカードを作成しました。次に画像を追加しました。他の Ignite UI for Angular コンポーネントをカードで使用して、アバター、ボタン、およびアイコンを追加して機能性を向上しました。最後に公開されたテーマの色を設定してカスタムパレットを作成、スキーマを拡張してカードのテーマを変更しました。 カード コンポーネントはその他のレイアウトも表示できます。詳細については、このトピックの最初の部分の Card デモを参照してください。 diff --git a/jp/components/carousel.md b/jp/components/carousel.md index 7c7a4e0ba0..5588d2ce39 100644 --- a/jp/components/carousel.md +++ b/jp/components/carousel.md @@ -408,10 +408,10 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
    $button-background
    $button-hover-background - ホバー時のボタンの背景色 + ホバー時のボタンの背景の色 $button-arrow-colorボタン矢印の色 - $button-disabled-background無効状態のボタンの背景色 + $button-disabled-background無効状態のボタンの背景の色 $indicator-focus-color
    ($indicator-background が指定されていない場合)フォーカス時のインジケーターの色 $button-hover-background @@ -472,10 +472,10 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
    $button-background
    $button-hover-background - ホバー時のボタンの背景色 + ホバー時のボタンの背景の色 $button-arrow-colorボタン矢印の色 - $button-disabled-background無効状態のボタンの背景色 + $button-disabled-background無効状態のボタンの背景の色 $button-focus-border-colorフォーカス時のボタンの境界線の色 $indicator-focus-color
    ($indicator-background が指定されていない場合)フォーカス時のインジケーターの色 @@ -532,10 +532,10 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
    $button-background
    $button-hover-background - ホバー時のボタンの背景色 + ホバー時のボタンの背景の色 $button-arrow-colorボタン矢印の色 - $button-disabled-background無効状態のボタンの背景色 + $button-disabled-background無効状態のボタンの背景の色 $button-focus-border-colorフォーカス時のボタンの境界線の色 $indicator-focus-color
    ($indicator-background が指定されていない場合)フォーカス時のインジケーターの色 @@ -592,11 +592,11 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
    $button-background
    $button-hover-background - ホバー時のボタンの背景色 + ホバー時のボタンの背景の色 $button-border-colorボタンの境界線の色 $button-arrow-colorボタン矢印の色 - $button-disabled-background無効状態のボタンの背景色 + $button-disabled-background無効状態のボタンの背景の色 $indicator-active-dot-color
    ($indicator-background が指定されていない場合)アクティブ時のインジケーターの点の色 $button-hover-background @@ -665,7 +665,7 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[carousel-theme]({environment:sassApiUrl}/themes#function-carousel-theme) を拡張した新しいテーマを作成し、`$button-background` や `$indicator-background` などのいくつかの基本パラメーターを指定するだけで、テーマは適切な状態別カラーとコントラストのある前景色を自動生成します。外観をさらに調整したい場合は、他の任意のパラメーターをオーバーライドすることも可能です。 +最もシンプルな方法として、[carousel-theme]({environment:sassApiUrl}/themes#function-carousel-theme) を拡張した新しいテーマを作成し、`$button-background` や `$indicator-background` などのいくつかの基本パラメーターを指定するだけで、テーマは適切な状態別カラーとコントラストのある前景の色を自動生成します。外観をさらに調整したい場合は、他の任意のパラメーターをオーバーライドすることも可能です。 ```scss $carousel-theme: carousel-theme( diff --git a/jp/components/charts/features/chart-navigation.md b/jp/components/charts/features/chart-navigation.md index 501ea2a493..85ab7d3483 100644 --- a/jp/components/charts/features/chart-navigation.md +++ b/jp/components/charts/features/chart-navigation.md @@ -35,7 +35,7 @@ Ignite UI for Angular チャートを使用すると、マウス、キーボー Angular データ チャートのナビゲーションは、タッチ、マウスまたはキーボードのいずれかを使用して発生します。以下の操作は、デフォルトで以下のタッチ、マウスまたはキーボード操作を使用して呼び出すことができます。 -* **パン**: キーボードの矢印キーを使用するか、Shift キーを押したまま、マウスでクリックしてドラッグするか、タッチで指を押して移動します。 +* **パン**: キーボードの 🡐 🡒 🡑 🡓 矢印キーを使用するか、SHIFT キーを押したまま、マウスでクリックしてドラッグするか、タッチで指を押して移動します。 * **ズームイン**: キーボードの PAGE UP キーを使用するか、マウスホイールを上に回転させるか、ピンチしてタッチでズームインします。 * **ズームアウト**: キーボードの PAGE DOWN キーを使用するか、マウスホイールを下に回転させるか、ピンチしてタッチでズームアウトします。 * **チャート プロット領域に合わせる**: キーボードのホームキーを使用します。これに対するマウスまたはタッチ操作はありません。 diff --git a/jp/components/checkbox.md b/jp/components/checkbox.md index efa771edcc..e82b17981c 100644 --- a/jp/components/checkbox.md +++ b/jp/components/checkbox.md @@ -227,32 +227,97 @@ public toggleAll() { ## スタイル設定 - -最も簡単な方法は、CSS 変数を使用してチェックボックスの外観をカスタマイズする方法です。 - -```css -igx-checkbox { - --tick-color: #0064d9; - --tick-color-hover: #e3f0ff; - --fill-color: transparent; - --fill-color-hover: #e3f0ff; - --label-color: #131e29; - --focus-outline-color: #0032a5; - --border-radius: 0.25rem; -} - -igx-checkbox:hover { - --empty-fill-color: #e3f0ff; -} -``` - -これらの CSS 変数の値を変更することで、チェックボックス コンポーネントの全体的な外観を変更できます。 - -
    - -チェックボックスにスタイルを設定する別の方法は、**Sass** と [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) 関数を使用することです。 - -**Sass** を使用してチェックボックスのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Checkbox テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    +
    $empty-color +
    +     		$empty-color-hoverホバー時の未チェック境界線の色
    $focus-outline-color (indigo バリエーションのみ)Indigo バリエーションのフォーカス アウトライン色
    +
    $fill-color +
    +     		$fill-color-hoverホバー時にチェックされた境界線と塗りつぶしの色
    $tick-colorチェックされたマークの色
    $focus-border-colorフォーカス境界線の色
    $disabled-indeterminate-color不確定な状態時の無効な境界線と塗りつぶし色
    $focus-outline-color (bootstrap バリエーションのみ)Bootstrap バリエーションのフォーカス アウトライン色
    $focus-outline-color-focused (indigo バリエーションのみ)Indigo バリエーションのフォーカス状態のフォーカス アウトライン色
    +
    $error-color +
    +     		$error-color-hoverホバー時に無効な状態の境界線と塗りつぶしの色
    $focus-outline-color-errorエラー状態のフォーカス アウトライン色
    + $label-color + $label-color-hoverホバー時のラベルのテキストの色
    + +> **注:** 実際の結果はテーマのバリエーションによって異なる場合があります。 + +チェックボックスのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -261,7 +326,7 @@ igx-checkbox:hover { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -次に、[`checkbox-theme`]({environment:sassApiUrl}/themes#function-checkbox-theme) を拡張して新しいテーマを作成し、チェックボックス要素をスタイリングします。`$empty-color` と `$fill-color` を指定することで、必要な状態色やコントラストのある前景色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 +次に、[`checkbox-theme`]({environment:sassApiUrl}/themes#function-checkbox-theme) を拡張して新しいテーマを作成し、チェックボックス要素をスタイリングします。`$empty-color` と `$fill-color` を指定することで、必要な状態色やコントラストのある前景の色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 ```scss // in styles.scss @@ -286,12 +351,50 @@ $custom-checkbox-theme: checkbox-theme( iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-styling/" > -> [!NOTE] -> サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `checkbox` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-checkbox`、`dark-checkbox`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[checkbox-theme]({environment:sassApiUrl}/themes#function-checkbox-theme) で確認できます。構文は次のとおりです: + +```html + + Styled checkbox + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、checkbox は次のようになります: + +
    + +
    ## API リファレンス +
    * [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) @@ -299,9 +402,11 @@ $custom-checkbox-theme: checkbox-theme( * [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html) ## テーマの依存関係 + * [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-riple-theme) ## その他のリソース +
    コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/chip.md b/jp/components/chip.md index e8f15b7ffc..6f844d7118 100644 --- a/jp/components/chip.md +++ b/jp/components/chip.md @@ -482,23 +482,126 @@ public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してチップの外観をカスタマイズする方法です。 - -```css -igx-chip { - --background: #cd201f; - --hover-background: #cd201f; - --focus-background: #9f1717; - --text-color: #fff; -} -``` -これらの CSS 変数の値を変更することで、チップ コンポーネントの全体的な外観を変更できます。 - -
    - -チップにスタイルを設定する別の方法は、**Sass** と [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) 関数を使用することです。 - -**Sass** を使用してチップのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Chip テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$text-colorチップのテキストの色
    $border-colorチップの境界線の色
    $hover-backgroundチップ ホバーの背景の色
    $hover-border-colorホバー時のチップの境界線の色
    $hover-text-colorホバー時のチップのテキストの色
    $focus-backgroundチップのフォーカスの背景の色
    $selected-background選択時のチップの背景の色
    $focus-background
    		$focus-text-colorチップのテキスト フォーカスの色
    $focus-border-colorチップのフォーカス境界線の色
    $focus-outline-color (bootstrap および indigo バリエーションのみ)チップのフォーカス アウトラインの色
    $selected-background
    		$selected-text-color選択されたチップのテキストの色
    $selected-border-color選択されたチップの境界線の色
    $hover-selected-background選択されたチップのホバーの背景の色
    $hover-selected-background
    		$hover-selected-text-color選択されたチップのホバー テキストの色
    $hover-selected-border-color選択されたチップのホバー境界線の色
    $focus-selected-background選択されたチップのフォーカスの背景の色
    $focus-selected-background
    		$focus-selected-text-color選択されたチップのテキスト フォーカスの色
    $focus-selected-border-color選択されたチップのフォーカス境界線の色
    $focus-selected-outline-color (bootstrap および indigo バリエーションのみ)選択時のチップのフォーカス アウトライン色
    + +チップのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントのミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -507,7 +610,7 @@ igx-chip { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) を拡張して新しいテーマを作成し、チップの項目をスタイリングします。`$background` または `$selected-background` を指定することで、状態に応じた色や前景色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 +最もシンプルな方法として、[`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) を拡張して新しいテーマを作成し、チップの項目をスタイリングします。`$background` または `$selected-background` を指定することで、状態に応じた色や前景の色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 ```scss $custom-chip-theme: chip-theme( @@ -532,6 +635,48 @@ $custom-chip-theme: chip-theme( iframe-src="{environment:demosBaseUrl}/data-display/chip-styling/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して chip をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 + +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-chip`、`dark-chip`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[chip-theme]({environment:sassApiUrl}/themes#function-chip-theme) で確認できます。構文は次のとおりです: + +```html + + {{chip.text}} + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、chip は次のようになります: + +
    + +
    + ### カスタム サイズ変更 `igx-chip` を直接ターゲットとして `--size` 変数を使用することができます。 diff --git a/jp/components/combo.md b/jp/components/combo.md index 0a2c395dfc..a3c9126f86 100644 --- a/jp/components/combo.md +++ b/jp/components/combo.md @@ -278,6 +278,67 @@ public singleSelection(event: IComboSelectionChangeEventArgs) { ## スタイル設定 +### Combo テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $empty-list-background$empty-list-placeholder-colorコンボ プレースホルダー テキストの色
    $toggle-button-background
    		$toggle-button-foregroundコンボ トグル ボタンの前景の色
    $toggle-button-background-focusフォーカス時のコンボ トグル ボタンの背景の色
    $toggle-button-background-focus--borderフォーカス時のコンボ トグル ボタン (border バリエーション) の背景の色
    $toggle-button-foreground-filledオンの時のコンボ トグル ボタンの前景の色
    $toggle-button-background-disabled無効なコンボ トグル ボタンの背景の色
    $toggle-button-foreground-disabled無効なコンボ トグル ボタンの前景の色
    $toggle-button-background-focus$toggle-button-foreground-focusフォーカス時のコンボ トグル ボタンの前景の色
    $clear-button-background-focus$clear-button-foreground-focusフォーカス時のコンボ クリア ボタンの前景の色
    + [`Ignite UI for Angular テーマ`](themes/index.md)を使用して、コンボボックスの外観を変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 ```scss @@ -287,7 +348,7 @@ public singleSelection(event: IComboSelectionChangeEventArgs) { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`combo-theme`]({environment:sassApiUrl}/themes#function-combo-theme) を拡張する新しいテーマを作成します。`$toggle-button-background` を設定することで、新しいテーマがボタンに対する状態色や前景色を自動的に決定します。必要に応じて、`$search-separator-border-color` などの追加パラメーターを指定することも可能です。 +最もシンプルな方法として、[`combo-theme`]({environment:sassApiUrl}/themes#function-combo-theme) を拡張する新しいテーマを作成します。`$toggle-button-background` を設定することで、新しいテーマがボタンに対する状態色や前景の色を自動的に決定します。必要に応じて、`$search-separator-border-color` などの追加パラメーターを指定することも可能です。 ```scss $custom-combo-theme: combo-theme( @@ -337,6 +398,44 @@ $custom-checkbox-theme: checkbox-theme(
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `combo` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-combo`、`dark-combo`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[combo-theme]({environment:sassApiUrl}/themes#function-combo-theme) で確認できます。構文は次のとおりです: + +```html + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、combo は次のようになります: + +
    + +
    + ## 既知の問題 - 選択した項目を表示するコンボボックス入力は編集できません。ただし、IE および FireFox のブラウザー仕様により、カーソルは表示されます。 diff --git a/jp/components/dialog.md b/jp/components/dialog.md index da09fc6f2f..e05f102d9a 100644 --- a/jp/components/dialog.md +++ b/jp/components/dialog.md @@ -252,6 +252,39 @@ params: { ## スタイル設定 +### Dialog テーマのプロパティ マップ + +`$background` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    +
    $background
    +     		$title-colorダイアログ タイトル テキストの色
    $message-colorダイアログ メッセージ テキストの色
    $border-colorダイアログ コンポーネントに使用される境界線の色
    + ダイアログ ウィンドウのスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをはじめにインポートする必要があります。 ```scss diff --git a/jp/components/drop-down.md b/jp/components/drop-down.md index f513a58636..18941aed85 100644 --- a/jp/components/drop-down.md +++ b/jp/components/drop-down.md @@ -497,6 +497,122 @@ export class InputDropDownComponent { ## スタイル設定 +### Dropdown テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    +
    $background-color
    +     		$item-text-colorドロップダウン項目のテキストの色
    $hover-item-backgroundドロップダウン ホバー項目の背景の色
    $focused-item-backgroundドロップダウン フォーカスされた項目の背景の色
    $focused-item-text-colorドロップダウン フォーカスされた項目のテキストの色
    $selected-item-backgroundドロップダウン選択された項目の背景の色
    $disabled-item-text-colorドロップダウンが無効にされた項目のテキストの色
    $header-text-colorドロップダウン ヘッダー テキストの色
    +
    $item-text-color
    +     		$item-icon-colorドロップダウン項目のアイコンの色
    $hover-item-text-colorドロップダウン項目のホバーのテキストの色
    $hover-item-icon-colorドロップダウン項目のホバーのアイコンの色
    +
    $selected-item-background
    +     		$selected-item-text-colorドロップダウン選択された項目のテキストの色
    $selected-item-icon-color選択されたドロップダウン項目のアイコンの色
    $selected-hover-item-backgroundドロップダウン選択された項目ホバーの背景の色
    $selected-hover-item-text-colorドロップダウン選択された項目ホバーのテキストの色
    $selected-hover-item-icon-color選択されたドロップダウン項目のホバーのアイコンの色
    $selected-focus-item-backgroundドロップダウン選択された項目フォーカスの背景の色
    $selected-focus-item-text-colorドロップダウン選択された項目フォーカスのテキストの色
    $focused-item-border-colorドロップダウン項目のフォーカス境界線の色
    + [Ignite UI for Angular テーマ](themes/index.md) を使用して、ドロップダウンの外観を変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 ```scss @@ -506,7 +622,7 @@ export class InputDropDownComponent { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`drop-down-theme`]({environment:sassApiUrl}/themes#function-drop-down-theme) を拡張し、既定のテーマ パラメーターの一部を指定することで、新しいテーマを作成します。背景色を指定するだけで、インタラクション状態の色や適切な前景色が自動的に計算されます。`$background` プロパティを設定すると、完全にスタイル設定されたドロップダウンが表示されます。 +最もシンプルな方法として、[`drop-down-theme`]({environment:sassApiUrl}/themes#function-drop-down-theme) を拡張し、既定のテーマ パラメーターの一部を指定することで、新しいテーマを作成します。背景の色を指定するだけで、インタラクション状態の色や適切な前景の色が自動的に計算されます。`$background` プロパティを設定すると、完全にスタイル設定されたドロップダウンが表示されます。 ```scss $custom-drop-down-theme: drop-down-theme( diff --git a/jp/components/expansion-panel.md b/jp/components/expansion-panel.md index 69081c4287..da265ef128 100644 --- a/jp/components/expansion-panel.md +++ b/jp/components/expansion-panel.md @@ -212,7 +212,58 @@ Angular Expansion Panel は、パネルの縮小時に「更に表示」を描 -## スタイル設定 +## スタイル設定 + +### Expansion Panel テーマのプロパティ マップ + +`$header-background` プロパティと `$body-background` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-title-colorパネル ヘッダー タイトル テキストの色
    $header-icon-colorパネル ヘッダーのアイコンの色
    $header-description-colorパネル ヘッダー 説明のテキストの色
    $header-focus-backgroundパネル ヘッダー フォーカスの背景の色
    $disabled-text-colorパネルが無効なテキストの色
    $disabled-description-color無効になっているパネル ヘッダーの説明のテキストの色
    $body-background$body-colorパネル本文テキストの色
    ### パレットおよび色 はじめに、後でコンポーネントに渡すカスタム パレットを作成します。 @@ -290,6 +341,46 @@ Ignite UI テーマ エンジンの使用方法の詳細については、[`こ iframe-src="{environment:demosBaseUrl}/layouts/expansion-styling/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して expansion panel をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-expansion-panel`、`dark-expansion-panel`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[expansion-panel-theme]({environment:sassApiUrl}/themes#function-expansion-panel-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、expansion panel は次のようになります: + +
    + +
    + ## Angular Expansion Panel のアニメーション ### 特定のアニメーションの使用 コンポーネントの展開や縮小時にデフォルトのアニメーション以外を使用することも可能です。 diff --git a/jp/components/general-changelog-dv.md b/jp/components/general-changelog-dv.md index e2a62f790b..664bad1377 100644 --- a/jp/components/general-changelog-dv.md +++ b/jp/components/general-changelog-dv.md @@ -21,7 +21,7 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 ### igniteui-angular-maps (地理マップ) -#### Azure マップ画像のサポート (プレビュー) +#### Azure マップ画像のサポート `GeographicMap` は、 Azure ベースのマップ画像をサポートし、開発者は複数のアプリケーション タイプにわたって詳細かつ動的なマップを表示できるようになりました。複数のマップ レイヤーを組み合わせて地理データを視覚化し、インタラクティブなマッピング エクスペリエンスを簡単に作成できます。 @@ -31,7 +31,7 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 ### igniteui-angular-charts (チャート) -#### 新しい軸ラベル イベント (プレビュー) +#### 新しい軸ラベル イベント 軸ラベルに対するさまざまな操作を検出できるように、次のイベントが `DataChart` に追加されました。 @@ -42,19 +42,23 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 * `LabelMouseMove` * `LabelMouseClick` -#### 対応軸 (プレビュー) +#### 対応軸 X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸を簡単に複製できるようになりました。`CompanionAxisEnabled` プロパティを有効にすると、複製された軸はチャートの反対側に配置され、そこから各軸プロパティを設定できます。 -#### RadialPieSeries インセット アウトライン (プレビュー) +#### RadialPieSeries インセット アウトライン [`IgxRadialPieSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html) のアウトライン レンダリング方法を制御するために [`useInsetOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html#useInsetOutlines) プロパティが追加されました。**true** に設定すると、アウトラインがスライス形状の内側に描画され、**false** (既定値) に設定すると、アウトラインはスライス形状の端に半分内側・半分外側で描画されます。 +**重大な変更** + +* [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) クラスの [`plotAreaPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#plotAreaPosition) プロパティと [`chartPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#chartPosition) プロパティが逆になっている問題が修正されました。これにより、[`plotAreaPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#plotAreaPosition) と [`chartPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#chartPosition) が返す値が変更されます。 + ### 機能拡張 #### IgxBulletGraph -* 新しい `LabelsVisible` プロパティが追加されました。(プレビュー) +* 新しい `LabelsVisible` プロパティが追加されました。 #### チャート @@ -62,19 +66,15 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 * DataLegend にスタイル設定用の新しいプロパティが追加されました: `ContentBackground`、`ContentBorderBrush`、および `ContentBorderThickness`。`ContentBorderBrush` と `ContentBorderThickness` はそれぞれ既定で transparent と 0 に設定されているため、境界線を表示するにはこれらのプロパティを設定する必要があります。 -* マウスのワールド相対位置を提供する `WorldPosition` という新しいプロパティが [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) に追加されました。この位置は、軸空間内の X 軸と Y 軸の両方に対して 0 から 1 の間の値になります。 +* マウスのワールド相対位置を提供する [`worldPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#worldPosition) という新しいプロパティが [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) に追加されました。この位置は、軸空間内の X 軸と Y 軸の両方に対して 0 から 1 の間の値になります。 * [`IgxSeriesViewerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html) と [`IgxDomainChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html) に [`highlightingFadeOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingFadeOpacity) が追加されました。ハイライト表示されたシリーズに適用される不透明度を設定できます。 * ドメイン チャートの `CalloutLabelUpdating` イベントを公開しました。 -#### IgxDataGrid - -* DataGrid に新しいプロパティ `stopPropagation` が追加されました。これにより、マウス イベントが親要素へバブリングするのを防止できます。 - #### IgxLinearGauge -* 新しい `LabelsVisible` プロパティが追加されました。(プレビュー) +* 新しい `LabelsVisible` プロパティが追加されました。 ### バグ修正 diff --git a/jp/components/general/angular-grid-overview-guide.md b/jp/components/general/angular-grid-overview-guide.md index 03826c4264..c3b04d7345 100644 --- a/jp/components/general/angular-grid-overview-guide.md +++ b/jp/components/general/angular-grid-overview-guide.md @@ -243,9 +243,9 @@ Ignite UI for Angular はコンポーネントのデザインを[マテリアル
    テーマ ウィジェットの例
    diff --git a/jp/components/general/update-guide.md b/jp/components/general/update-guide.md index 99324beb25..f33a90d736 100644 --- a/jp/components/general/update-guide.md +++ b/jp/components/general/update-guide.md @@ -969,7 +969,7 @@ $__legacy-libsass: true; ``` ご覧のとおり、`button-theme` パラメーターはボタン タイプごとに同じ名前になっているため、タイプごとに異なる色を使用するには、ボタン テーマのスコープを CSS セレクターに設定する必要があります。 -ここでは、`button-theme` のすべての[利用可能なプロパティ](https://jp.infragistics.com/products/ignite-ui-angular/docs/sass/latest/index.html#function-button-theme)を確認できます。 +ここでは、`button-theme` のすべての[利用可能なプロパティ]({environment:sassApiUrl}/themes#function-button-theme)を確認できます。 * `typography` ミックスインは `core` に暗黙的に含まれなくなりました。タイポグラフィ スタイルを使用するには、`core` の後と `theme` の前に ミックスインを明示的に含める必要があります。 diff --git a/jp/components/geo-map-display-azure-imagery.md b/jp/components/geo-map-display-azure-imagery.md index b8149382db..f94869a02c 100644 --- a/jp/components/geo-map-display-azure-imagery.md +++ b/jp/components/geo-map-display-azure-imagery.md @@ -108,24 +108,7 @@ export class AppComponent implements AfterViewInit { | プロパティ名 | プロパティ タイプ | 説明 | |----------------|-----------------|---------------| |[`apiKey`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#apiKey)|string|Azure Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは azure.microsoft.com ウェブサイトから取得してください。| -|[`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle)|[`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html)|Azure Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) 列挙値に設定できます。 - -
      -
    • Satellite - 道路またはラベルのオーバーレイなしの衛星地図スタイルを指定します。
      • -
    • Road - 道路およびラベル付きの衛星地図スタイルを指定します。
      • -
    • TerraOverlay - 標高や地形の特徴をハイライト表示する陰影起伏付きの地形マップ スタイルを指定します。
      • -
    • LabelsRoadOverlay - 航空写真オーバーレイなしで都市ラベルを表示する複数のオーバーレイの 1 つです。
      • -
    • DarkGrey - コントラストやオーバーレイのハイライト表示に適したダーク グレーのベース マップ スタイルを指定します。
      • -
    • HybridRoadOverlay - 衛星画像の背景に道路とラベルのオーバーレイを組み合わせます。
      • -
    • HybridDarkGreyOverlay - 衛星画像の背景にダーク グレーのラベル オーバーレイを組み合わせます。
      • -
    • LabelsDarkGreyOverlay - ダーク グレーのベース マップ上に都市ラベルを表示する複数のオーバーレイの 1 つです。
      • -
    • TrafficDelayOverlay - 交通遅延や渋滞エリアをリアルタイムで表示します。
      • -
    • TrafficAbsoluteOverlay - 現在の交通速度を絶対値で表示します。
      • -
    • TrafficReducedOverlay - 減少した交通流を光ベースの視覚化で表示します。
      • -
    • TrafficRelativeOverlay - 通常の状況に対する相対的な交通速度を表示します。
      • -
    • WeatherRadarOverlay - 降水のほぼリアルタイムのレーダー画像を表示します。
      • -
    • WeatherInfraredOverlay - 雲量の赤外線衛星画像を表示します。
      • -
    +|[`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle)|[`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html)|Azure Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) 列挙値に設定できます。
    • Satellite - 道路またはラベルのオーバーレイなしの衛星地図スタイルを指定します。
    • Road - 道路およびラベル付きの衛星地図スタイルを指定します。
    • DarkGrey - コントラストやオーバーレイのハイライト表示に適したダーク グレーのベース マップ スタイルを指定します。
    • TerraOverlay - 標高や地形の特徴をハイライト表示する陰影起伏付きの地形マップ スタイルを指定します。
    • LabelsRoadOverlay - 航空写真オーバーレイなしで都市ラベルを表示する複数のオーバーレイの 1 つです。
    • HybridRoadOverlay - 衛星画像の背景に道路とラベルのオーバーレイを組み合わせます。
    • HybridDarkGreyOverlay - 衛星画像の背景にダーク グレーのラベル オーバーレイを組み合わせます。
    • LabelsDarkGreyOverlay - ダーク グレーのベース マップ上に都市ラベルを表示する複数のオーバーレイの 1 つです。
    • TrafficDelayOverlay - 交通遅延や渋滞エリアをリアルタイムで表示します。
    • TrafficAbsoluteOverlay - 現在の交通速度を絶対値で表示します。
    • TrafficReducedOverlay - 減少した交通流を光ベースの視覚化で表示します。
    • TrafficRelativeOverlay - 通常の状況に対する相対的な交通速度を表示します。
    • TrafficRelativeDarkOverlay - 通常時と比較した交通速度をダーク ベースマップ上に表示し、コントラストを強調します。
    • WeatherRadarOverlay - 降水のほぼリアルタイムのレーダー画像を表示します。
    • WeatherInfraredOverlay - 雲量の赤外線衛星画像を表示します。
    ## API リファレンス diff --git a/jp/components/icon-button.md b/jp/components/icon-button.md index da8859dd02..af81c288fd 100644 --- a/jp/components/icon-button.md +++ b/jp/components/icon-button.md @@ -150,6 +150,251 @@ public ngOnInit() { ## Icon Button のスタイル設定 +### Icon Button テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + +
    + + + + + + + + +
    +
    +

    Flat アイコン ボタン

    + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカス + ホバー アイコンの色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景
    $focus-backgroundフォーカス時の背景
    $focus-hover-backgroundフォーカス + ホバー時の背景
    $active-backgroundアクティブ時の背景
    +

    Contained アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundアイコンの色
    $hover-backgroundホバー時の背景
    $focus-backgroundフォーカス時の背景
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-backgroundフォーカス + ホバー時の背景
    $active-backgroundアクティブ時の背景
    $hover-foregroundホバー時のアイコンの色
    $focus-hover-foregroundフォーカス + ホバー アイコンの色
    $active-foregroundアクティブ時のアイコンの色
    $shadow-colorフォーカス時のシャドウ
    $focus-border-colorフォーカス時の境界線の色
    $disabled-background無効時の背景
    $disabled-foreground無効なアイコンの色
    +

    Outlined アイコン ボタン

    + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカス + ホバー アイコンの色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景
    $focus-backgroundフォーカス時の背景
    $focus-hover-backgroundフォーカス + ホバー時の背景
    $active-backgroundアクティブ時の背景
    $border-colorデフォルトの境界線の色
    $focus-border-colorフォーカス時の境界線の色
    +
    +
    +

    Flat アイコン ボタン

    + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    +

    Contained アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $shadow-colorフォーカス時のシャドウの色
    $focus-border-colorフォーカス時の境界線の色
    $disabled-background無効な背景の色
    $disabled-foreground無効なアイコンの色
    +

    Outlined アイコン ボタン

    + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $border-color境界線の色
    $focus-border-colorフォーカス時の境界線の色
    +
    +
    +

    Flat アイコン ボタン

    + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $disabled-foreground無効なアイコンの色
    $shadow-colorアイコン ボタンのシャドウの色
    +

    Contained アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $shadow-colorシャドウの色
    $focus-border-colorフォーカス時の境界線の色
    $disabled-background無効な背景の色
    $disabled-foreground無効なアイコンの色
    +

    Outlined アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $border-color境界線の色
    $focus-border-colorフォーカス時の境界線の色
    $shadow-colorシャドウの色
    $disabled-foreground無効なアイコンの色
    $disabled-border-color無効なアイコン ボタンの境界線
    +
    +
    +

    Flat アイコン ボタン

    + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $disabled-foreground無効なアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $focus-border-colorフォーカス時の境界線の色
    +

    Contained アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $shadow-colorシャドウの色
    $focus-border-colorフォーカス時の境界線の色
    $disabled-background無効な背景の色
    $disabled-foreground無効なアイコンの色
    +

    Outlined アイコン ボタン

    + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景の色
    $border-color境界線の色
    $focus-border-colorフォーカス時の境界線の色
    +
    +
    +
    + 最も簡単な方法は、CSS 変数を使用してアイコン ボタンの外観をカスタマイズする方法です。 ```scss @@ -181,7 +426,7 @@ $custom-contained: contained-icon-button-theme( ); ``` -これにより、ホバー、フォーカス、アクティブなどのさまざまな状態に適した前景色と背景色を含む、完全にテーマ設定された `contained icon button` が生成されます。 +これにより、ホバー、フォーカス、アクティブなどのさまざまな状態に適した前景の色と背景の色を含む、完全にテーマ設定された `contained icon button` が生成されます。
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して icon button をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-icon-button`、`dark-icon-button`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[icon-button-theme]({environment:sassApiUrl}/themes#function-icon-button-theme) で確認できます。構文は次のとおりです: + +```html + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、icon button は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/icon.md b/jp/components/icon.md index c2f6a8073a..0d9a605d04 100644 --- a/jp/components/icon.md +++ b/jp/components/icon.md @@ -313,6 +313,40 @@ igx-icon { 詳細については、[サイズ](display-density.md)の記事をご覧ください。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `icon` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-icon`、`dark-icon`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[icon-theme]({environment:sassApiUrl}/themes#function-icon-theme) で確認できます。構文は次のとおりです: + +```html +person +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、icon は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/input-group.md b/jp/components/input-group.md index d3f7ee8ed4..af8f92c422 100644 --- a/jp/components/input-group.md +++ b/jp/components/input-group.md @@ -274,6 +274,7 @@ constructor(fb: FormBuilder) { }); } ``` + ```html @@ -308,6 +309,7 @@ public get password() { return this.registrationForm.get('password'); } ``` + ```html ... @@ -451,6 +453,306 @@ constructor(fb: FormBuilder) { ## スタイル設定 +### Input Group テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + +
    + + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $box-background
    		$box-background-hover入力ボックスのホバー背景
    $box-background-focus入力ボックスのフォーカス背景
    $box-disabled-background無効な背景
    $placeholder-colorプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $idle-text-colorデフォルトのテキストの色
    $filled-text-color入力済みの入力ボックスのテキストの色
    $filled-text-hover-colorホバー時の入力済みの入力テキストの色
    $focused-text-colorフォーカス時の入力ボックスのテキストの色
    $idle-secondary-colorアイドル時のセカンダリ テキストの色
    $input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-color--filled入力済みの入力ボックス内のプレフィックスのテキストの色
    $input-prefix-color--focusedフォーカス時の入力ボックス内のプレフィックスのテキストの色
    $input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-color--filled入力済みの入力ボックス内のサフィックスのテキストの色
    $input-suffix-color--focusedフォーカス時の入力ボックス内のサフィックスのテキストの色
    $disabled-placeholder-color無効な入力ボックスのプレースホルダーの色
    $disabled-text-color無効な入力ボックスのテキストの色
    $idle-bottom-line-color
    		$hover-bottom-line-color入力ボックスの下にある下線のホバー色
    $focused-bottom-line-colorフォーカス時の下線の色
    $focused-secondary-colorフォーカス時のラベルの色
    $border-colorBorder タイプの入力グループのための境界線の色
    $focused-border-colorBorder タイプの入力グループのフォーカス入力境界線の色
    $border-color
    		$hover-border-color入力ボックスの境界線のホバー色
    $focused-border-colorフォーカス時の入力ボックスの境界線の色
    $focused-secondary-colorフォーカス時のラベルの色
    $input-prefix-background
    		$input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-background--filled入力済みの入力プレフィックスの背景の色
    $input-prefix-background--focusedフォーカス時の入力プレフィックスの背景の色
    $input-suffix-background
    		$input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-background--filled入力済みの入力サフィックスの背景の色
    $input-suffix-background--focusedフォーカス時の入力サフィックスの背景の色
    $search-background
    		$placeholder-color検索入力内のプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $idle-text-color検索入力のテキストの色
    $idle-secondary-colorアイドル時のセカンダリ テキストの色
    $filled-text-color入力済みの検索入力のテキストの色
    $filled-text-hover-color入力済みの検索入力のホバー時テキストの色
    $focused-text-colorフォーカス時の検索入力のテキストの色
    $input-prefix-color検索入力内のプレフィックスの色
    $input-suffix-color検索入力内のサフィックスの色
    $input-prefix-color--filled入力済みの検索入力内のプレフィックスの色
    $input-suffix-color--filled入力済みの検索入力内のサフィックスの色
    $input-prefix-color--focusedフォーカス時の検索入力内のプレフィックスの色
    $input-suffix-color--focusedフォーカス時の検索入力内のサフィックスの色
    $search-disabled-background無効な検索入力の背景
    $disabled-placeholder-color無効なプレースホルダーの色
    $disabled-text-color無効なテキストの色
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $border-color
    		$hover-border-color入力ボックスの境界線のホバー色
    $focused-border-colorフォーカス時の入力ボックスの境界線の色
    $focused-secondary-colorフォーカス時のラベルの色
    $input-prefix-background
    		$input-suffix-backgroundアイドル時の入力サフィックスの背景の色
    $input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-color--filled入力済みの入力ボックス内のプレフィックスのテキストの色
    $input-suffix-background
    		$input-prefix-backgroundアイドル時の入力プレフィックスの背景の色
    $input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-color--filled入力済みの入力ボックス内のサフィックスのテキストの色
    $search-background
    		$placeholder-color検索入力内のプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $idle-secondary-colorアイドル時のセカンダリ テキストの色
    $idle-text-color検索入力のテキストの色
    $filled-text-color入力済みの検索入力のテキストの色
    $filled-text-hover-color入力済みの検索入力のホバー時テキストの色
    $focused-text-colorフォーカス時の検索入力のテキストの色
    $input-prefix-color検索入力内のプレフィックスの色
    $input-suffix-color検索入力内のサフィックスの色
    $input-prefix-color--filled入力済みの検索入力内のプレフィックスの色
    $input-suffix-color--filled入力済みの検索入力内のサフィックスの色
    $input-prefix-color--focusedフォーカス時の検索入力内のプレフィックスの色
    $input-suffix-color--focusedフォーカス時の検索入力内のサフィックスの色
    $search-disabled-background無効な検索入力の背景
    $disabled-placeholder-color無効なプレースホルダーの色
    $disabled-text-color無効なテキストの色
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $border-color
    		$focused-border-colorフォーカス時の入力ボックスの境界線の色
    $focused-secondary-colorフォーカス時のラベルの色
    $input-prefix-background
    		$input-suffix-backgroundアイドル時の入力サフィックスの背景の色
    $input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-color--filled入力済みの入力ボックス内のプレフィックスのテキストの色
    $input-suffix-background
    		$input-prefix-backgroundアイドル時の入力プレフィックスの背景の色
    $input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-color--filled入力済みの入力ボックス内のサフィックスのテキストの色
    $search-background
    		$placeholder-color検索入力内のプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $idle-secondary-colorアイドル時のセカンダリ テキストの色
    $idle-text-color検索入力のテキストの色
    $filled-text-color入力済みの検索入力のテキストの色
    $filled-text-hover-color入力済みの検索入力のホバー時テキストの色
    $focused-text-colorフォーカス時の検索入力のテキストの色
    $input-prefix-color検索入力内のプレフィックスの色
    $input-suffix-color検索入力内のサフィックスの色
    $input-prefix-color--filled入力済みの検索入力内のプレフィックスの色
    $input-suffix-color--filled入力済みの検索入力内のサフィックスの色
    $input-prefix-color--focusedフォーカス時の検索入力内のプレフィックスの色
    $input-suffix-color--focusedフォーカス時の検索入力内のサフィックスの色
    $search-disabled-background無効な検索入力の背景
    $disabled-placeholder-color無効なプレースホルダーの色
    $disabled-text-color無効なテキストの色
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $idle-bottom-line-color
    		$hover-bottom-line-color入力ボックスの下にある下線のホバー色
    $focused-bottom-line-colorフォーカス時の下線の色
    $border-color
    		$hover-border-color入力ボックスの境界線のホバー色
    $focused-border-colorフォーカス時の入力ボックスの境界線の色
    $input-prefix-background
    		$input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-background--filled入力済みの入力プレフィックスの背景の色
    $input-prefix-background--focusedフォーカス時の入力プレフィックスの背景の色
    $input-suffix-background
    		$input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-background--filled入力済みの入力サフィックスの背景の色
    $input-suffix-background--focusedフォーカス時の入力サフィックスの背景の色
    $search-background
    		$placeholder-color検索入力内のプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $box-background-hoverホバー時の検索入力の背景
    $idle-text-color検索入力のテキストの色
    $filled-text-color入力済みの検索入力のテキストの色
    $filled-text-hover-color入力済みの検索入力のホバー時テキストの色
    $focused-text-colorフォーカス時の検索入力のテキストの色
    $input-prefix-color検索入力内のプレフィックスの色
    $input-suffix-color検索入力内のサフィックスの色
    $search-disabled-background無効な検索入力の背景
    $disabled-placeholder-color無効なプレースホルダーの色
    $disabled-text-color無効なテキストの色
    +
    +
    +
    + 入力グループのスタイル設定を開始するには、`index` ファイルをスタイルファイルに含めます。 ```scss @@ -500,7 +802,61 @@ search 入力をターゲットにする場合は `.igx-input-group--search` を
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して input group をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 + +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-input-group`、`dark-input-group`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme) で確認できます。構文は次のとおりです: + +```html +
    + + +359 + + + + phone + + Ex.: +359 888 123 456 + + + + ... + + + + ... + +
    +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、input group は次のようになります: + +
    + +
    + ## API リファレンス +
    * [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) @@ -510,6 +866,7 @@ search 入力をターゲットにする場合は `.igx-input-group--search` を * [IgxInputGroupComponent スタイル]({environment:sassApiUrl}/themes#function-input-group-theme) ## テーマの依存関係 + * [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme) * [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme) diff --git a/jp/components/list.md b/jp/components/list.md index 67993566cc..60afd05bb5 100644 --- a/jp/components/list.md +++ b/jp/components/list.md @@ -606,7 +606,205 @@ igx-list-item {
    -## List コンポーネントにテーマの適用 +## スタイル設定 + +### List テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    + $background + $header-backgroundリスト ヘッダーの背景の色
    $item-backgroundリスト項目の背景の色
    + $header-background + $header-text-colorリスト ヘッダーのテキストの色
    +
    $item-background
    +     		$backgroundリストの背景の色
    $header-backgroundリスト ヘッダーの背景の色
    $item-background-hoverリスト項目ホバー 背景の色
    $item-text-colorリスト項目テキストの色
    $item-title-colorリスト項目タイトルの色
    $item-action-colorリスト項目アクションの色
    $item-thumbnail-colorリスト項目サムネイルの色
    $item-subtitle-colorリスト項目サブタイトルの色
    $border-colorリストの境界線の色 (Fluent/Bootstrap のみ)
    +
    $item-background-hover
    +     		$item-background-activeアクティブ リスト項目の背景の色
    $item-text-color-hoverリスト項目ホバー テキストの色
    $item-title-color-hoverリスト項目ホバー タイトルの色
    $item-action-color-hoverリスト項目ホバー アクションの色
    $item-thumbnail-color-hoverリスト項目ホバー サムネイルの色
    $item-subtitle-color-hoverリスト項目ホバー サブタイトルの色
    +
    $item-background-active
    +     		$item-background-selected選択されたリスト項目の背景の色
    $item-text-color-activeアクティブ リスト項目テキストの色
    $item-title-color-activeアクティブ リスト項目タイトルの色
    $item-action-color-activeアクティブ リスト項目アクションの色
    $item-thumbnail-color-activeアクティブ リスト項目サムネイルの色
    $item-subtitle-color-activeアクティブ リスト項目サブタイトルの色
    +
    $item-background-selected
    +     		$item-text-color-selected選択されたリスト項目のテキストの色
    $item-title-color-selected選択されたリスト項目のタイトルの色
    $item-action-color-selected選択されたリスト項目のアクションの色
    $item-thumbnail-color-selected選択されたリスト項目のサムネイルの色
    $item-subtitle-color-selected選択されたリスト項目のサブタイトルの色
    + +> *注:* 実際の結果はテーマのバリエーションによって異なる場合があります。 + 以下は、リストの背景を変更する方法を説明します。まず、index.scss をコンポーネントの .scss ファイルにインポートします。 @@ -617,7 +815,7 @@ igx-list-item { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`list-theme`]({environment:sassApiUrl}/themes#function-list-theme) を拡張し、`$background` パラメーターだけを指定することで、状態ごとのカラーや適切なコントラストの前景色が自動的に計算されます。必要に応じて手動で指定することも可能です。 +最もシンプルな方法として、[`list-theme`]({environment:sassApiUrl}/themes#function-list-theme) を拡張し、`$background` パラメーターだけを指定することで、状態ごとのカラーや適切なコントラストの前景の色が自動的に計算されます。必要に応じて手動で指定することも可能です。 ```scss $my-list-theme: list-theme( @@ -642,6 +840,42 @@ $my-list-theme: list-theme( リスト コンポーネントに変更できるパラメーターの完全なリストについては、[IgxListComponent スタイル]({environment:sassApiUrl}/themes#function-list-theme)を参照してください。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して list をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-list`、`dark-list`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[list-theme]({environment:sassApiUrl}/themes#function-list-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、list は次のようになります: + +
    + +
    + ## API リファレンス この記事では Angular List コンポーネントについて説明しました。アバターおよびアイコンの Ignite UI for Angular コンポーネントを使用して連絡先項目のリストを作成し、カスタム項目レイアウトを作成してスタイル設定、更にリスト フィルタリングを追加しました。以下は、List コンポーネントのその他の API です。 diff --git a/jp/components/month-picker.md b/jp/components/month-picker.md index ec0aaa1125..229321064e 100644 --- a/jp/components/month-picker.md +++ b/jp/components/month-picker.md @@ -185,7 +185,7 @@ Month Picker のスタイル設定を始めるには、すべてのテーマ関 ``` 月ピッカーはカレンダーのテーマを使用するため、[`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme) を拡張した新しいテーマを作成する必要があります。月ピッカーの項目にスタイルを設定するには、`$content-background` パラメーターを設定します。オプションで、残りのプロパティをオーバーライドする場合は、`$header-background` を設定することもできます。 -これら 2 つのパラメーターはテーマの基礎となり、ホバー、選択、アクティブなどすべての状態に応じた適切な背景色および前景色を自動的に生成します。 +これら 2 つのパラメーターはテーマの基礎となり、ホバー、選択、アクティブなどすべての状態に応じた適切な背景の色および前景の色を自動的に生成します。 ```scss $my-calendar-theme: calendar-theme( @@ -204,13 +204,50 @@ $my-calendar-theme: calendar-theme( ### デモ - +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して、`month picker` のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 月ピッカーはカレンダー テーマでスタイルされるため、カレンダーのユーティリティ クラスを使用する必要があります。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-calendar`、`dark-calendar`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、month picker は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/navbar.md b/jp/components/navbar.md index 24044f6b88..26a74042df 100644 --- a/jp/components/navbar.md +++ b/jp/components/navbar.md @@ -272,7 +272,38 @@ Navbar のタイトルにカスタム コンテンツを提供する場合は、 ## スタイル設定 -ページネーターのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。 +### Navbar テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$text-colorナビゲーション バーのテキストの色
    $idle-icon-colorナビゲーション バーのアイドル アイコンの色
    $hover-icon-colorホバー時のナビゲーション バーのアイコンの色
    $border-color (indigo バリエーションのみの変更)ナビゲーション バーの境界線の色
    $idle-icon-color$hover-icon-colorホバー時のナビゲーション バーのアイコンの色
    + +Navbar のスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -281,7 +312,7 @@ Navbar のタイトルにカスタム コンテンツを提供する場合は、 // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`navbar-theme`]({environment:sassApiUrl}/themes#function-navbar-theme) を拡張し、`$background` および `$idle-icon-color` パラメータのみを提供する新しいテーマを作成します。テーマは、さまざまなインタラクション状態に必要なすべての背景色と前景色を自動的に計算します。より細かい制御を行いたい場合は、個別のプロパティをオーバーライドすることも可能です。 +最もシンプルな方法として、[`navbar-theme`]({environment:sassApiUrl}/themes#function-navbar-theme) を拡張し、`$background` および `$idle-icon-color` パラメータのみを提供する新しいテーマを作成します。テーマは、さまざまなインタラクション状態に必要なすべての背景の色と前景の色を自動的に計算します。より細かい制御を行いたい場合は、個別のプロパティをオーバーライドすることも可能です。 ```scss $custom-navbar-theme: navbar-theme( @@ -309,6 +340,42 @@ $custom-navbar-theme: navbar-theme(
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して navbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-navbar`、`dark-navbar`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[navbar-theme]({environment:sassApiUrl}/themes#function-navbar-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、navbar は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/query-builder.md b/jp/components/query-builder.md index 526005af5a..16a12bb618 100644 --- a/jp/components/query-builder.md +++ b/jp/components/query-builder.md @@ -270,6 +270,33 @@ this.ordersFields = [ ## スタイル設定 +### Query Builder テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$label-foregroundクエリ ビルダーのラベル 「from」 と 「select」 の色
    $header-backgroundクエリ ビルダー ヘッダーの背景の色
    $header-foregroundクエリ ビルダー ヘッダーの前景の色
    $subquery-header-backgroundサブクエリ ヘッダーの背景の色
    $subquery-border-colorクエリ ブロックの境界線の色
    $separator-colorクエリ ブロックのセパレーターの色
    $header-border (Bootstrap のみ)クエリ ビルダーの、ヘッダーの境界線の色
    + クエリ ビルダーのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -279,7 +306,7 @@ this.ordersFields = [ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -クエリ ビルダーは、`background` パラメーターを使用して、そのテーマから背景色を取得します。背景を変更するには、カスタム テーマを作成する必要があります。 +クエリ ビルダーは、`background` パラメーターを使用して、そのテーマから背景の色を取得します。背景を変更するには、カスタム テーマを作成する必要があります。 ```scss @@ -290,7 +317,7 @@ $custom-query-builder: query-builder-theme( ); ``` -Query Builder 内には、ボタン、チップ、ドロップダウン、入力など、他のコンポーネントがあるため、それぞれに個別のテーマを作成する必要があります。 +クエリ ビルダー内には、ボタン、チップ、ドロップダウン、入力など、他のコンポーネントがあるため、それぞれに個別のテーマを作成する必要があります。 ```scss $custom-button: flat-button-theme( @@ -353,6 +380,43 @@ $custom-icon-button: outlined-icon-button-theme(
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して、query builder のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-query-builder`、`dark-query-builder`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[query-builder-theme]({environment:sassApiUrl}/themes#function-query-builder-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、query builder は次のようになります: + +
    + +
    + [WYSIWYG App Builder™](https://jp.infragistics.com/products/appbuilder) と実際の UI コンポーネントを使用して、Angular アプリ開発を効率化することもできます。 ## API リファレンス diff --git a/jp/components/radio-button.md b/jp/components/radio-button.md index 31ab5d9998..7521ed1d8d 100644 --- a/jp/components/radio-button.md +++ b/jp/components/radio-button.md @@ -104,7 +104,7 @@ Ignite UI for Angular Radio Button モジュールまたはディレクティブ ### プロパティ -上記のサンプルに 4 つのラジオ ボタンを追加し、各ボタンに特定の背景色を適用します。次に含まれる div 要素の backgroundColor プロパティをコンポーネントの selectedColor プロパティにバインドします。selectedColor は `NgModel` ディレクティブによって双方向バインディングが設定されるため、ユーザーが別のラジオ ボタン (色) を選択する際に値が更新されます。 +上記のサンプルに 4 つのラジオ ボタンを追加し、各ボタンに特定の背景の色を適用します。次に含まれる div 要素の backgroundColor プロパティをコンポーネントの selectedColor プロパティにバインドします。selectedColor は `NgModel` ディレクティブによって双方向バインディングが設定されるため、ユーザーが別のラジオ ボタン (色) を選択する際に値が更新されます。 ```typescript // radiogroup.component.ts @@ -147,30 +147,55 @@ public selectedColor: string = this.colors[3].hex; ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してラジオ ボタンの外観をカスタマイズする方法です。 - -```css -igx-radio { - --empty-color: #556b81; - --label-color: #131e29; - --fill-color: #0064d9; - --focus-outline-color: #0032a5; -} - -igx-radio:hover { - --empty-fill-color: #e3f0ff; - --empty-color: #0064d9; - --hover-color: transparent; -} -``` - -これらの CSS 変数の値を変更することで、コンポーネントの全体的な外観を変更できます。 - -
    - -ラジオ ボタンにスタイルを設定する別の方法は、**Sass** と [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme) 関数を使用することです。 - -**Sass** を使用してラジオ ボタンのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Radio テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $empty-color
    		$hover-colorホバー時の境界線とドットの色
    $focus-outline-color (indigo)フォーカス アウトラインの色 (Indigo テーマ)
    $fill-color
    		$fill-color-hoverホバー時のチェック済みドットの色
    $fill-hover-border-color (non-bootstrap)ホバー時のチェック済み境界線の色
    $focus-border-color (bootstrap)フォーカス時の境界線の色
    $focus-outline-color (bootstrap)フォーカス アウトラインの色
    $focus-outline-color-filled (indigo)選択時のラジオのフォーカス アウトラインの色
    $label-color$label-color-hoverホバー時のラベル テキストの色
    $error-color
    		$error-color-hover入力が不正な状態でのホバー時のラベル、境界線、ドットの色
    $focus-outline-color-error入力が不正な状態でのフォーカス アウトラインの色
    + +ラジオ ボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -179,7 +204,7 @@ igx-radio:hover { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`radio-theme`]({environment:sassApiUrl}/themes#function-radio-theme) を拡張する新しいテーマを作成します。`$empty-color` と `$fill-color` の 2 つの主要パラメーターを指定することで、完全なスタイルのラジオ ボタンを生成できます。これらの値はテーマの基盤となり、指定することでホバー、選択、無効など、さまざまな状態に必要な前景色および背景色が自動的に計算されます。 +最もシンプルな方法として、[`radio-theme`]({environment:sassApiUrl}/themes#function-radio-theme) を拡張する新しいテーマを作成します。`$empty-color` と `$fill-color` の 2 つの主要パラメーターを指定することで、完全なスタイルのラジオ ボタンを生成できます。これらの値はテーマの基盤となり、指定することでホバー、選択、無効など、さまざまな状態に必要な前景の色および背景の色が自動的に計算されます。 ```scss $custom-radio-theme: radio-theme( @@ -194,8 +219,6 @@ $custom-radio-theme: radio-theme( @include css-vars($custom-radio-theme); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用したラジオ ボタンが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.RadioButton/sample/sap.m.sample.RadioButton) デザイン システムのラジオ ボタンに視覚的に似たデザインを実現している様子を確認できます。 - @@ -206,10 +229,49 @@ $custom-radio-theme: radio-theme(
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `radio button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-radio`、`dark-radio`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[radio-theme]({environment:sassApiUrl}/themes#function-radio-theme) で確認できます。構文は次のとおりです: + + +```html + + New York + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、radio button は次のようになります: + +
    + +
    + ## Radio Group

    Ignite UI for Angular Radio Group ディレクティブは、ラジオの子コンポーネントを制御できるグループ化コンテナーを提供し、テンプレート駆動型およびリアクティブ型のフォームをサポートします。

    -
    ### デモ @@ -297,6 +359,7 @@ public alignment = RadioGroupAlignment.vertical; * [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme) ## その他のリソース +
    コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/select.md b/jp/components/select.md index 876d001ea8..9321049ef8 100644 --- a/jp/components/select.md +++ b/jp/components/select.md @@ -359,6 +359,31 @@ export class MyClass implements OnInit { ## スタイル設定 +### Select テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $toggle-button-background
    		$toggle-button-foregroundトグル ボタンの前景の色
    $toggle-button-foreground-filledオンの時のトグル ボタンの前景の色
    $toggle-button-background-focusフォーカス時の背景の色
    $toggle-button-background-focus--border (bootstrap/indigo)border バリエーションでフォーカス時の背景 (Bootstrap/Indigo)
    $toggle-button-foreground-focusフォーカス時のトグル ボタンの前景の色
    + 各コンポーネントには独自のテーマ関数があります。 Select コンポーネントのスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、[input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme) と [drop-down-theme]({environment:sassApiUrl}/themes#function-drop-down-theme) を使用する必要があります。 @@ -374,7 +399,7 @@ Select コンポーネントのボタンのスタイル設定を始めるには // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`select-theme`]({environment:sassApiUrl}/themes#function-select-theme) を拡張し、`$toggle-button-background` のみを提供して新しいテーマを作成します。theme 関数は、この単一の値に基づいて、さまざまな状態に対応するすべての背景色と前景色を自動的に計算します。 +最もシンプルな方法として、[`select-theme`]({environment:sassApiUrl}/themes#function-select-theme) を拡張し、`$toggle-button-background` のみを提供して新しいテーマを作成します。theme 関数は、この単一の値に基づいて、さまざまな状態に対応するすべての背景の色と前景の色を自動的に計算します。 ```scss $custom-select-theme: select-theme( @@ -393,6 +418,43 @@ $custom-select-theme: select-theme( iframe-src="{environment:demosBaseUrl}/data-entries/select-styling/" >     +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して select をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-select`、`dark-select`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[select-theme]({environment:sassApiUrl}/themes#function-select-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、select は次のようになります: + +
    + +
    +
    diff --git a/jp/components/slider/slider.md b/jp/components/slider/slider.md index 011cf181c4..7fc1850d75 100644 --- a/jp/components/slider/slider.md +++ b/jp/components/slider/slider.md @@ -484,6 +484,185 @@ public type = SliderType.RANGE; ## スタイル設定 +### Slider テーマのプロパティ マップ +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + +
    + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $track-color
    		$thumb-colorつまみの色
    $base-track-colorトラックのベース背景の色
    $track-hover-colorホバー時のトラックの色
    $disabled-fill-track-color無効なトラックの基本の塗りつぶしの色
    $label-background-colorバブル ラベルの背景の色
    $thumb-color
    		$track-colorトラックの色
    $disabled-thumb-color無効時のつまみの境界線の色
    $base-track-color
    		$base-track-hover-colorホバー時の基本トラックの色
    $track-step-colorトラック ステップの色
    $disabled-base-track-color無効なトラックの基本の色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-border-color
    		$track-colorトラックの色
    $thumb-border-hover-colorホバー時のつまみの境界線の色
    $thumb-focus-colorつまみのフォーカス色
    $thumb-disabled-border-color無効なつまみの境界線の色
    $track-color
    		$thumb-border-colorつまみの境界線の色
    $track-hover-colorホバー時のトラックの色
    $disabled-fill-track-color無効なトラックの基本の塗りつぶしの色
    $label-background-colorバブル ラベルの背景の色
    $label-text-colorバブル ラベルのテキストの色
    $base-track-color
    		$base-track-hover-colorホバー時の基本トラックの色
    $track-step-colorトラック ステップの色
    $disabled-base-track-color無効なトラックの基本の色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-color
    		$thumb-border-colorつまみの境界線の色
    $thumb-focus-colorつまみのフォーカス色
    $track-colorトラックの色
    $label-background-colorバブル ラベルの背景の色
    $label-text-colorバブル ラベルのテキストの色
    $disabled-thumb-color無効時のつまみの境界線の色
    $track-color
    		$track-hover-colorホバー時のトラックの色
    $disabled-fill-track-color無効なトラックの塗りつぶしの色
    $base-track-color
    		$base-track-hover-colorホバー時の基本トラックの色
    $track-step-colorトラック ステップの色
    $disabled-base-track-color無効なトラックの基本の色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-border-color
    		$track-colorトラックの色
    $thumb-border-hover-colorホバー時のつまみの境界線の色
    $thumb-focus-colorつまみのフォーカス色
    $thumb-disabled-border-color無効なつまみの境界線の色
    $track-color
    		$thumb-border-colorつまみの境界線の色
    $track-hover-colorホバー時のトラックの色
    $disabled-fill-track-color無効なトラックの基本の塗りつぶしの色
    $label-background-colorバブル ラベルの背景の色
    $label-text-colorバブル ラベルのテキストの色
    $base-track-color
    		$base-track-hover-colorホバー時の基本トラックの色
    $track-step-colorトラック ステップの色
    $disabled-base-track-color無効なトラックの基本の色
    +
    +
    +
    + スライダーをカスタマイズするには、すべてのスタイリング関数とミックスインが置かれている `index` ファイルをインポートする必要があります。 ```scss @@ -520,6 +699,43 @@ $custom-slider-theme: slider-theme( iframe-src="{environment:demosBaseUrl}/interactions/slider-styling-sample/" >     +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `slider` をスタイル設定できます。まず [Tailwind を設定して](../themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-slider`、`dark-slider`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは [IgxSlider テーマ]({environment:sassApiUrl}/themes#function-slider-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、slider は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/snackbar.md b/jp/components/snackbar.md index 29544d3fff..ab47b7c5c2 100644 --- a/jp/components/snackbar.md +++ b/jp/components/snackbar.md @@ -277,7 +277,30 @@ public open(snackbar) { ``` ## スタイル設定 -スナックバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。 + +### Snackbar テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$text-colorスナックバーのテキストの色
    $button-colorスナックバーのボタンの色
    + +スナックバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -316,6 +339,44 @@ $dark-snackbar: snackbar-theme(
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して snackbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-select`、`dark-select`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[snackbar-theme]({environment:sassApiUrl}/themes#function-snackbar-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、snackbar は次のようになります: + +
    + +
    + ## API リファレンス このトピックでは、[`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) を使用と構成方法を説明しました。API の詳細については以下のリンク先を参照してください。 diff --git a/jp/components/splitter.md b/jp/components/splitter.md index 387b6279db..2e83c8b331 100644 --- a/jp/components/splitter.md +++ b/jp/components/splitter.md @@ -210,6 +210,30 @@ public typeVertical = SplitterType.Vertical; - `Ctrl + 右矢印` - 水平スプリッターでペインを展開/縮小 ## スタイル設定 + +### Splitter テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $bar-color$handle-colorバーのドラッグ ハンドルの色
    $expander-color矢印拡張の色
    $focus-colorフォーカス時のスプリッター バーの色
    + **igxSplitter** コンポーネントのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -249,6 +273,37 @@ $splitter-theme: splitter-theme( iframe-src="{environment:demosBaseUrl}/layouts/splitter-styling-sample/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して splitter をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-splitter`、`dark-splitter`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[splitter-theme]({environment:sassApiUrl}/themes#function-splitter-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + ### カスタム サイズ変更 `igx-splitter` を直接ターゲットとして `--size` 変数を使用することができます。 @@ -266,13 +321,13 @@ igx-splitter { ``` + ```scss .my-app { --igx-splitter-size: 10px; } ``` - ## API リファレンス
    diff --git a/jp/components/spreadsheet-configuring.md b/jp/components/spreadsheet-configuring.md index 46b9c48ba8..e71cb6ee50 100644 --- a/jp/components/spreadsheet-configuring.md +++ b/jp/components/spreadsheet-configuring.md @@ -88,7 +88,7 @@ this.spreadsheet.areHeadersVisible = false; [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) コントロールは、コントロールが「終了モード」にあるかどうかを構成することによって、ワークシートのセル間のナビゲーションを構成できます。終了モードは、矢印キーを押すと、アクティブなセルが、押された矢印キーの方向に応じて、現在のセルからデータが隣接するセルの行または列の末尾に移動する機能です。この機能は、大規模なデータ ブロックの最後まですばやく移動する際に役立ちます。 -たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして`右`矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、[`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) は終了モードから飛び出します。 +たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして → 矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、[`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) は終了モードから飛び出します。 ユーザーが END キーを押すと、実行時に終了モードが有効になりますが、スプレッドシート コントロールの [`isInEndMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#isInEndMode) プロパティを設定することでプログラムで設定できます。 @@ -119,7 +119,7 @@ this.spreadsheet.activeWorksheet.unprotect(); * `AddToSelection`: マウスでドラッグするときに CTRL キーを押す必要はありません。新しいセル範囲が [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) オブジェクトの [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。 * `ExtendSelection`: [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) オブジェクトの [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。 -* `Normal`: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。Ctrl SHIFT キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブ セルを含む選択範囲を変更できます。 +* `Normal`: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。CTRL キーを押したままマウスを使用することで新しい範囲を追加できます。また、SHIFT キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブ セルを含む選択範囲を変更できます。 上記の説明で述べた [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) オブジェクトは、[`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) コントロールの [`activeSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeSelection) プロパティを使用して取得できます。 diff --git a/jp/components/stepper.md b/jp/components/stepper.md index a778321139..a97d83128d 100644 --- a/jp/components/stepper.md +++ b/jp/components/stepper.md @@ -319,6 +319,87 @@ Stepper コンポーネントは、ローコード [ドラッグアンドドロ ## Angular Stepper のスタイル設定 +### Stepper テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $step-background
    		$step-hover-backgroundホバー時のステップ ヘッダーの背景
    $step-focus-backgroundフォーカス時のステップ ヘッダーの背景
    $indicator-backgroundステップ インジケーターの背景の色
    $title-colorステップのタイトルの色
    $subtitle-colorステップのサブタイトルの色
    $current-step-background現在のステップ ヘッダーの背景
    $invalid-step-background入力が不正なステップ ヘッダーの背景
    $complete-step-background完了したステップ ヘッダーの背景
    $disabled-indicator-background無効なステップのインジケーターの背景
    $disabled-title-color無効なステップ タイトルの色
    $disabled-subtitle-color無効なステップ サブタイトルの色
    $step-separator-colorステップ間の区切りの境界線の色
    $indicator-background
    		$indicator-outlineステップ インジケーターのアウトラインの色
    $indicator-colorステップ インジケーターのテキストの色
    $current-step-background
    		$current-step-hover-background現在のステップ ヘッダーのホバー時の背景
    $current-step-focus-background現在のステップ ヘッダーのフォーカス時の背景
    $current-indicator-background現在のステップ インジケーターの背景の色
    $current-title-color現在のステップ タイトルの色
    $current-subtitle-color現在のステップ サブタイトルの色
    $invalid-indicator-background
    		$invalid-indicator-outline入力が不正なステップ インジケーターのアウトラインの色
    $invalid-indicator-color入力が不正なステップ インジケーターの色
    $invalid-title-color入力が不正なステップ タイトルの色
    $invalid-subtitle-color入力が不正なステップ サブタイトルの色
    $invalid-title-hover-color入力が不正なステップタイトルのホバー時の色
    $invalid-subtitle-hover-color入力が不正なステップ サブタイトルのホバー時の色
    $invalid-title-focus-color入力が不正なステップ タイトルのフォーカス時の色
    $invalid-subtitle-focus-color入力が不正なステップ サブタイトルのフォーカス時の色
    $complete-step-background
    		$complete-step-hover-background完了したステップ ヘッダーのホバー時の背景
    $complete-step-focus-background完了したステップ ヘッダーのフォーカス時の背景
    $complete-indicator-background完了したステップ インジケーターの背景の色
    $complete-indicator-color完了したステップ インジケーターの色
    $complete-title-color完了したステップ タイトルの色
    $complete-subtitle-color完了したステップ サブタイトルの色
    $complete-title-hover-color完了したステップ タイトルのホバー時の色
    $complete-subtitle-hover-color完了したステップ サブタイトルのホバー時の色
    $complete-title-focus-color完了したステップ タイトルのフォーカス時の色
    $complete-subtitle-focus-color完了したステップ サブタイトルのフォーカス時の色
    + [Ignite UI for Angular テーマ](themes/index.md)を使用して、`igx-stepper` の外観を変更できます。 はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 @@ -353,9 +434,46 @@ $stepper-theme: stepper-theme( + iframe-src="{environment:demosBaseUrl}/layouts/stepper-styling-sample/" alt="Angular Stepper スタイル設定の例"> +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して stepper をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-splitter`、`dark-splitter`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[stepper-theme]({environment:sassApiUrl}/themes#function-stepper-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、stepper は次のようになります: + +
    + +
    +
    ## API リファレンス diff --git a/jp/components/switch.md b/jp/components/switch.md index c8260cb11d..9f27e84420 100644 --- a/jp/components/switch.md +++ b/jp/components/switch.md @@ -133,33 +133,238 @@ igx-switch { ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してスイッチの外観をカスタマイズする方法です。 - -```css -igx-switch { - --thumb-on-color: #e3f0ff; - --thumb-off-color: #fff; - --track-on-color: #0064d9; - --track-off-color: #788fa6; - --track-on-hover-color: #0058bf; - --border-radius-track: 1rem; - --focus-outline-color: #0032a5; - --border-on-color: transparent; - --border-color: transparent; -} - -igx-switch:hover { - --track-off-color: #637d97; -} -``` - -これらの CSS 変数の値を変更することで、スイッチ コンポーネントの全体的な外観を変更できます。 - -
    - -スイッチにスタイルを設定する別の方法は、**Sass** と [`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) 関数を使用することです。 - -**Sass** を使用してスイッチのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Switch テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + +
    + + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $track-off-color
    		$thumb-off-colorスイッチがオフの時のつまみの色
    $track-disabled-colorスイッチが無効の時のトラックの色
    $thumb-off-color
    		$track-off-colorスイッチがオフの時のトラックの色
    $thumb-disabled-colorスイッチが無効の時のつまみの色
    $track-on-color
    		$thumb-on-colorスイッチがオンの時のつまみの色
    $track-on-hover-colorホバー時のスイッチのオンの時のトラックの色
    $track-on-disabled-colorスイッチがオンおよび無効の時のトラックの色
    $thumb-on-color
    		$track-on-colorスイッチがオンの時のトラックの色
    $thumb-on-disabled-colorスイッチがオンかつ無効の時のつまみの色
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-off-color
    		$border-colorつまみのオフ色に由来する境界線の色
    $thumb-off-hover-colorホバー時のスイッチのつまみの色
    $border-color
    		$thumb-off-color境界線の色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $border-disabled-color無効なスイッチの境界線の色
    $track-off-color
    		$thumb-off-colorトラックのオフ色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $track-disabled-color無効なスイッチのトラックの色
    $track-on-color
    		$thumb-on-colorスイッチがオンの時のつまみの色
    $thumb-on-disabled-color無効なスイッチのオンの時のつまみの色
    $border-on-colorスイッチがオンの時の境界線の色
    $border-on-hover-colorホバー時のスイッチのオンの時の境界線の色
    $track-on-hover-colorホバー時のスイッチのオンの時のトラックの色
    $track-on-disabled-colorオンかつ無効の時のトラックの色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-off-color
    		$border-colorつまみのオフ色に由来する境界線の色
    $thumb-off-hover-colorホバー時のスイッチのつまみの色
    $border-color
    		$thumb-off-color境界線の色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $border-disabled-color無効なスイッチの境界線の色
    $track-off-color
    		$thumb-off-colorトラックのオフ色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $track-disabled-color無効なスイッチのトラックの色
    $track-on-color
    		$thumb-on-colorスイッチがオンの時のつまみの色
    $thumb-on-disabled-color無効なスイッチのオンの時のつまみの色
    $border-on-colorスイッチがオンの時の境界線の色
    $border-on-hover-colorホバー時のスイッチのオンの時の境界線の色
    $track-on-hover-colorホバー時のスイッチのオンの時のトラックの色
    $track-on-disabled-colorオンかつ無効の時のトラックの色
    $focus-fill-colorフォーカス時のスイッチの塗りつぶし色
    $focus-fill-color
    		$focus-outline-colorフォーカス時の塗りつぶし色に由来するアウトラインの色
    $focus-fill-hover-colorホバー時のスイッチのフォーカス時の塗りつぶし色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-off-color
    		$border-colorつまみのオフ色に由来する境界線の色
    $thumb-off-hover-colorホバー時のスイッチのつまみの色
    $border-color
    		$thumb-off-color境界線の色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $border-disabled-color無効なスイッチの境界線の色
    $track-off-color
    		$thumb-off-colorトラックのオフ色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $track-disabled-color無効なスイッチのトラックの色
    $track-on-color
    		$thumb-on-colorスイッチがオンの時のつまみの色
    $thumb-on-disabled-color無効なスイッチのオンの時のつまみの色
    $border-on-colorスイッチがオンの時の境界線の色
    $track-on-hover-colorホバー時のスイッチのオンの時のトラックの色
    $track-on-disabled-colorオンかつ無効の時のトラックの色
    $border-on-color
    		$border-on-hover-colorホバー時のスイッチのオンの時の境界線の色
    $focus-outlined-color-focusedフォーカス時のスイッチのフォーカスアウトラインの色
    +
    +
    +
    + + +スイッチのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -191,8 +396,44 @@ $custom-switch-theme: switch-theme( iframe-src="{environment:demosBaseUrl}/data-entries/switch-styling/" > -> [!NOTE] -> サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して switch をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 + +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-switch`、`dark-switch`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[IgxSwitch テーマ]({environment:sassApiUrl}/themes#function-switch-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、switch は次のようになります: + +
    + +
    diff --git a/jp/components/tabbar.md b/jp/components/tabbar.md index 957b639163..876bdc8dce 100644 --- a/jp/components/tabbar.md +++ b/jp/components/tabbar.md @@ -381,9 +381,65 @@ export class TabbarRoutingModule { } -## スタイル設定 - -タブのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 +## スタイル + +### Bottom Nav テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$label-colorアイドル状態に使用されるラベルの色
    $label-color$icon-colorアイドル状態に使用されるアイコンの色
    $label-disabled-colorラベルの無効な色
    $icon-color$label-colorアイドル状態に使用されるラベルの色
    $label-disabled-color$icon-disabled-colorアイコンの無効な色
    $icon-disabled-color$label-disabled-colorラベルの無効な色
    $label-selected-color$icon-selected-color選択状態に使用されるアイコンの色
    $icon-selected-color$label-selected-color選択状態に使用されるラベルの色
    + +タブのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントのミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -424,6 +480,46 @@ $dark-bottom-nav: bottom-nav-theme( iframe-src="{environment:demosBaseUrl}/layouts/tabbar-style/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して bottom navigation をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-bottom-nav`、`dark-bottom-nav`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[IgxBottomNav テーマ]({environment:sassApiUrl}/themes#function-bottom-nav-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、bottom nav は次のようになります: + +
    + +
    +
    ## API リファレンス diff --git a/jp/components/tabs.md b/jp/components/tabs.md index 3aeb671d94..d01cfbc950 100644 --- a/jp/components/tabs.md +++ b/jp/components/tabs.md @@ -383,6 +383,325 @@ export class AppRoutingModule { } ## スタイル設定 +### Tabs テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + +
    + + + + + + + + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $item-background
    		$item-active-backgroundアクティブ/フォーカスされたタブ背景に使用する色
    $item-text-colorタブ テキストの色に使用する色
    $item-icon-colorタブ アイコンに使用する色
    $item-hover-backgroundホバーされるタブに使用する背景
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-backgroundボタンの背景に使用する色
    $button-hover-backgroundホバー時のボタン背景に使用される色
    $item-active-background
    		$item-active-icon-colorアクティブなタブ アイコンに使用する色
    $item-active-colorアクティブ タブ テキストに使用する色
    $tab-ripple-colorボタンの背景に使用する色
    $item-text-color
    		$item-hover-color`$item-hover-background` が指定されていない場合の、ホバー時のタブのテキストの色
    $item-icon-color`$item-background` が指定されていない場合の、タブ アイコンの色
    $item-active-color`$item-active-background` が指定されていない場合の、アクティブなタブのテキストの色
    $indicator-color`$item-background` が指定されていない場合の、アクティブなタブ インジケーターの色
    $item-icon-color
    		$item-hover-icon-colorホバー時のタブ アイコンに使用する色
    $item-active-icon-colorアクティブなタブ アイコンに使用する色
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-background
    		$button-hover-backgroundホバー時のボタン背景に使用される色
    $button-colorボタン アイコン/テキストの色に使用する色
    $button-color
    		$button-disabled-color無効なボタン アイコン/テキストに使用する色
    $button-ripple-colorホバー時のボタン背景に使用される色
    $button-hover-background$button-hover-colorボタン アイコン/テキストはホバーされる時の色に使用する色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $item-background
    		$item-active-backgroundアクティブ/フォーカスされたタブ背景に使用する色
    $item-text-colorタブ テキストの色に使用する色
    $item-icon-colorタブ アイコンに使用する色
    $item-hover-backgroundホバーされるタブに使用する背景
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-backgroundボタンの背景に使用する色
    $button-hover-backgroundホバー時のボタン背景に使用される色
    $item-active-background
    		$item-active-icon-colorアクティブなタブ アイコンに使用する色
    $item-active-colorアクティブ タブ テキストに使用する色
    $tab-ripple-colorタブ操作のリップル色
    $item-text-color
    		$item-hover-color`$item-hover-background` が指定されていない場合の、ホバー時のタブのテキストの色
    $item-icon-color`$item-background` が指定されていない場合の、タブ アイコンの色
    $item-active-color`$item-active-background` が指定されていない場合の、アクティブなタブのテキストの色
    $indicator-color`$item-background` が指定されていない場合の、アクティブなタブ インジケーターの色
    $item-icon-color
    		$item-hover-icon-colorホバー時のタブ アイコンに使用する色
    $item-active-icon-colorアクティブなタブ アイコンに使用する色
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-background
    		$button-hover-backgroundホバー時のボタン背景に使用される色
    $button-colorボタン アイコン/テキストの色に使用する色
    $button-color
    		$button-disabled-color無効なボタン アイコン/テキストに使用する色
    $button-ripple-colorホバー時のボタン背景に使用される色
    $button-hover-background$button-hover-colorボタン アイコン/テキストはホバーされる時の色に使用する色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $item-background
    		$item-active-backgroundアクティブ/フォーカスされたタブ背景に使用する色
    $item-text-colorタブ テキストの色に使用する色
    $item-icon-colorタブ アイコンに使用する色
    $item-hover-backgroundホバーされるタブに使用する背景
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-backgroundボタンの背景に使用する色
    $button-hover-backgroundホバー時のボタン背景に使用される色
    $border-colorタブの境界線の色
    $item-active-background
    		$item-active-icon-colorアクティブなタブ アイコンに使用する色
    $item-active-colorアクティブ タブ テキストに使用する色
    $tab-ripple-colorボタンの背景に使用する色
    $item-text-color
    		$item-hover-color`$item-hover-background` が指定されていない場合の、ホバー時のタブのテキストの色
    $item-icon-color`$item-background` が指定されていない場合の、タブ アイコンの色
    $button-color`$button-background` が指定されていない場合の、ボタン アイコン/テキストの色 (非マテリアル)
    $item-icon-color
    		$item-hover-icon-color`$item-hover-background` が指定されていない場合の、ホバー時のタブ アイコンの色
    $item-text-color`$item-background` が指定されていない場合の、タブのテキストの色
    $button-background
    		$button-hover-backgroundホバー時のボタン背景に使用される色
    $button-colorボタン アイコン/テキストの色に使用する色
    $button-color
    		$button-hover-color`$button-background` が指定されていない場合の、ホバー時のボタン アイコン/テキストの色
    $button-disabled-color無効なボタン アイコン/テキストに使用する色
    $button-ripple-colorホバー時のボタン背景に使用される色
    $button-hover-background$button-hover-colorボタン アイコン/テキストはホバーされる時の色に使用する色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $item-background
    		$item-active-backgroundアクティブ/フォーカスされたタブ背景に使用する色
    $item-text-colorタブ テキストの色に使用する色
    $item-icon-colorタブ アイコンに使用する色
    $item-hover-backgroundホバーされるタブに使用する背景
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-backgroundボタンの背景に使用する色
    $button-hover-backgroundホバー時のボタン背景に使用される色
    $item-active-background
    		$item-active-icon-colorアクティブなタブ アイコンに使用する色
    $item-active-colorアクティブ タブ テキストに使用する色
    $tab-ripple-colorボタンの背景に使用する色
    $item-text-color
    		$item-hover-color`$item-hover-background` が指定されていない場合の、ホバー時のタブのテキストの色
    $item-icon-color`$item-background` が指定されていない場合の、タブ アイコンの色
    $item-active-color`$item-active-background` が指定されていない場合の、アクティブなタブのテキストの色
    $indicator-color`$item-background` が指定されていない場合の、アクティブなタブ インジケーターの色
    $item-icon-color
    		$item-hover-icon-colorホバー時のタブ アイコンに使用する色
    $item-active-icon-colorアクティブなタブ アイコンに使用する色
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-background
    		$button-hover-backgroundホバー時のボタン背景に使用される色
    $button-colorボタン アイコン/テキストの色に使用する色
    $button-color
    		$button-disabled-color無効なボタン アイコン/テキストに使用する色
    $button-ripple-colorホバー時のボタン背景に使用される色
    $button-hover-background$button-hover-colorボタン アイコン/テキストはホバーされる時の色に使用する色
    +
    +
    +
    + + タブのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在するテーマ モジュールをインポートする必要があります。 ```scss @@ -392,7 +711,7 @@ export class AppRoutingModule { } // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`tabs-theme`]({environment:sassApiUrl}/themes#function-tabs-theme) を拡張する新しいテーマを作成します。`$item-background` や `$item-active-color` などの少数のベース パラメーターを指定することで、最小限の労力でタブのスタイルを設定できます。テーマは、さまざまなインタラクション状態に必要なすべての背景色と前景色を自動的に生成します。 +最もシンプルな方法として、[`tabs-theme`]({environment:sassApiUrl}/themes#function-tabs-theme) を拡張する新しいテーマを作成します。`$item-background` や `$item-active-color` などの少数のベース パラメーターを指定することで、最小限の労力でタブのスタイルを設定できます。テーマは、さまざまなインタラクション状態に必要なすべての背景の色と前景の色を自動的に生成します。 追加のパラメーターをオーバーライドして、外観をさらに微調整することもできます。 @@ -425,6 +744,46 @@ $dark-tabs: tabs-theme( iframe-src="{environment:demosBaseUrl}/layouts/tabs-style/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して tabs をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-tabs`、`dark-tabs`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは [IgxTabs テーマ]({environment:sassApiUrl}/themes#function-tabs-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、tabs は次のようになります: + +
    + +
    +
    ## API リファレンス diff --git a/jp/components/themes/sass/animations.md b/jp/components/themes/sass/animations.md index 054cd06f62..8cefc64787 100644 --- a/jp/components/themes/sass/animations.md +++ b/jp/components/themes/sass/animations.md @@ -66,7 +66,7 @@ Ignite UI for Angular [keyframes]({environment:sassApiUrl}/animations#mixin-keyf ### タイミング関数 -キーフレーム ミックスインで使用するタイミング関数のリストが含まれています。タイミング関数の全てのリストの詳細は、[ドキュメント]({environment:sassApiUrl})をご覧ください。 +キーフレーム ミックスインで使用するタイミング関数のリストが含まれています。タイミング関数の全てのリストの詳細は、[ドキュメント]({environment:sassApiUrl}/animations)をご覧ください。
    diff --git a/jp/components/themes/sass/roundness.md b/jp/components/themes/sass/roundness.md index d04a403cac..4b2a6d5a86 100644 --- a/jp/components/themes/sass/roundness.md +++ b/jp/components/themes/sass/roundness.md @@ -97,7 +97,7 @@ button { | **Tooltip** | 0 / 16px | 4px | | **Toast** | 0 / 26px | 26px | -各テーマのデフォルトおよび最小/最大半径値を確認するには、各コンポーネントの [スキーマ]({environment:sassApiUrl}) ドキュメントを参照してください。 +各テーマのデフォルトおよび最小/最大半径値を確認するには、各コンポーネントの [スキーマ]({environment:sassApiUrl}/schemas) ドキュメントを参照してください。
    diff --git a/jp/components/toast.md b/jp/components/toast.md index b883a1a2fa..cfeb65810e 100644 --- a/jp/components/toast.md +++ b/jp/components/toast.md @@ -179,7 +179,33 @@ public open(toast) { ## スタイル設定 -Toast のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。 +### Toast テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$text-colorトーストに使用されるテキストの色
    $text-color$border-colorトーストに使用される境界線の色
    + +Toast のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -215,6 +241,43 @@ $custom-toast-theme: toast-theme( iframe-src="{environment:demosBaseUrl}/notifications/toast-style/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して toast をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-toast`、`dark-toast`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[IgxToast テーマ]({environment:sassApiUrl}/themes#function-toast-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、toast は次のようになります: + +
    + +
    +
    ## API リファレンス diff --git a/jp/components/toc.yml b/jp/components/toc.yml index 04d74309a3..33d6866ec6 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -1083,6 +1083,7 @@ href: toggle.md - name: Tooltip href: tooltip.md + updated: true new: false - name: Overlay href: overlay.md diff --git a/jp/components/tooltip.md b/jp/components/tooltip.md index 39fe3f9a52..804985648a 100644 --- a/jp/components/tooltip.md +++ b/jp/components/tooltip.md @@ -149,7 +149,136 @@ avatar をターゲットにして、[`igxTooltipTarget`]({environment:angularAp すべて適切に設定できると、[Tooltip デモ](#angular-tooltip-の例) セクションで示されるデモサンプルを確認することができます。 -### 設定の表示/非表示 +### 高機能なツールチップ + +ツールチップのコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。 + +[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](avatar.md)、マップの場所アイコンに [`IgxIcon`](icon.md) を使用します。この目的のためには、各モジュールを取得する必要があります。 + +```typescript +// app.module.ts + +import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular'; +// import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [IgxTooltipModule, IgxAvatarModule, IgxIconModule], +}) +export class AppModule {} +``` + +アプリケーションには以下のスタイルを使用します。 + +```css +/* richTooltip.component.css */ + +.location:hover { + cursor: pointer; +} + +.map { + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 252px; + background-image: url(assets/images/card/media/infragisticsMap.png); + border: 1px solid #d4d4d4; +} + +.locationTooltip { + width: 310px; + background-color: var(--igx-grays-700); + padding: 3px; + font-size: 13px; +} + +.locationTooltipContent { + display: flex; + justify-content: center; + align-items: center; +} + +.logo { + margin-right: 10px; + min-width: 25px; + width: 45px; + height: 45px; +} +``` + +マップを作成しましょう。マップの背景画像がある単純な div を使用します。更に場所の配置を示すアイコンを追加します。場所の詳細を提供するためにアイコンがツールチップのターゲットになります。 + +```html + + +
    + location_on + ... +
    +``` + +次にツールチップを作成します。コンテンツは、テキスト情報要素とアバターで構成されるコンテナーを作成します。ツールチップをターゲットにアタッチして CSS スタイルを使用します。 + +```html + + +
    +
    + location_on + +
    +
    + +
    +
    Infragistics Inc. HQ
    +
    2 Commerce Dr, Cranbury, NJ 08512, USA
    +
    +
    +
    +
    +
    +``` + +上記をすべて完了すると場所とツールチップは以下のようになります。 + + + + +
    + +### 高度な例 + +ツールチップは他のコンポーネントとシームレスに統合され、内部にコンポーネントを含む高度なツールチップを作成できます。次の例では、[`IgxList`]({environment:angularApiUrl}/classes/igxlistcomponent.html)、[`IgxAvatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html)、[`IgxIcon`]({environment:angularApiUrl}/classes/igxiconcomponent.html)、[`IgxBadge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html)、[`IgxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.html)、[`IgxCard`]({environment:angularApiUrl}/classes/igxcardcomponent.html) および [`IgxCategoryChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) コンポーネントを使用して説明的なツールチップを作成する方法を示しています。 + + + + +
    + +### 遅延の表示/非表示の設定 + ツールチップを表示または非表示にするまでの時間を制御する場合は、[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブの [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティを使用します。両プロパティは型 **number** でミリセカンドでタイムスパンを取得できます。 > [!NOTE] @@ -251,6 +380,15 @@ public overlaySettings: OverlaySettings = { | left-end     | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Bottom       | +次の例では、すべての配置オプションと矢印の配置動作の実際のデモを見ることができます。 + + + + +
    + #### 矢印の配置をカスタマイズする 矢印の配置をカスタマイズするには、`positionArrow(arrow: HTMLElement, arrowFit: ArrowFit)` メソッドをオーバーライドできます。 @@ -290,123 +428,6 @@ public overlaySettings: OverlaySettings = {
    Her name is Madelyn James
    ``` -## 高機能なツールチップ - -コンテンツのカスタマイズやスタイル設定が [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) ディレクティブで簡単にできます。ツールチップはマークアップの標準要素であるため、必要な要素を追加してコンテンツを改善や状況に応じたスタイル設定が可能です。 - -[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](avatar.md)、マップの場所アイコンに [`IgxIcon`](icon.md) を使用します。この目的のためには、各モジュールを取得する必要があります。 - -```typescript -// app.module.ts - -import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular'; -// import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [IgxTooltipModule, IgxAvatarModule, IgxIconModule], -}) -export class AppModule {} -``` - -アプリケーションには以下のスタイルを使用します。 - -```css -/* richTooltip.component.css */ - -.location:hover { - cursor: pointer; -} - -.map { - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - width: 200px; - height: 252px; - background-image: url(assets/images/card/media/infragisticsMap.png); - border: 1px solid #d4d4d4; -} - -.locationTooltip { - width: 310px; - background-color: var(--igx-grays-700); - padding: 3px; - font-size: 13px; -} - -.locationTooltipContent { - display: flex; - justify-content: center; - align-items: center; -} - -.logo { - margin-right: 10px; - min-width: 25px; - width: 45px; - height: 45px; -} -``` - -マップを作成しましょう。マップの背景画像がある単純な div を使用します。更に場所の位置を示すアイコンを追加します。場所の詳細を提供するためにアイコンがツールチップのターゲットになります。 - -```html - - -
    - location_on - ... -
    -``` - -次にツールチップを作成します。コンテンツは、テキスト情報要素とアバターで構成されるコンテナーを作成します。ツールチップをターゲットにアタッチして CSS スタイルを使用します。 - -```html - - -
    -
    - location_on - -
    -
    - -
    -
    Infragistics Inc. HQ
    -
    2 Commerce Dr, Cranbury, NJ 08512, USA
    -
    -
    -
    -
    -
    -``` - -上記をすべて完了すると場所とツールチップは以下のようになります。 - - - - -
    - ## スタイル設定 ツールチップのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 @@ -462,6 +483,45 @@ $dark-tooltip: tooltip-theme( iframe-src="{environment:demosBaseUrl}/interactions/tooltip-style/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して tooltip をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-tooltip`、`dark-tooltip`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。 `任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。 コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[IgxTooltip テーマ]({environment:sassApiUrl}/themes#function-tooltip-theme) で確認できます。構文は次のとおりです: + +```html +
    + Her name is Madelyn James +
    +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、tooltip は次のようになります: + +
    + +
    +
    ## ユーザー補助 diff --git a/jp/components/tree.md b/jp/components/tree.md index 367b3ba5c1..f9ca8bd1bb 100644 --- a/jp/components/tree.md +++ b/jp/components/tree.md @@ -322,16 +322,73 @@ IgxTree ナビゲーションは、W3C アクセシビリティ標準に準拠 ## Angular Tree ロードオンデマンド Ignite UI for Angular IgxTree は、サーバーから最小限のデータのみ取得して描画されるため、ユーザーにすばやくデータを表示できます。この動的データ読み込みアプローチでは、ユーザーがノードを展開した後にのみ、その特定の親ノードの子が取得されます。このメカニズムは、ロードオンデマンドであらゆるリモートデータとの設定が簡単にできます。 + ### デモ -ユーザーが展開アイコンをクリックすると、ロード アイコンに変わります。[Loading]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#loading) プロパティが `false` に解決されると、読み込みインジケーターが消え、子が読み込まれます。 - -## Angular Tree スタイル設定 -[Ignite UI for Angular テーマ](themes/index.md) を使用すると、ツリーの外観を大幅に変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 +ユーザーが展開アイコンをクリックすると、ロード アイコンに変わります。[loading]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#loading) プロパティが `false` に解決されると、読み込みインジケーターが消え、子が読み込まれます。 + +## スタイル設定 + +### Tree テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundツリー ノード コンテンツに使用される色
    $background-selected選択されたツリー ノードに使用される背景の色
    $hover-colorホバー時にツリー ノードに使用される背景の色
    $background-activeアクティブ ツリー ノードに使用される背景の色
    $background-disabled無効な状態のツリー ノードに使用される背景の色
    $background-selected
    		$foreground-selected選択したツリー ノードのコンテンツに使用される色
    $hover-selected-colorホバー時に選択されたツリー ノードに使用される背景の色
    $background-active
    		$foreground-activeアクティブ ツリー ノードのコンテンツに使用される色
    $background-active-selectedアクティブな選択されたツリー ノードに使用される背景の色
    $background-active-selected$foreground-active-selectedアクティブな選択されたツリー ノードのコンテンツに使用される色
    $background-disabled$foreground-disabled無効なツリー ノードのコンテンツに使用される色
    + +[Ignite UI for Angular テーマ](themes/index.md)を使用すると、ツリーの外観を大幅に変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -361,6 +418,51 @@ $custom-tree-theme: tree-theme( iframe-src="{environment:demosBaseUrl}/lists/tree-styling/" alt="Tree のスタイル設定"> +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して tree をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-tooltip`、`dark-tooltip`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。 `任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。 コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは [IgxTree テーマ]({environment:sassApiUrl}/themes#function-tree-theme) で確認できます。構文は次のとおりです: + +```html + + @for (type of data; track type) { + + {{ type.Name }} + @for (value of type.Children; track value) { + + {{ value.Name }} + + } + + } + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、tree は次のようになります: + +
    + +
    + ## 既知の問題と制限 |制限|説明| diff --git a/package-lock.json b/package-lock.json index 879f6135ea..e7cb08754d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,12 +10,13 @@ "hasInstallScript": true, "license": "ISC", "dependencies": { - "igniteui-docfx-template": "^3.9.4" + "igniteui-docfx-template": "^3.11.0" }, "devDependencies": { "@stackblitz/sdk": "^1.11.0", "browser-sync": "^3.0.3", "cross-env": "^7.0.3", + "cspell": "^9.2.2", "del": "^5.1.0", "gulp": "^5.0.0", "gulp-autoprefixer": "^7.0.1", @@ -23,10 +24,603 @@ "gulp-file-include": "^2.1.1", "gulp-replace": "^1.1.3", "gulp-shell": "^0.7.1", + "markdownlint-cli": "^0.45.0", "slash": "^3.0.0", "yargs": "^17.7.2" } }, + "node_modules/@cspell/cspell-bundled-dicts": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-9.2.2.tgz", + "integrity": "sha512-W3FKgb89DwMuQEVWz0dPH9uZqC8w+ylpbtmXuevflw3SLtGPyllMvf/1T6tcqIkg3KEWoRYFxjpJWyoOjJkZGw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/dict-ada": "^4.1.1", + "@cspell/dict-al": "^1.1.1", + "@cspell/dict-aws": "^4.0.15", + "@cspell/dict-bash": "^4.2.1", + "@cspell/dict-companies": "^3.2.6", + "@cspell/dict-cpp": "^6.0.12", + "@cspell/dict-cryptocurrencies": "^5.0.5", + "@cspell/dict-csharp": "^4.0.7", + "@cspell/dict-css": "^4.0.18", + "@cspell/dict-dart": "^2.3.1", + "@cspell/dict-data-science": "^2.0.10", + "@cspell/dict-django": "^4.1.5", + "@cspell/dict-docker": "^1.1.16", + "@cspell/dict-dotnet": "^5.0.10", + "@cspell/dict-elixir": "^4.0.8", + "@cspell/dict-en_us": "^4.4.20", + "@cspell/dict-en-common-misspellings": "^2.1.6", + "@cspell/dict-en-gb-mit": "^3.1.10", + "@cspell/dict-filetypes": "^3.0.14", + "@cspell/dict-flutter": "^1.1.1", + "@cspell/dict-fonts": "^4.0.5", + "@cspell/dict-fsharp": "^1.1.1", + "@cspell/dict-fullstack": "^3.2.7", + "@cspell/dict-gaming-terms": "^1.1.2", + "@cspell/dict-git": "^3.0.7", + "@cspell/dict-golang": "^6.0.23", + "@cspell/dict-google": "^1.0.9", + "@cspell/dict-haskell": "^4.0.6", + "@cspell/dict-html": "^4.0.12", + "@cspell/dict-html-symbol-entities": "^4.0.4", + "@cspell/dict-java": "^5.0.12", + "@cspell/dict-julia": "^1.1.1", + "@cspell/dict-k8s": "^1.0.12", + "@cspell/dict-kotlin": "^1.1.1", + "@cspell/dict-latex": "^4.0.4", + "@cspell/dict-lorem-ipsum": "^4.0.5", + "@cspell/dict-lua": "^4.0.8", + "@cspell/dict-makefile": "^1.0.5", + "@cspell/dict-markdown": "^2.0.12", + "@cspell/dict-monkeyc": "^1.0.11", + "@cspell/dict-node": "^5.0.8", + "@cspell/dict-npm": "^5.2.18", + "@cspell/dict-php": "^4.0.15", + "@cspell/dict-powershell": "^5.0.15", + "@cspell/dict-public-licenses": "^2.0.15", + "@cspell/dict-python": "^4.2.20", + "@cspell/dict-r": "^2.1.1", + "@cspell/dict-ruby": "^5.0.9", + "@cspell/dict-rust": "^4.0.12", + "@cspell/dict-scala": "^5.0.8", + "@cspell/dict-shell": "^1.1.1", + "@cspell/dict-software-terms": "^5.1.9", + "@cspell/dict-sql": "^2.2.1", + "@cspell/dict-svelte": "^1.0.7", + "@cspell/dict-swift": "^2.0.6", + "@cspell/dict-terraform": "^1.1.3", + "@cspell/dict-typescript": "^3.2.3", + "@cspell/dict-vue": "^3.0.5" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-json-reporter": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-json-reporter/-/cspell-json-reporter-9.2.2.tgz", + "integrity": "sha512-7nTqnnRCyQB+bTmIuBR4aRwV5JHymckmz1snCF+ItjDSvlc3qzjxldG8ao5zm34h+b/8YCvdMU9B92eHBt803w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-types": "9.2.2" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-pipe": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-pipe/-/cspell-pipe-9.2.2.tgz", + "integrity": "sha512-YOdbp1uoKMkYy92qxMjoOxcqcR6LEVDus+72C4X9L8eJ2b+CBO3VaVqU16Y7OQGjYMnukYgB6eyTh8YFo9uBRw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-resolver": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-resolver/-/cspell-resolver-9.2.2.tgz", + "integrity": "sha512-5tST2xoU8xbXihr1bdQ6pfcScQ3PkFpKKhFGClVfqS0yf/CKYURqzJlRDVjrFZsl+PT6tw/Jdt0E9Wwp1X1Qgw==", + "dev": true, + "license": "MIT", + "dependencies": { + "global-directory": "^4.0.1" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-service-bus": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-service-bus/-/cspell-service-bus-9.2.2.tgz", + "integrity": "sha512-AxJuw/YPJkz1Ali5mA+OW9y4JiJzb2U7H4pGYq0nRB/mWwI/xtFjuWVkI+BhwrA2P6hHdifu0JdxSLqW4IYpPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/cspell-types": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-types/-/cspell-types-9.2.2.tgz", + "integrity": "sha512-/1dRFQ3sEY9Yo+f3w0A8MFJ0BOapQc1uFjlMF19c3uoD/e4PpNLpL1qXY4FeLWKDk1D9VT8SL93J+lIwEi5bvg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/dict-ada": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-ada/-/dict-ada-4.1.1.tgz", + "integrity": "sha512-E+0YW9RhZod/9Qy2gxfNZiHJjCYFlCdI69br1eviQQWB8yOTJX0JHXLs79kOYhSW0kINPVUdvddEBe6Lu6CjGQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-al": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-al/-/dict-al-1.1.1.tgz", + "integrity": "sha512-sD8GCaZetgQL4+MaJLXqbzWcRjfKVp8x+px3HuCaaiATAAtvjwUQ5/Iubiqwfd1boIh2Y1/3EgM3TLQ7Q8e0wQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-aws": { + "version": "4.0.15", + "resolved": "https://registry.npmjs.org/@cspell/dict-aws/-/dict-aws-4.0.15.tgz", + "integrity": "sha512-aPY7VVR5Os4rz36EaqXBAEy14wR4Rqv+leCJ2Ug/Gd0IglJpM30LalF3e2eJChnjje3vWoEC0Rz3+e5gpZG+Kg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-bash": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-bash/-/dict-bash-4.2.2.tgz", + "integrity": "sha512-kyWbwtX3TsCf5l49gGQIZkRLaB/P8g73GDRm41Zu8Mv51kjl2H7Au0TsEvHv7jzcsRLS6aUYaZv6Zsvk1fOz+Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/dict-shell": "1.1.2" + } + }, + "node_modules/@cspell/dict-companies": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-companies/-/dict-companies-3.2.7.tgz", + "integrity": "sha512-fEyr3LmpFKTaD0LcRhB4lfW1AmULYBqzg4gWAV0dQCv06l+TsA+JQ+3pZJbUcoaZirtgsgT3dL3RUjmGPhUH0A==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-cpp": { + "version": "6.0.14", + "resolved": "https://registry.npmjs.org/@cspell/dict-cpp/-/dict-cpp-6.0.14.tgz", + "integrity": "sha512-dkmpSwvVfVdtoZ4mW/CK2Ep1v8mJlp6uiKpMNbSMOdJl4kq28nQS4vKNIX3B2bJa0Ha5iHHu+1mNjiLeO3g7Xg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-cryptocurrencies": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-cryptocurrencies/-/dict-cryptocurrencies-5.0.5.tgz", + "integrity": "sha512-R68hYYF/rtlE6T/dsObStzN5QZw+0aQBinAXuWCVqwdS7YZo0X33vGMfChkHaiCo3Z2+bkegqHlqxZF4TD3rUA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-csharp": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-csharp/-/dict-csharp-4.0.7.tgz", + "integrity": "sha512-H16Hpu8O/1/lgijFt2lOk4/nnldFtQ4t8QHbyqphqZZVE5aS4J/zD/WvduqnLY21aKhZS6jo/xF5PX9jyqPKUA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-css": { + "version": "4.0.18", + "resolved": "https://registry.npmjs.org/@cspell/dict-css/-/dict-css-4.0.18.tgz", + "integrity": "sha512-EF77RqROHL+4LhMGW5NTeKqfUd/e4OOv6EDFQ/UQQiFyWuqkEKyEz0NDILxOFxWUEVdjT2GQ2cC7t12B6pESwg==", + "dev": true, + "license": "MIT", + "peer": true + }, + "node_modules/@cspell/dict-dart": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-dart/-/dict-dart-2.3.1.tgz", + "integrity": "sha512-xoiGnULEcWdodXI6EwVyqpZmpOoh8RA2Xk9BNdR7DLamV/QMvEYn8KJ7NlRiTSauJKPNkHHQ5EVHRM6sTS7jdg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-data-science": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@cspell/dict-data-science/-/dict-data-science-2.0.11.tgz", + "integrity": "sha512-Dt+83nVCcF+dQyvFSaZjCKt1H5KbsVJFtH2X7VUfmIzQu8xCnV1fUmkhBzGJ+NiFs99Oy9JA6I9EjeqExzXk7g==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-django": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-django/-/dict-django-4.1.5.tgz", + "integrity": "sha512-AvTWu99doU3T8ifoMYOMLW2CXKvyKLukPh1auOPwFGHzueWYvBBN+OxF8wF7XwjTBMMeRleVdLh3aWCDEX/ZWg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-docker": { + "version": "1.1.16", + "resolved": "https://registry.npmjs.org/@cspell/dict-docker/-/dict-docker-1.1.16.tgz", + "integrity": "sha512-UiVQ5RmCg6j0qGIxrBnai3pIB+aYKL3zaJGvXk1O/ertTKJif9RZikKXCEgqhaCYMweM4fuLqWSVmw3hU164Iw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-dotnet": { + "version": "5.0.10", + "resolved": "https://registry.npmjs.org/@cspell/dict-dotnet/-/dict-dotnet-5.0.10.tgz", + "integrity": "sha512-ooar8BP/RBNP1gzYfJPStKEmpWy4uv/7JCq6FOnJLeD1yyfG3d/LFMVMwiJo+XWz025cxtkM3wuaikBWzCqkmg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-elixir": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-elixir/-/dict-elixir-4.0.8.tgz", + "integrity": "sha512-CyfphrbMyl4Ms55Vzuj+mNmd693HjBFr9hvU+B2YbFEZprE5AG+EXLYTMRWrXbpds4AuZcvN3deM2XVB80BN/Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-en_us": { + "version": "4.4.24", + "resolved": "https://registry.npmjs.org/@cspell/dict-en_us/-/dict-en_us-4.4.24.tgz", + "integrity": "sha512-JE+/H2YicHJTneRmgH4GSI21rS+1yGZVl1jfOQgl8iHLC+yTTMtCvueNDMK94CgJACzYAoCsQB70MqiFJJfjLQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-en-common-misspellings": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-en-common-misspellings/-/dict-en-common-misspellings-2.1.8.tgz", + "integrity": "sha512-vDsjRFPQGuAADAiitf82z9Mz3DcqKZi6V5hPAEIFkLLKjFVBcjUsSq59SfL59ElIFb76MtBO0BLifdEbBj+DoQ==", + "dev": true, + "license": "CC BY-SA 4.0" + }, + "node_modules/@cspell/dict-en-gb-mit": { + "version": "3.1.14", + "resolved": "https://registry.npmjs.org/@cspell/dict-en-gb-mit/-/dict-en-gb-mit-3.1.14.tgz", + "integrity": "sha512-b+vEerlHP6rnNf30tmTJb7JZnOq4WAslYUvexOz/L3gDna9YJN3bAnwRJ3At3bdcOcMG7PTv3Pi+C73IR22lNg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-filetypes": { + "version": "3.0.14", + "resolved": "https://registry.npmjs.org/@cspell/dict-filetypes/-/dict-filetypes-3.0.14.tgz", + "integrity": "sha512-KSXaSMYYNMLLdHEnju1DyRRH3eQWPRYRnOXpuHUdOh2jC44VgQoxyMU7oB3NAhDhZKBPCihabzECsAGFbdKfEA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-flutter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-flutter/-/dict-flutter-1.1.1.tgz", + "integrity": "sha512-UlOzRcH2tNbFhZmHJN48Za/2/MEdRHl2BMkCWZBYs+30b91mWvBfzaN4IJQU7dUZtowKayVIF9FzvLZtZokc5A==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-fonts": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-fonts/-/dict-fonts-4.0.5.tgz", + "integrity": "sha512-BbpkX10DUX/xzHs6lb7yzDf/LPjwYIBJHJlUXSBXDtK/1HaeS+Wqol4Mlm2+NAgZ7ikIE5DQMViTgBUY3ezNoQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-fsharp": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-fsharp/-/dict-fsharp-1.1.1.tgz", + "integrity": "sha512-imhs0u87wEA4/cYjgzS0tAyaJpwG7vwtC8UyMFbwpmtw+/bgss+osNfyqhYRyS/ehVCWL17Ewx2UPkexjKyaBA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-fullstack": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-fullstack/-/dict-fullstack-3.2.7.tgz", + "integrity": "sha512-IxEk2YAwAJKYCUEgEeOg3QvTL4XLlyArJElFuMQevU1dPgHgzWElFevN5lsTFnvMFA1riYsVinqJJX0BanCFEg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-gaming-terms": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-gaming-terms/-/dict-gaming-terms-1.1.2.tgz", + "integrity": "sha512-9XnOvaoTBscq0xuD6KTEIkk9hhdfBkkvJAIsvw3JMcnp1214OCGW8+kako5RqQ2vTZR3Tnf3pc57o7VgkM0q1Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-git": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-git/-/dict-git-3.0.7.tgz", + "integrity": "sha512-odOwVKgfxCQfiSb+nblQZc4ErXmnWEnv8XwkaI4sNJ7cNmojnvogYVeMqkXPjvfrgEcizEEA4URRD2Ms5PDk1w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-golang": { + "version": "6.0.24", + "resolved": "https://registry.npmjs.org/@cspell/dict-golang/-/dict-golang-6.0.24.tgz", + "integrity": "sha512-rY7PlC3MsHozmjrZWi0HQPUl0BVCV0+mwK0rnMT7pOIXqOe4tWCYMULDIsEk4F0gbIxb5badd2dkCPDYjLnDgA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-google": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@cspell/dict-google/-/dict-google-1.0.9.tgz", + "integrity": "sha512-biL65POqialY0i4g6crj7pR6JnBkbsPovB2WDYkj3H4TuC/QXv7Pu5pdPxeUJA6TSCHI7T5twsO4VSVyRxD9CA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-haskell": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@cspell/dict-haskell/-/dict-haskell-4.0.6.tgz", + "integrity": "sha512-ib8SA5qgftExpYNjWhpYIgvDsZ/0wvKKxSP+kuSkkak520iPvTJumEpIE+qPcmJQo4NzdKMN8nEfaeci4OcFAQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-html": { + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-html/-/dict-html-4.0.12.tgz", + "integrity": "sha512-JFffQ1dDVEyJq6tCDWv0r/RqkdSnV43P2F/3jJ9rwLgdsOIXwQbXrz6QDlvQLVvNSnORH9KjDtenFTGDyzfCaA==", + "dev": true, + "license": "MIT", + "peer": true + }, + "node_modules/@cspell/dict-html-symbol-entities": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@cspell/dict-html-symbol-entities/-/dict-html-symbol-entities-4.0.4.tgz", + "integrity": "sha512-afea+0rGPDeOV9gdO06UW183Qg6wRhWVkgCFwiO3bDupAoyXRuvupbb5nUyqSTsLXIKL8u8uXQlJ9pkz07oVXw==", + "dev": true, + "license": "MIT", + "peer": true + }, + "node_modules/@cspell/dict-java": { + "version": "5.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-java/-/dict-java-5.0.12.tgz", + "integrity": "sha512-qPSNhTcl7LGJ5Qp6VN71H8zqvRQK04S08T67knMq9hTA8U7G1sTKzLmBaDOFhq17vNX/+rT+rbRYp+B5Nwza1A==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-julia": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-julia/-/dict-julia-1.1.1.tgz", + "integrity": "sha512-WylJR9TQ2cgwd5BWEOfdO3zvDB+L7kYFm0I9u0s9jKHWQ6yKmfKeMjU9oXxTBxIufhCXm92SKwwVNAC7gjv+yA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-k8s": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-k8s/-/dict-k8s-1.0.12.tgz", + "integrity": "sha512-2LcllTWgaTfYC7DmkMPOn9GsBWsA4DZdlun4po8s2ysTP7CPEnZc1ZfK6pZ2eI4TsZemlUQQ+NZxMe9/QutQxg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-kotlin": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-kotlin/-/dict-kotlin-1.1.1.tgz", + "integrity": "sha512-J3NzzfgmxRvEeOe3qUXnSJQCd38i/dpF9/t3quuWh6gXM+krsAXP75dY1CzDmS8mrJAlBdVBeAW5eAZTD8g86Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-latex": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@cspell/dict-latex/-/dict-latex-4.0.4.tgz", + "integrity": "sha512-YdTQhnTINEEm/LZgTzr9Voz4mzdOXH7YX+bSFs3hnkUHCUUtX/mhKgf1CFvZ0YNM2afjhQcmLaR9bDQVyYBvpA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-lorem-ipsum": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-lorem-ipsum/-/dict-lorem-ipsum-4.0.5.tgz", + "integrity": "sha512-9a4TJYRcPWPBKkQAJ/whCu4uCAEgv/O2xAaZEI0n4y1/l18Yyx8pBKoIX5QuVXjjmKEkK7hi5SxyIsH7pFEK9Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-lua": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-lua/-/dict-lua-4.0.8.tgz", + "integrity": "sha512-N4PkgNDMu9JVsRu7JBS/3E/dvfItRgk9w5ga2dKq+JupP2Y3lojNaAVFhXISh4Y0a6qXDn2clA6nvnavQ/jjLA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-makefile": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-makefile/-/dict-makefile-1.0.5.tgz", + "integrity": "sha512-4vrVt7bGiK8Rx98tfRbYo42Xo2IstJkAF4tLLDMNQLkQ86msDlYSKG1ZCk8Abg+EdNcFAjNhXIiNO+w4KflGAQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-markdown": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-markdown/-/dict-markdown-2.0.12.tgz", + "integrity": "sha512-ufwoliPijAgWkD/ivAMC+A9QD895xKiJRF/fwwknQb7kt7NozTLKFAOBtXGPJAB4UjhGBpYEJVo2elQ0FCAH9A==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@cspell/dict-css": "^4.0.18", + "@cspell/dict-html": "^4.0.12", + "@cspell/dict-html-symbol-entities": "^4.0.4", + "@cspell/dict-typescript": "^3.2.3" + } + }, + "node_modules/@cspell/dict-monkeyc": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@cspell/dict-monkeyc/-/dict-monkeyc-1.0.11.tgz", + "integrity": "sha512-7Q1Ncu0urALI6dPTrEbSTd//UK0qjRBeaxhnm8uY5fgYNFYAG+u4gtnTIo59S6Bw5P++4H3DiIDYoQdY/lha8w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-node": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-node/-/dict-node-5.0.8.tgz", + "integrity": "sha512-AirZcN2i84ynev3p2/1NCPEhnNsHKMz9zciTngGoqpdItUb2bDt1nJBjwlsrFI78GZRph/VaqTVFwYikmncpXg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-npm": { + "version": "5.2.20", + "resolved": "https://registry.npmjs.org/@cspell/dict-npm/-/dict-npm-5.2.20.tgz", + "integrity": "sha512-tJRv1qEdW3f8fxK/D2huoqkSvM6ogz55hAt9RTdB7tZy57wio9Tkj+xfi2DIeOlmf6e94c6pNPZIC/o5rclMhw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-php": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@cspell/dict-php/-/dict-php-4.1.0.tgz", + "integrity": "sha512-dTDeabyOj7eFvn2Q4Za3uVXM2+SzeFMqX8ly2P0XTo4AzbCmI2hulFD/QIADwWmwiRrInbbf8cxwFHNIYrXl4w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-powershell": { + "version": "5.0.15", + "resolved": "https://registry.npmjs.org/@cspell/dict-powershell/-/dict-powershell-5.0.15.tgz", + "integrity": "sha512-l4S5PAcvCFcVDMJShrYD0X6Huv9dcsQPlsVsBGbH38wvuN7gS7+GxZFAjTNxDmTY1wrNi1cCatSg6Pu2BW4rgg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-public-licenses": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/@cspell/dict-public-licenses/-/dict-public-licenses-2.0.15.tgz", + "integrity": "sha512-cJEOs901H13Pfy0fl4dCD1U+xpWIMaEPq8MeYU83FfDZvellAuSo4GqWCripfIqlhns/L6+UZEIJSOZnjgy7Wg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-python": { + "version": "4.2.21", + "resolved": "https://registry.npmjs.org/@cspell/dict-python/-/dict-python-4.2.21.tgz", + "integrity": "sha512-M9OgwXWhpZqEZqKU2psB2DFsT8q5SwEahkQeIpNIRWIErjwG7I9yYhhfvPz6s5gMCMhhb3hqcPJTnmdgqGrQyg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/dict-data-science": "^2.0.11" + } + }, + "node_modules/@cspell/dict-r": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-r/-/dict-r-2.1.1.tgz", + "integrity": "sha512-71Ka+yKfG4ZHEMEmDxc6+blFkeTTvgKbKAbwiwQAuKl3zpqs1Y0vUtwW2N4b3LgmSPhV3ODVY0y4m5ofqDuKMw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-ruby": { + "version": "5.0.9", + "resolved": "https://registry.npmjs.org/@cspell/dict-ruby/-/dict-ruby-5.0.9.tgz", + "integrity": "sha512-H2vMcERMcANvQshAdrVx0XoWaNX8zmmiQN11dZZTQAZaNJ0xatdJoSqY8C8uhEMW89bfgpN+NQgGuDXW2vmXEw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-rust": { + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-rust/-/dict-rust-4.0.12.tgz", + "integrity": "sha512-z2QiH+q9UlNhobBJArvILRxV8Jz0pKIK7gqu4TgmEYyjiu1TvnGZ1tbYHeu9w3I/wOP6UMDoCBTty5AlYfW0mw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-scala": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-scala/-/dict-scala-5.0.8.tgz", + "integrity": "sha512-YdftVmumv8IZq9zu1gn2U7A4bfM2yj9Vaupydotyjuc+EEZZSqAafTpvW/jKLWji2TgybM1L2IhmV0s/Iv9BTw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-shell": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-shell/-/dict-shell-1.1.2.tgz", + "integrity": "sha512-WqOUvnwcHK1X61wAfwyXq04cn7KYyskg90j4lLg3sGGKMW9Sq13hs91pqrjC44Q+lQLgCobrTkMDw9Wyl9nRFA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-software-terms": { + "version": "5.1.11", + "resolved": "https://registry.npmjs.org/@cspell/dict-software-terms/-/dict-software-terms-5.1.11.tgz", + "integrity": "sha512-xwARdlp6o81BK7uNl4qR5CmLBXuc9xWyEeEwzeAw/8SkBdYheVQO6F1Fey2iqMRDT9LAb5Znbg83pJVpLjgBjg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-sql": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-sql/-/dict-sql-2.2.1.tgz", + "integrity": "sha512-qDHF8MpAYCf4pWU8NKbnVGzkoxMNrFqBHyG/dgrlic5EQiKANCLELYtGlX5auIMDLmTf1inA0eNtv74tyRJ/vg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-svelte": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-svelte/-/dict-svelte-1.0.7.tgz", + "integrity": "sha512-hGZsGqP0WdzKkdpeVLBivRuSNzOTvN036EBmpOwxH+FTY2DuUH7ecW+cSaMwOgmq5JFSdTcbTNFlNC8HN8lhaQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-swift": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@cspell/dict-swift/-/dict-swift-2.0.6.tgz", + "integrity": "sha512-PnpNbrIbex2aqU1kMgwEKvCzgbkHtj3dlFLPMqW1vSniop7YxaDTtvTUO4zA++ugYAEL+UK8vYrBwDPTjjvSnA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-terraform": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@cspell/dict-terraform/-/dict-terraform-1.1.3.tgz", + "integrity": "sha512-gr6wxCydwSFyyBKhBA2xkENXtVFToheqYYGFvlMZXWjviynXmh+NK/JTvTCk/VHk3+lzbO9EEQKee6VjrAUSbA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dict-typescript": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/@cspell/dict-typescript/-/dict-typescript-3.2.3.tgz", + "integrity": "sha512-zXh1wYsNljQZfWWdSPYwQhpwiuW0KPW1dSd8idjMRvSD0aSvWWHoWlrMsmZeRl4qM4QCEAjua8+cjflm41cQBg==", + "dev": true, + "license": "MIT", + "peer": true + }, + "node_modules/@cspell/dict-vue": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-vue/-/dict-vue-3.0.5.tgz", + "integrity": "sha512-Mqutb8jbM+kIcywuPQCCaK5qQHTdaByoEO2J9LKFy3sqAdiBogNkrplqUK0HyyRFgCfbJUgjz3N85iCMcWH0JA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@cspell/dynamic-import": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/dynamic-import/-/dynamic-import-9.2.2.tgz", + "integrity": "sha512-RHQLp0iYcWuK0MGiUBA6dgEOCdI29kZTiBRVcJM/Pzvhvs8j9pzBTkMesZAJ7XOSFz2kU+skRMBsFd774dmYTA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/url": "9.2.2", + "import-meta-resolve": "^4.2.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/filetypes": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/filetypes/-/filetypes-9.2.2.tgz", + "integrity": "sha512-oM+cqipbZ4PNxQcKP9sKOeRKBG+oM3NKO3To1FyxYxvnUG7DukW2yH6BS0/GUY7qK+oSftuq5d6DXEAl9wzbEQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/strong-weak-map": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/strong-weak-map/-/strong-weak-map-9.2.2.tgz", + "integrity": "sha512-Z7rd7NwHaoH/d/Ds97Rv042WS9PgpVdqgO2X0ehYZmgj2E0LIq2MTkIJMheUrSn37D0PW/suroKh6hN15pJtpQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/@cspell/url": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/url/-/url-9.2.2.tgz", + "integrity": "sha512-gvLprhrArvLP/rnC8b766dA80EXwBbzXqb9tNDRk1esQV7d3uS1Ftk1970MRlAfLg1pG6V+3C4UrB6WOB/rMCQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, "node_modules/@gulpjs/messages": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@gulpjs/messages/-/messages-1.1.0.tgz", @@ -48,6 +642,132 @@ "node": ">=10.13.0" } }, + "node_modules/@isaacs/balanced-match": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz", + "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/@isaacs/brace-expansion": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz", + "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@isaacs/balanced-match": "^4.0.1" + }, + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/@isaacs/cliui": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", + "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "dev": true, + "license": "ISC", + "dependencies": { + "string-width": "^5.1.2", + "string-width-cjs": "npm:string-width@^4.2.0", + "strip-ansi": "^7.0.1", + "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", + "wrap-ansi": "^8.1.0", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-regex": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", + "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-styles": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", + "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/emoji-regex": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@isaacs/cliui/node_modules/string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@isaacs/cliui/node_modules/strip-ansi": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", + "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -109,6 +829,16 @@ "@types/node": "*" } }, + "node_modules/@types/debug": { + "version": "4.1.12", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", + "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/ms": "*" + } + }, "node_modules/@types/expect": { "version": "1.20.4", "resolved": "https://registry.npmjs.org/@types/expect/-/expect-1.20.4.tgz", @@ -125,18 +855,39 @@ "@types/node": "*" } }, + "node_modules/@types/katex": { + "version": "0.16.7", + "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz", + "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/minimatch": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz", "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==", "dev": true }, + "node_modules/@types/ms": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz", + "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/node": { "version": "14.14.31", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz", "integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g==", "dev": true }, + "node_modules/@types/unist": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz", + "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/vinyl": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.6.tgz", @@ -248,6 +999,13 @@ "node": ">= 8" } }, + "node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true, + "license": "Python-2.0" + }, "node_modules/arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", @@ -284,6 +1042,13 @@ "node": ">=0.10.0" } }, + "node_modules/array-timsort": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz", + "integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==", + "dev": true, + "license": "MIT" + }, "node_modules/array-union": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", @@ -685,6 +1450,16 @@ "node": ">= 0.8" } }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001191", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz", @@ -707,6 +1482,68 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chalk-template": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-1.1.2.tgz", + "integrity": "sha512-2bxTP2yUH7AJj/VAXfcA+4IcWGdQ87HwBANLt5XxGTeomo8yG0y95N1um9i5StvhT/Bl0/2cARA5v1PpPXUxUA==", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "^5.2.0" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/chalk/chalk-template?sponsor=1" + } + }, + "node_modules/chalk-template/node_modules/chalk": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz", + "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/character-entities": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz", + "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/character-entities-legacy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", + "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/character-reference-invalid": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz", + "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -740,6 +1577,23 @@ "node": ">=6" } }, + "node_modules/clear-module": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/clear-module/-/clear-module-4.1.2.tgz", + "integrity": "sha512-LWAxzHqdHsAZlPlEyJ2Poz6AIs384mPeqLVCru2p0BrP9G/kVGuhNyZYClLO6cXlnuJjzC8xtsJIuMjKqLXoAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^2.0.0", + "resolve-from": "^5.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/clipboard": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz", @@ -853,6 +1707,21 @@ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true }, + "node_modules/comment-json": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/comment-json/-/comment-json-4.4.1.tgz", + "integrity": "sha512-r1To31BQD5060QdkC+Iheai7gHwoSZobzunqkf2/kQ6xIAfJyrKNAFUwdKvkK7Qgu7pVTKQEa7ok7Ed3ycAJgg==", + "dev": true, + "license": "MIT", + "dependencies": { + "array-timsort": "^1.0.3", + "core-util-is": "^1.0.3", + "esprima": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -937,10 +1806,11 @@ "hasInstallScript": true }, "node_modules/core-util-is": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", - "dev": true + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", + "dev": true, + "license": "MIT" }, "node_modules/cors": { "version": "2.8.5", @@ -974,10 +1844,11 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -1002,6 +1873,236 @@ "node": ">= 8" } }, + "node_modules/cspell": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell/-/cspell-9.2.2.tgz", + "integrity": "sha512-D9jxXlYWIxUw4IjicxrmK83n5BzuQVZaIhsDsfRiH7iP4F71gDtKR9b+UgmXevvseN7OH4LkdyaPKzjNliGAbg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-json-reporter": "9.2.2", + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-types": "9.2.2", + "@cspell/dynamic-import": "9.2.2", + "@cspell/url": "9.2.2", + "chalk": "^5.6.2", + "chalk-template": "^1.1.2", + "commander": "^14.0.1", + "cspell-config-lib": "9.2.2", + "cspell-dictionary": "9.2.2", + "cspell-gitignore": "9.2.2", + "cspell-glob": "9.2.2", + "cspell-io": "9.2.2", + "cspell-lib": "9.2.2", + "fast-json-stable-stringify": "^2.1.0", + "flatted": "^3.3.3", + "semver": "^7.7.3", + "tinyglobby": "^0.2.15" + }, + "bin": { + "cspell": "bin.mjs", + "cspell-esm": "bin.mjs" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/streetsidesoftware/cspell?sponsor=1" + } + }, + "node_modules/cspell-config-lib": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-config-lib/-/cspell-config-lib-9.2.2.tgz", + "integrity": "sha512-Fp3jdFxb5gxcQP146TfNVmDqXKfm3xmcEUr1K829DmAFwhc7s+/pCRjhBPoGfQt6U7ugpxjkSx2gGKSbLhp7Mg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-types": "9.2.2", + "comment-json": "^4.4.1", + "smol-toml": "^1.4.2", + "yaml": "^2.8.1" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-dictionary": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-dictionary/-/cspell-dictionary-9.2.2.tgz", + "integrity": "sha512-lnoCFoCAaiFJi+Hz22t+tdTj76jyTA76EYFKhmf/dbj5UO6kVy8by08uFfUbbMaC9Oi09YHnI62P/e+LBx1v8Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-types": "9.2.2", + "cspell-trie-lib": "9.2.2", + "fast-equals": "^5.3.2" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-gitignore": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-gitignore/-/cspell-gitignore-9.2.2.tgz", + "integrity": "sha512-Idx3IVKTpnGoyRlkj8F/lSWtWiJpqLhXmZglTzfGWxzbik8E0aQmSyT3blbNWhZL/K1JqlTjbSiAICVMoWTkhA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/url": "9.2.2", + "cspell-glob": "9.2.2", + "cspell-io": "9.2.2" + }, + "bin": { + "cspell-gitignore": "bin.mjs" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-glob": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-glob/-/cspell-glob-9.2.2.tgz", + "integrity": "sha512-6mhUk4iLu5YzY9PE86ZyAjNFjM7TD8Oh4btJ7ZV+edzJjdVjFugXWyefPXCGNfuvpaJqpuoLDwMvNHJxUmLwbg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/url": "9.2.2", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-glob/node_modules/picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/cspell-grammar": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-grammar/-/cspell-grammar-9.2.2.tgz", + "integrity": "sha512-m0aozo5gjZYL5Vm3/9D0/yLZJTsVJAP8VeRVljN4u5T7w+WY+LsnvKSZhnkOvsT3kCJDhcKEkMVkCo8d/7EcAQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-types": "9.2.2" + }, + "bin": { + "cspell-grammar": "bin.mjs" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-io": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-io/-/cspell-io-9.2.2.tgz", + "integrity": "sha512-Rpky4woeB6/1VUCk7DtRm94A6c5XRbhcj5dUZh851EpZ0ItEz3S9+MhkX8g1sTVkDg6Hln1pu+Nbm9dFIpGkGA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-service-bus": "9.2.2", + "@cspell/url": "9.2.2" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-lib": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-lib/-/cspell-lib-9.2.2.tgz", + "integrity": "sha512-ksy+5vCSZz7ECUDlLA8ZGNEcWmnzl5bMe4IEPHAMaPFY3iWNsG7dXBrae1dj/b/3HqVqOdXPdwjnGAyZciissg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-bundled-dicts": "9.2.2", + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-resolver": "9.2.2", + "@cspell/cspell-types": "9.2.2", + "@cspell/dynamic-import": "9.2.2", + "@cspell/filetypes": "9.2.2", + "@cspell/strong-weak-map": "9.2.2", + "@cspell/url": "9.2.2", + "clear-module": "^4.1.2", + "cspell-config-lib": "9.2.2", + "cspell-dictionary": "9.2.2", + "cspell-glob": "9.2.2", + "cspell-grammar": "9.2.2", + "cspell-io": "9.2.2", + "cspell-trie-lib": "9.2.2", + "env-paths": "^3.0.0", + "gensequence": "^7.0.0", + "import-fresh": "^3.3.1", + "resolve-from": "^5.0.0", + "vscode-languageserver-textdocument": "^1.0.12", + "vscode-uri": "^3.1.0", + "xdg-basedir": "^5.1.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell-trie-lib": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-trie-lib/-/cspell-trie-lib-9.2.2.tgz", + "integrity": "sha512-84L0Or6xkfnDMmxx2BtuaqsM4LOVCgnG4ZzMMgwQJU+9nSOAHs0ULNWQTHLbsCF+FFG/siILpUkIc3z+UxjGFw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-types": "9.2.2", + "gensequence": "^7.0.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell/node_modules/chalk": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz", + "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/cspell/node_modules/commander": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.2.tgz", + "integrity": "sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/cspell/node_modules/semver": { + "version": "7.7.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", + "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1025,6 +2126,30 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/decode-named-character-reference": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz", + "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "character-entities": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/deep-extend": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/del": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz", @@ -1058,6 +2183,16 @@ "node": ">= 0.6" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -1089,6 +2224,20 @@ "node": ">= 0.8.0" } }, + "node_modules/devlop": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", + "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", + "dev": true, + "license": "MIT", + "dependencies": { + "dequal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -1123,6 +2272,13 @@ "node": ">=0.10.0" } }, + "node_modules/eastasianwidth": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "dev": true, + "license": "MIT" + }, "node_modules/easy-extender": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz", @@ -1226,6 +2382,32 @@ "node": ">=10.0.0" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/env-paths": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz", + "integrity": "sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -1250,6 +2432,20 @@ "node": ">=0.8.0" } }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true, + "license": "BSD-2-Clause", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/etag": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", @@ -1323,6 +2519,16 @@ "node": ">= 0.10" } }, + "node_modules/fast-equals": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.3.2.tgz", + "integrity": "sha512-6rxyATwPCkaFIL3JLqw8qXqMpIZ942pTX/tbQFkRsDGblS8tNGtlUauA/+mt6RUfqn/4MoEr+WDkYoIQbibWuQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/fast-fifo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", @@ -1345,6 +2551,13 @@ "node": ">=8.6.0" } }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true, + "license": "MIT" + }, "node_modules/fast-levenshtein": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-3.0.0.tgz", @@ -1466,6 +2679,13 @@ "integrity": "sha512-fw6V/6LdrkB/q/mW/8M4PfX9sDUo4k5UZ9vlRlTrsbhDrxbe51puGoGHOmfr5hAczTH/33Q4jzuDnOBerGaIlQ==", "dev": true }, + "node_modules/flatted": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz", + "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==", + "dev": true, + "license": "ISC" + }, "node_modules/follow-redirects": { "version": "1.15.9", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", @@ -1507,6 +2727,23 @@ "node": ">=0.10.0" } }, + "node_modules/foreground-child": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", + "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", + "dev": true, + "license": "ISC", + "dependencies": { + "cross-spawn": "^7.0.6", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -1569,6 +2806,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gensequence": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/gensequence/-/gensequence-7.0.0.tgz", + "integrity": "sha512-47Frx13aZh01afHJTB3zTtKIlFI6vWY+MYCN9Qpew6i52rfKjnhCF/l1YlC8UmEMvvntZZ6z4PiCcmyuedR2aQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -1654,6 +2901,32 @@ "node": ">= 10.13.0" } }, + "node_modules/global-directory": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-4.0.1.tgz", + "integrity": "sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ini": "4.1.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/global-directory/node_modules/ini": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.1.tgz", + "integrity": "sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/global-modules": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz", @@ -1734,6 +3007,7 @@ "resolved": "https://registry.npmjs.org/gulp/-/gulp-5.0.0.tgz", "integrity": "sha512-S8Z8066SSileaYw1S2N1I64IUc/myI2bqe2ihOBzO6+nKpvNSg7ZcWJt/AwF8LC/NVN+/QZ560Cb/5OPsyhkhg==", "dev": true, + "peer": true, "dependencies": { "glob-watcher": "^6.0.0", "gulp-cli": "^3.0.0", @@ -2236,9 +3510,9 @@ ] }, "node_modules/igniteui-docfx-template": { - "version": "3.9.4", - "resolved": "https://registry.npmjs.org/igniteui-docfx-template/-/igniteui-docfx-template-3.9.4.tgz", - "integrity": "sha512-c4lgIcX1Jq5xz2b6aIjxZJHgbweTmFMjyobJqDD4wr0NP/93OlwMxF6gJjOm50xE6AjAI9u/6cpdc9RNvjCJxA==", + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/igniteui-docfx-template/-/igniteui-docfx-template-3.11.0.tgz", + "integrity": "sha512-h2tMNRqeyi4SPqMIQrAzzlmY+coj25t278AWn5ZDIZ1A1gfMMa9alKV+z+gPFGh9VMecEjxepGVpDZfJwjwyjg==", "dependencies": { "@stackblitz/sdk": "^1.11.0", "anchor-js": "^4.3.0", @@ -2289,10 +3563,61 @@ "node": ">=0.10.0" } }, - "node_modules/indent-string": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", - "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", + "node_modules/import-fresh": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", + "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/import-fresh/node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "license": "MIT", + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/import-fresh/node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/import-meta-resolve": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz", + "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/indent-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", + "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", "dev": true, "engines": { "node": ">=8" @@ -2342,6 +3667,32 @@ "node": ">=0.10.0" } }, + "node_modules/is-alphabetical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", + "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/is-alphanumerical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz", + "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-alphabetical": "^2.0.0", + "is-decimal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -2369,6 +3720,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-decimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz", + "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -2399,6 +3761,17 @@ "node": ">=0.10.0" } }, + "node_modules/is-hexadecimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz", + "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-negated-glob": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz", @@ -2538,6 +3911,22 @@ "url": "https://bevry.me/fund" } }, + "node_modules/jackspeak": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz", + "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/jquery": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz", @@ -2551,6 +3940,19 @@ "jquery": ">=1.8.0 <4.0.0" } }, + "node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -2563,6 +3965,13 @@ "node": ">=6" } }, + "node_modules/jsonc-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz", + "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==", + "dev": true, + "license": "MIT" + }, "node_modules/jsonfile": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz", @@ -2572,6 +3981,43 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsonpointer": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz", + "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/katex": { + "version": "0.16.25", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.25.tgz", + "integrity": "sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==", + "dev": true, + "funding": [ + "https://opencollective.com/katex", + "https://github.com/sponsors/katex" + ], + "license": "MIT", + "dependencies": { + "commander": "^8.3.0" + }, + "bin": { + "katex": "cli.js" + } + }, + "node_modules/katex/node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 12" + } + }, "node_modules/last-run": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/last-run/-/last-run-2.0.0.tgz", @@ -2628,6 +4074,16 @@ "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==", "dev": true }, + "node_modules/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "uc.micro": "^2.0.0" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -2658,60 +4114,753 @@ "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==", "dev": true, "dependencies": { - "lodash._reinterpolate": "^3.0.0", - "lodash.templatesettings": "^4.0.0" + "lodash._reinterpolate": "^3.0.0", + "lodash.templatesettings": "^4.0.0" + } + }, + "node_modules/lodash.templatesettings": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz", + "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==", + "dev": true, + "dependencies": { + "lodash._reinterpolate": "^3.0.0" + } + }, + "node_modules/lru-cache": { + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz", + "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==", + "dev": true, + "license": "ISC", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/lunr": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz", + "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==" + }, + "node_modules/lunr-languages": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/lunr-languages/-/lunr-languages-1.9.0.tgz", + "integrity": "sha512-Be5vFuc8NAheOIjviCRms3ZqFFBlzns3u9DXpPSZvALetgnydAN0poV71pVLFn0keYy/s4VblMMkqewTLe+KPg==" + }, + "node_modules/lz-string": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", + "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==", + "bin": { + "lz-string": "bin/bin.js" + } + }, + "node_modules/map-cache": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", + "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/mark.js": { + "version": "8.11.1", + "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz", + "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==" + }, + "node_modules/markdown-it": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", + "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + }, + "bin": { + "markdown-it": "bin/markdown-it.mjs" + } + }, + "node_modules/markdownlint": { + "version": "0.38.0", + "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.38.0.tgz", + "integrity": "sha512-xaSxkaU7wY/0852zGApM8LdlIfGCW8ETZ0Rr62IQtAnUMlMuifsg09vWJcNYeL4f0anvr8Vo4ZQar8jGpV0btQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "micromark": "4.0.2", + "micromark-core-commonmark": "2.0.3", + "micromark-extension-directive": "4.0.0", + "micromark-extension-gfm-autolink-literal": "2.1.0", + "micromark-extension-gfm-footnote": "2.1.0", + "micromark-extension-gfm-table": "2.1.1", + "micromark-extension-math": "3.1.0", + "micromark-util-types": "2.0.2" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/DavidAnson" + } + }, + "node_modules/markdownlint-cli": { + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/markdownlint-cli/-/markdownlint-cli-0.45.0.tgz", + "integrity": "sha512-GiWr7GfJLVfcopL3t3pLumXCYs8sgWppjIA1F/Cc3zIMgD3tmkpyZ1xkm1Tej8mw53B93JsDjgA3KOftuYcfOw==", + "dev": true, + "license": "MIT", + "dependencies": { + "commander": "~13.1.0", + "glob": "~11.0.2", + "ignore": "~7.0.4", + "js-yaml": "~4.1.0", + "jsonc-parser": "~3.3.1", + "jsonpointer": "~5.0.1", + "markdown-it": "~14.1.0", + "markdownlint": "~0.38.0", + "minimatch": "~10.0.1", + "run-con": "~1.3.2", + "smol-toml": "~1.3.4" + }, + "bin": { + "markdownlint": "markdownlint.js" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/markdownlint-cli/node_modules/commander": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz", + "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/markdownlint-cli/node_modules/glob": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz", + "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==", + "dev": true, + "license": "ISC", + "dependencies": { + "foreground-child": "^3.3.1", + "jackspeak": "^4.1.1", + "minimatch": "^10.0.3", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^2.0.0" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/markdownlint-cli/node_modules/ignore": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz", + "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, + "node_modules/markdownlint-cli/node_modules/minimatch": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz", + "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==", + "dev": true, + "license": "ISC", + "dependencies": { + "@isaacs/brace-expansion": "^5.0.0" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/markdownlint-cli/node_modules/smol-toml": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.3.4.tgz", + "integrity": "sha512-UOPtVuYkzYGee0Bd2Szz8d2G3RfMfJ2t3qVdZUAozZyAk+a0Sxa+QKix0YCwjL/A1RR0ar44nCxaoN9FxdJGwA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">= 18" + }, + "funding": { + "url": "https://github.com/sponsors/cyyynthia" + } + }, + "node_modules/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==", + "dev": true, + "license": "MIT" + }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/micromark": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz", + "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "@types/debug": "^4.0.0", + "debug": "^4.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-core-commonmark": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz", + "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-destination": "^2.0.0", + "micromark-factory-label": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-factory-title": "^2.0.0", + "micromark-factory-whitespace": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-html-tag-name": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-extension-directive": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-4.0.0.tgz", + "integrity": "sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==", + "dev": true, + "license": "MIT", + "dependencies": { + "devlop": "^1.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-factory-whitespace": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "parse-entities": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/micromark-extension-gfm-autolink-literal": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz", + "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==", + "dev": true, + "license": "MIT", + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/micromark-extension-gfm-footnote": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz", + "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==", + "dev": true, + "license": "MIT", + "dependencies": { + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/micromark-extension-gfm-table": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz", + "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==", + "dev": true, + "license": "MIT", + "dependencies": { + "devlop": "^1.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/micromark-extension-math": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz", + "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/katex": "^0.16.0", + "devlop": "^1.0.0", + "katex": "^0.16.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/micromark-factory-destination": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz", + "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-factory-label": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz", + "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "devlop": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-factory-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz", + "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-factory-title": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz", + "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-factory-whitespace": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz", + "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-util-character": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz", + "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-util-chunked": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz", + "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-util-symbol": "^2.0.0" + } + }, + "node_modules/micromark-util-classify-character": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz", + "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-util-combine-extensions": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz", + "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-util-chunked": "^2.0.0", + "micromark-util-types": "^2.0.0" } }, - "node_modules/lodash.templatesettings": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz", - "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==", + "node_modules/micromark-util-decode-numeric-character-reference": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz", + "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==", "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", "dependencies": { - "lodash._reinterpolate": "^3.0.0" + "micromark-util-symbol": "^2.0.0" } }, - "node_modules/lunr": { - "version": "2.3.9", - "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz", - "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==" + "node_modules/micromark-util-encode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz", + "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT" }, - "node_modules/lunr-languages": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/lunr-languages/-/lunr-languages-1.9.0.tgz", - "integrity": "sha512-Be5vFuc8NAheOIjviCRms3ZqFFBlzns3u9DXpPSZvALetgnydAN0poV71pVLFn0keYy/s4VblMMkqewTLe+KPg==" + "node_modules/micromark-util-html-tag-name": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz", + "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT" }, - "node_modules/lz-string": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", - "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==", - "bin": { - "lz-string": "bin/bin.js" + "node_modules/micromark-util-normalize-identifier": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz", + "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-util-symbol": "^2.0.0" } }, - "node_modules/map-cache": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", - "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==", + "node_modules/micromark-util-resolve-all": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz", + "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==", "dev": true, - "engines": { - "node": ">=0.10.0" + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-util-types": "^2.0.0" } }, - "node_modules/mark.js": { - "version": "8.11.1", - "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz", - "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==" + "node_modules/micromark-util-sanitize-uri": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz", + "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-symbol": "^2.0.0" + } }, - "node_modules/merge2": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", - "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "node_modules/micromark-util-subtokenize": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz", + "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==", "dev": true, - "engines": { - "node": ">= 8" + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "devlop": "^1.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" } }, + "node_modules/micromark-util-symbol": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz", + "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT" + }, + "node_modules/micromark-util-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz", + "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT" + }, "node_modules/micromatch": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", @@ -2778,6 +4927,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/mitt": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz", @@ -2931,6 +5090,46 @@ "node": ">=8" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", + "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", + "dev": true, + "license": "BlueOak-1.0.0" + }, + "node_modules/parent-module": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-2.0.0.tgz", + "integrity": "sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==", + "dev": true, + "license": "MIT", + "dependencies": { + "callsites": "^3.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/parse-entities": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz", + "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/unist": "^2.0.0", + "character-entities-legacy": "^3.0.0", + "character-reference-invalid": "^2.0.0", + "decode-named-character-reference": "^1.0.0", + "is-alphanumerical": "^2.0.0", + "is-decimal": "^2.0.0", + "is-hexadecimal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/parse-filepath": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz", @@ -3017,6 +5216,23 @@ "node": ">=0.10.0" } }, + "node_modules/path-scurry": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz", + "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "lru-cache": "^11.0.0", + "minipass": "^7.1.2" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -3117,6 +5333,16 @@ "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", "dev": true }, + "node_modules/punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -3302,6 +5528,16 @@ "node": ">=0.10.0" } }, + "node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/resolve-options": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/resolve-options/-/resolve-options-2.0.0.tgz", @@ -3361,6 +5597,32 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/run-con": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/run-con/-/run-con-1.3.2.tgz", + "integrity": "sha512-CcfE+mYiTcKEzg0IqS08+efdnH0oJ3zV0wSUFBNrMHMuxCtXvBCLzCJHatwuXDcu/RlhjTziTo/a1ruQik6/Yg==", + "dev": true, + "license": "(BSD-2-Clause OR MIT OR Apache-2.0)", + "dependencies": { + "deep-extend": "^0.6.0", + "ini": "~4.1.0", + "minimist": "^1.2.8", + "strip-json-comments": "~3.1.1" + }, + "bin": { + "run-con": "cli.js" + } + }, + "node_modules/run-con/node_modules/ini": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz", + "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -3796,6 +6058,19 @@ "node": ">=8" } }, + "node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -3804,6 +6079,19 @@ "node": ">=8" } }, + "node_modules/smol-toml": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.4.2.tgz", + "integrity": "sha512-rInDH6lCNiEyn3+hH8KVGFdbjc099j47+OSgbMrfDYX1CmXLfdKd7qi6IfcWj2wFxvSVkuI46M+wPGYfEOEj6g==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">= 18" + }, + "funding": { + "url": "https://github.com/sponsors/cyyynthia" + } + }, "node_modules/socket.io": { "version": "4.8.1", "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz", @@ -3964,6 +6252,45 @@ "node": ">=8" } }, + "node_modules/string-width-cjs": { + "name": "string-width", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/string-width-cjs/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/string-width-cjs/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/string-width/node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -3997,6 +6324,43 @@ "node": ">=4" } }, + "node_modules/strip-ansi-cjs": { + "name": "strip-ansi", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-ansi-cjs/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -4090,6 +6454,55 @@ "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" }, + "node_modules/tinyglobby": { + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", + "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, + "license": "MIT", + "peer": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -4165,6 +6578,13 @@ "node": "*" } }, + "node_modules/uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==", + "dev": true, + "license": "MIT" + }, "node_modules/unc-path-regex": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz", @@ -4426,6 +6846,20 @@ "source-map": "^0.5.1" } }, + "node_modules/vscode-languageserver-textdocument": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz", + "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==", + "dev": true, + "license": "MIT" + }, + "node_modules/vscode-uri": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz", + "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==", + "dev": true, + "license": "MIT" + }, "node_modules/which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", @@ -4455,6 +6889,48 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/wrap-ansi-cjs": { + "name": "wrap-ansi", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/wrap-ansi/node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -4503,6 +6979,19 @@ } } }, + "node_modules/xdg-basedir": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-5.1.0.tgz", + "integrity": "sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/xmlhttprequest-ssl": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz", @@ -4521,44 +7010,546 @@ "node": ">=0.4" } }, - "node_modules/y18n": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", - "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", - "dev": true, - "engines": { - "node": ">=10" - } + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/yaml": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", + "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", + "dev": true, + "license": "ISC", + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14.6" + } + }, + "node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, + "engines": { + "node": ">=12" + } + } + }, + "dependencies": { + "@cspell/cspell-bundled-dicts": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-9.2.2.tgz", + "integrity": "sha512-W3FKgb89DwMuQEVWz0dPH9uZqC8w+ylpbtmXuevflw3SLtGPyllMvf/1T6tcqIkg3KEWoRYFxjpJWyoOjJkZGw==", + "dev": true, + "requires": { + "@cspell/dict-ada": "^4.1.1", + "@cspell/dict-al": "^1.1.1", + "@cspell/dict-aws": "^4.0.15", + "@cspell/dict-bash": "^4.2.1", + "@cspell/dict-companies": "^3.2.6", + "@cspell/dict-cpp": "^6.0.12", + "@cspell/dict-cryptocurrencies": "^5.0.5", + "@cspell/dict-csharp": "^4.0.7", + "@cspell/dict-css": "^4.0.18", + "@cspell/dict-dart": "^2.3.1", + "@cspell/dict-data-science": "^2.0.10", + "@cspell/dict-django": "^4.1.5", + "@cspell/dict-docker": "^1.1.16", + "@cspell/dict-dotnet": "^5.0.10", + "@cspell/dict-elixir": "^4.0.8", + "@cspell/dict-en_us": "^4.4.20", + "@cspell/dict-en-common-misspellings": "^2.1.6", + "@cspell/dict-en-gb-mit": "^3.1.10", + "@cspell/dict-filetypes": "^3.0.14", + "@cspell/dict-flutter": "^1.1.1", + "@cspell/dict-fonts": "^4.0.5", + "@cspell/dict-fsharp": "^1.1.1", + "@cspell/dict-fullstack": "^3.2.7", + "@cspell/dict-gaming-terms": "^1.1.2", + "@cspell/dict-git": "^3.0.7", + "@cspell/dict-golang": "^6.0.23", + "@cspell/dict-google": "^1.0.9", + "@cspell/dict-haskell": "^4.0.6", + "@cspell/dict-html": "^4.0.12", + "@cspell/dict-html-symbol-entities": "^4.0.4", + "@cspell/dict-java": "^5.0.12", + "@cspell/dict-julia": "^1.1.1", + "@cspell/dict-k8s": "^1.0.12", + "@cspell/dict-kotlin": "^1.1.1", + "@cspell/dict-latex": "^4.0.4", + "@cspell/dict-lorem-ipsum": "^4.0.5", + "@cspell/dict-lua": "^4.0.8", + "@cspell/dict-makefile": "^1.0.5", + "@cspell/dict-markdown": "^2.0.12", + "@cspell/dict-monkeyc": "^1.0.11", + "@cspell/dict-node": "^5.0.8", + "@cspell/dict-npm": "^5.2.18", + "@cspell/dict-php": "^4.0.15", + "@cspell/dict-powershell": "^5.0.15", + "@cspell/dict-public-licenses": "^2.0.15", + "@cspell/dict-python": "^4.2.20", + "@cspell/dict-r": "^2.1.1", + "@cspell/dict-ruby": "^5.0.9", + "@cspell/dict-rust": "^4.0.12", + "@cspell/dict-scala": "^5.0.8", + "@cspell/dict-shell": "^1.1.1", + "@cspell/dict-software-terms": "^5.1.9", + "@cspell/dict-sql": "^2.2.1", + "@cspell/dict-svelte": "^1.0.7", + "@cspell/dict-swift": "^2.0.6", + "@cspell/dict-terraform": "^1.1.3", + "@cspell/dict-typescript": "^3.2.3", + "@cspell/dict-vue": "^3.0.5" + } + }, + "@cspell/cspell-json-reporter": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-json-reporter/-/cspell-json-reporter-9.2.2.tgz", + "integrity": "sha512-7nTqnnRCyQB+bTmIuBR4aRwV5JHymckmz1snCF+ItjDSvlc3qzjxldG8ao5zm34h+b/8YCvdMU9B92eHBt803w==", + "dev": true, + "requires": { + "@cspell/cspell-types": "9.2.2" + } + }, + "@cspell/cspell-pipe": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-pipe/-/cspell-pipe-9.2.2.tgz", + "integrity": "sha512-YOdbp1uoKMkYy92qxMjoOxcqcR6LEVDus+72C4X9L8eJ2b+CBO3VaVqU16Y7OQGjYMnukYgB6eyTh8YFo9uBRw==", + "dev": true + }, + "@cspell/cspell-resolver": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-resolver/-/cspell-resolver-9.2.2.tgz", + "integrity": "sha512-5tST2xoU8xbXihr1bdQ6pfcScQ3PkFpKKhFGClVfqS0yf/CKYURqzJlRDVjrFZsl+PT6tw/Jdt0E9Wwp1X1Qgw==", + "dev": true, + "requires": { + "global-directory": "^4.0.1" + } + }, + "@cspell/cspell-service-bus": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-service-bus/-/cspell-service-bus-9.2.2.tgz", + "integrity": "sha512-AxJuw/YPJkz1Ali5mA+OW9y4JiJzb2U7H4pGYq0nRB/mWwI/xtFjuWVkI+BhwrA2P6hHdifu0JdxSLqW4IYpPQ==", + "dev": true + }, + "@cspell/cspell-types": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/cspell-types/-/cspell-types-9.2.2.tgz", + "integrity": "sha512-/1dRFQ3sEY9Yo+f3w0A8MFJ0BOapQc1uFjlMF19c3uoD/e4PpNLpL1qXY4FeLWKDk1D9VT8SL93J+lIwEi5bvg==", + "dev": true + }, + "@cspell/dict-ada": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-ada/-/dict-ada-4.1.1.tgz", + "integrity": "sha512-E+0YW9RhZod/9Qy2gxfNZiHJjCYFlCdI69br1eviQQWB8yOTJX0JHXLs79kOYhSW0kINPVUdvddEBe6Lu6CjGQ==", + "dev": true + }, + "@cspell/dict-al": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-al/-/dict-al-1.1.1.tgz", + "integrity": "sha512-sD8GCaZetgQL4+MaJLXqbzWcRjfKVp8x+px3HuCaaiATAAtvjwUQ5/Iubiqwfd1boIh2Y1/3EgM3TLQ7Q8e0wQ==", + "dev": true + }, + "@cspell/dict-aws": { + "version": "4.0.15", + "resolved": "https://registry.npmjs.org/@cspell/dict-aws/-/dict-aws-4.0.15.tgz", + "integrity": "sha512-aPY7VVR5Os4rz36EaqXBAEy14wR4Rqv+leCJ2Ug/Gd0IglJpM30LalF3e2eJChnjje3vWoEC0Rz3+e5gpZG+Kg==", + "dev": true + }, + "@cspell/dict-bash": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-bash/-/dict-bash-4.2.2.tgz", + "integrity": "sha512-kyWbwtX3TsCf5l49gGQIZkRLaB/P8g73GDRm41Zu8Mv51kjl2H7Au0TsEvHv7jzcsRLS6aUYaZv6Zsvk1fOz+Q==", + "dev": true, + "requires": { + "@cspell/dict-shell": "1.1.2" + } + }, + "@cspell/dict-companies": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-companies/-/dict-companies-3.2.7.tgz", + "integrity": "sha512-fEyr3LmpFKTaD0LcRhB4lfW1AmULYBqzg4gWAV0dQCv06l+TsA+JQ+3pZJbUcoaZirtgsgT3dL3RUjmGPhUH0A==", + "dev": true + }, + "@cspell/dict-cpp": { + "version": "6.0.14", + "resolved": "https://registry.npmjs.org/@cspell/dict-cpp/-/dict-cpp-6.0.14.tgz", + "integrity": "sha512-dkmpSwvVfVdtoZ4mW/CK2Ep1v8mJlp6uiKpMNbSMOdJl4kq28nQS4vKNIX3B2bJa0Ha5iHHu+1mNjiLeO3g7Xg==", + "dev": true + }, + "@cspell/dict-cryptocurrencies": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-cryptocurrencies/-/dict-cryptocurrencies-5.0.5.tgz", + "integrity": "sha512-R68hYYF/rtlE6T/dsObStzN5QZw+0aQBinAXuWCVqwdS7YZo0X33vGMfChkHaiCo3Z2+bkegqHlqxZF4TD3rUA==", + "dev": true + }, + "@cspell/dict-csharp": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-csharp/-/dict-csharp-4.0.7.tgz", + "integrity": "sha512-H16Hpu8O/1/lgijFt2lOk4/nnldFtQ4t8QHbyqphqZZVE5aS4J/zD/WvduqnLY21aKhZS6jo/xF5PX9jyqPKUA==", + "dev": true + }, + "@cspell/dict-css": { + "version": "4.0.18", + "resolved": "https://registry.npmjs.org/@cspell/dict-css/-/dict-css-4.0.18.tgz", + "integrity": "sha512-EF77RqROHL+4LhMGW5NTeKqfUd/e4OOv6EDFQ/UQQiFyWuqkEKyEz0NDILxOFxWUEVdjT2GQ2cC7t12B6pESwg==", + "dev": true, + "peer": true + }, + "@cspell/dict-dart": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-dart/-/dict-dart-2.3.1.tgz", + "integrity": "sha512-xoiGnULEcWdodXI6EwVyqpZmpOoh8RA2Xk9BNdR7DLamV/QMvEYn8KJ7NlRiTSauJKPNkHHQ5EVHRM6sTS7jdg==", + "dev": true + }, + "@cspell/dict-data-science": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@cspell/dict-data-science/-/dict-data-science-2.0.11.tgz", + "integrity": "sha512-Dt+83nVCcF+dQyvFSaZjCKt1H5KbsVJFtH2X7VUfmIzQu8xCnV1fUmkhBzGJ+NiFs99Oy9JA6I9EjeqExzXk7g==", + "dev": true + }, + "@cspell/dict-django": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-django/-/dict-django-4.1.5.tgz", + "integrity": "sha512-AvTWu99doU3T8ifoMYOMLW2CXKvyKLukPh1auOPwFGHzueWYvBBN+OxF8wF7XwjTBMMeRleVdLh3aWCDEX/ZWg==", + "dev": true + }, + "@cspell/dict-docker": { + "version": "1.1.16", + "resolved": "https://registry.npmjs.org/@cspell/dict-docker/-/dict-docker-1.1.16.tgz", + "integrity": "sha512-UiVQ5RmCg6j0qGIxrBnai3pIB+aYKL3zaJGvXk1O/ertTKJif9RZikKXCEgqhaCYMweM4fuLqWSVmw3hU164Iw==", + "dev": true + }, + "@cspell/dict-dotnet": { + "version": "5.0.10", + "resolved": "https://registry.npmjs.org/@cspell/dict-dotnet/-/dict-dotnet-5.0.10.tgz", + "integrity": "sha512-ooar8BP/RBNP1gzYfJPStKEmpWy4uv/7JCq6FOnJLeD1yyfG3d/LFMVMwiJo+XWz025cxtkM3wuaikBWzCqkmg==", + "dev": true + }, + "@cspell/dict-elixir": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-elixir/-/dict-elixir-4.0.8.tgz", + "integrity": "sha512-CyfphrbMyl4Ms55Vzuj+mNmd693HjBFr9hvU+B2YbFEZprE5AG+EXLYTMRWrXbpds4AuZcvN3deM2XVB80BN/Q==", + "dev": true + }, + "@cspell/dict-en_us": { + "version": "4.4.24", + "resolved": "https://registry.npmjs.org/@cspell/dict-en_us/-/dict-en_us-4.4.24.tgz", + "integrity": "sha512-JE+/H2YicHJTneRmgH4GSI21rS+1yGZVl1jfOQgl8iHLC+yTTMtCvueNDMK94CgJACzYAoCsQB70MqiFJJfjLQ==", + "dev": true + }, + "@cspell/dict-en-common-misspellings": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-en-common-misspellings/-/dict-en-common-misspellings-2.1.8.tgz", + "integrity": "sha512-vDsjRFPQGuAADAiitf82z9Mz3DcqKZi6V5hPAEIFkLLKjFVBcjUsSq59SfL59ElIFb76MtBO0BLifdEbBj+DoQ==", + "dev": true + }, + "@cspell/dict-en-gb-mit": { + "version": "3.1.14", + "resolved": "https://registry.npmjs.org/@cspell/dict-en-gb-mit/-/dict-en-gb-mit-3.1.14.tgz", + "integrity": "sha512-b+vEerlHP6rnNf30tmTJb7JZnOq4WAslYUvexOz/L3gDna9YJN3bAnwRJ3At3bdcOcMG7PTv3Pi+C73IR22lNg==", + "dev": true + }, + "@cspell/dict-filetypes": { + "version": "3.0.14", + "resolved": "https://registry.npmjs.org/@cspell/dict-filetypes/-/dict-filetypes-3.0.14.tgz", + "integrity": "sha512-KSXaSMYYNMLLdHEnju1DyRRH3eQWPRYRnOXpuHUdOh2jC44VgQoxyMU7oB3NAhDhZKBPCihabzECsAGFbdKfEA==", + "dev": true + }, + "@cspell/dict-flutter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-flutter/-/dict-flutter-1.1.1.tgz", + "integrity": "sha512-UlOzRcH2tNbFhZmHJN48Za/2/MEdRHl2BMkCWZBYs+30b91mWvBfzaN4IJQU7dUZtowKayVIF9FzvLZtZokc5A==", + "dev": true + }, + "@cspell/dict-fonts": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-fonts/-/dict-fonts-4.0.5.tgz", + "integrity": "sha512-BbpkX10DUX/xzHs6lb7yzDf/LPjwYIBJHJlUXSBXDtK/1HaeS+Wqol4Mlm2+NAgZ7ikIE5DQMViTgBUY3ezNoQ==", + "dev": true + }, + "@cspell/dict-fsharp": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-fsharp/-/dict-fsharp-1.1.1.tgz", + "integrity": "sha512-imhs0u87wEA4/cYjgzS0tAyaJpwG7vwtC8UyMFbwpmtw+/bgss+osNfyqhYRyS/ehVCWL17Ewx2UPkexjKyaBA==", + "dev": true + }, + "@cspell/dict-fullstack": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-fullstack/-/dict-fullstack-3.2.7.tgz", + "integrity": "sha512-IxEk2YAwAJKYCUEgEeOg3QvTL4XLlyArJElFuMQevU1dPgHgzWElFevN5lsTFnvMFA1riYsVinqJJX0BanCFEg==", + "dev": true + }, + "@cspell/dict-gaming-terms": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-gaming-terms/-/dict-gaming-terms-1.1.2.tgz", + "integrity": "sha512-9XnOvaoTBscq0xuD6KTEIkk9hhdfBkkvJAIsvw3JMcnp1214OCGW8+kako5RqQ2vTZR3Tnf3pc57o7VgkM0q1Q==", + "dev": true + }, + "@cspell/dict-git": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-git/-/dict-git-3.0.7.tgz", + "integrity": "sha512-odOwVKgfxCQfiSb+nblQZc4ErXmnWEnv8XwkaI4sNJ7cNmojnvogYVeMqkXPjvfrgEcizEEA4URRD2Ms5PDk1w==", + "dev": true + }, + "@cspell/dict-golang": { + "version": "6.0.24", + "resolved": "https://registry.npmjs.org/@cspell/dict-golang/-/dict-golang-6.0.24.tgz", + "integrity": "sha512-rY7PlC3MsHozmjrZWi0HQPUl0BVCV0+mwK0rnMT7pOIXqOe4tWCYMULDIsEk4F0gbIxb5badd2dkCPDYjLnDgA==", + "dev": true + }, + "@cspell/dict-google": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@cspell/dict-google/-/dict-google-1.0.9.tgz", + "integrity": "sha512-biL65POqialY0i4g6crj7pR6JnBkbsPovB2WDYkj3H4TuC/QXv7Pu5pdPxeUJA6TSCHI7T5twsO4VSVyRxD9CA==", + "dev": true + }, + "@cspell/dict-haskell": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@cspell/dict-haskell/-/dict-haskell-4.0.6.tgz", + "integrity": "sha512-ib8SA5qgftExpYNjWhpYIgvDsZ/0wvKKxSP+kuSkkak520iPvTJumEpIE+qPcmJQo4NzdKMN8nEfaeci4OcFAQ==", + "dev": true + }, + "@cspell/dict-html": { + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-html/-/dict-html-4.0.12.tgz", + "integrity": "sha512-JFffQ1dDVEyJq6tCDWv0r/RqkdSnV43P2F/3jJ9rwLgdsOIXwQbXrz6QDlvQLVvNSnORH9KjDtenFTGDyzfCaA==", + "dev": true, + "peer": true + }, + "@cspell/dict-html-symbol-entities": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@cspell/dict-html-symbol-entities/-/dict-html-symbol-entities-4.0.4.tgz", + "integrity": "sha512-afea+0rGPDeOV9gdO06UW183Qg6wRhWVkgCFwiO3bDupAoyXRuvupbb5nUyqSTsLXIKL8u8uXQlJ9pkz07oVXw==", + "dev": true, + "peer": true + }, + "@cspell/dict-java": { + "version": "5.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-java/-/dict-java-5.0.12.tgz", + "integrity": "sha512-qPSNhTcl7LGJ5Qp6VN71H8zqvRQK04S08T67knMq9hTA8U7G1sTKzLmBaDOFhq17vNX/+rT+rbRYp+B5Nwza1A==", + "dev": true + }, + "@cspell/dict-julia": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-julia/-/dict-julia-1.1.1.tgz", + "integrity": "sha512-WylJR9TQ2cgwd5BWEOfdO3zvDB+L7kYFm0I9u0s9jKHWQ6yKmfKeMjU9oXxTBxIufhCXm92SKwwVNAC7gjv+yA==", + "dev": true + }, + "@cspell/dict-k8s": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-k8s/-/dict-k8s-1.0.12.tgz", + "integrity": "sha512-2LcllTWgaTfYC7DmkMPOn9GsBWsA4DZdlun4po8s2ysTP7CPEnZc1ZfK6pZ2eI4TsZemlUQQ+NZxMe9/QutQxg==", + "dev": true + }, + "@cspell/dict-kotlin": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-kotlin/-/dict-kotlin-1.1.1.tgz", + "integrity": "sha512-J3NzzfgmxRvEeOe3qUXnSJQCd38i/dpF9/t3quuWh6gXM+krsAXP75dY1CzDmS8mrJAlBdVBeAW5eAZTD8g86Q==", + "dev": true + }, + "@cspell/dict-latex": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@cspell/dict-latex/-/dict-latex-4.0.4.tgz", + "integrity": "sha512-YdTQhnTINEEm/LZgTzr9Voz4mzdOXH7YX+bSFs3hnkUHCUUtX/mhKgf1CFvZ0YNM2afjhQcmLaR9bDQVyYBvpA==", + "dev": true + }, + "@cspell/dict-lorem-ipsum": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-lorem-ipsum/-/dict-lorem-ipsum-4.0.5.tgz", + "integrity": "sha512-9a4TJYRcPWPBKkQAJ/whCu4uCAEgv/O2xAaZEI0n4y1/l18Yyx8pBKoIX5QuVXjjmKEkK7hi5SxyIsH7pFEK9Q==", + "dev": true + }, + "@cspell/dict-lua": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-lua/-/dict-lua-4.0.8.tgz", + "integrity": "sha512-N4PkgNDMu9JVsRu7JBS/3E/dvfItRgk9w5ga2dKq+JupP2Y3lojNaAVFhXISh4Y0a6qXDn2clA6nvnavQ/jjLA==", + "dev": true + }, + "@cspell/dict-makefile": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-makefile/-/dict-makefile-1.0.5.tgz", + "integrity": "sha512-4vrVt7bGiK8Rx98tfRbYo42Xo2IstJkAF4tLLDMNQLkQ86msDlYSKG1ZCk8Abg+EdNcFAjNhXIiNO+w4KflGAQ==", + "dev": true + }, + "@cspell/dict-markdown": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-markdown/-/dict-markdown-2.0.12.tgz", + "integrity": "sha512-ufwoliPijAgWkD/ivAMC+A9QD895xKiJRF/fwwknQb7kt7NozTLKFAOBtXGPJAB4UjhGBpYEJVo2elQ0FCAH9A==", + "dev": true, + "requires": {} + }, + "@cspell/dict-monkeyc": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@cspell/dict-monkeyc/-/dict-monkeyc-1.0.11.tgz", + "integrity": "sha512-7Q1Ncu0urALI6dPTrEbSTd//UK0qjRBeaxhnm8uY5fgYNFYAG+u4gtnTIo59S6Bw5P++4H3DiIDYoQdY/lha8w==", + "dev": true + }, + "@cspell/dict-node": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-node/-/dict-node-5.0.8.tgz", + "integrity": "sha512-AirZcN2i84ynev3p2/1NCPEhnNsHKMz9zciTngGoqpdItUb2bDt1nJBjwlsrFI78GZRph/VaqTVFwYikmncpXg==", + "dev": true + }, + "@cspell/dict-npm": { + "version": "5.2.20", + "resolved": "https://registry.npmjs.org/@cspell/dict-npm/-/dict-npm-5.2.20.tgz", + "integrity": "sha512-tJRv1qEdW3f8fxK/D2huoqkSvM6ogz55hAt9RTdB7tZy57wio9Tkj+xfi2DIeOlmf6e94c6pNPZIC/o5rclMhw==", + "dev": true + }, + "@cspell/dict-php": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@cspell/dict-php/-/dict-php-4.1.0.tgz", + "integrity": "sha512-dTDeabyOj7eFvn2Q4Za3uVXM2+SzeFMqX8ly2P0XTo4AzbCmI2hulFD/QIADwWmwiRrInbbf8cxwFHNIYrXl4w==", + "dev": true + }, + "@cspell/dict-powershell": { + "version": "5.0.15", + "resolved": "https://registry.npmjs.org/@cspell/dict-powershell/-/dict-powershell-5.0.15.tgz", + "integrity": "sha512-l4S5PAcvCFcVDMJShrYD0X6Huv9dcsQPlsVsBGbH38wvuN7gS7+GxZFAjTNxDmTY1wrNi1cCatSg6Pu2BW4rgg==", + "dev": true + }, + "@cspell/dict-public-licenses": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/@cspell/dict-public-licenses/-/dict-public-licenses-2.0.15.tgz", + "integrity": "sha512-cJEOs901H13Pfy0fl4dCD1U+xpWIMaEPq8MeYU83FfDZvellAuSo4GqWCripfIqlhns/L6+UZEIJSOZnjgy7Wg==", + "dev": true + }, + "@cspell/dict-python": { + "version": "4.2.21", + "resolved": "https://registry.npmjs.org/@cspell/dict-python/-/dict-python-4.2.21.tgz", + "integrity": "sha512-M9OgwXWhpZqEZqKU2psB2DFsT8q5SwEahkQeIpNIRWIErjwG7I9yYhhfvPz6s5gMCMhhb3hqcPJTnmdgqGrQyg==", + "dev": true, + "requires": { + "@cspell/dict-data-science": "^2.0.11" + } + }, + "@cspell/dict-r": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-r/-/dict-r-2.1.1.tgz", + "integrity": "sha512-71Ka+yKfG4ZHEMEmDxc6+blFkeTTvgKbKAbwiwQAuKl3zpqs1Y0vUtwW2N4b3LgmSPhV3ODVY0y4m5ofqDuKMw==", + "dev": true + }, + "@cspell/dict-ruby": { + "version": "5.0.9", + "resolved": "https://registry.npmjs.org/@cspell/dict-ruby/-/dict-ruby-5.0.9.tgz", + "integrity": "sha512-H2vMcERMcANvQshAdrVx0XoWaNX8zmmiQN11dZZTQAZaNJ0xatdJoSqY8C8uhEMW89bfgpN+NQgGuDXW2vmXEw==", + "dev": true + }, + "@cspell/dict-rust": { + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/@cspell/dict-rust/-/dict-rust-4.0.12.tgz", + "integrity": "sha512-z2QiH+q9UlNhobBJArvILRxV8Jz0pKIK7gqu4TgmEYyjiu1TvnGZ1tbYHeu9w3I/wOP6UMDoCBTty5AlYfW0mw==", + "dev": true + }, + "@cspell/dict-scala": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/@cspell/dict-scala/-/dict-scala-5.0.8.tgz", + "integrity": "sha512-YdftVmumv8IZq9zu1gn2U7A4bfM2yj9Vaupydotyjuc+EEZZSqAafTpvW/jKLWji2TgybM1L2IhmV0s/Iv9BTw==", + "dev": true + }, + "@cspell/dict-shell": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@cspell/dict-shell/-/dict-shell-1.1.2.tgz", + "integrity": "sha512-WqOUvnwcHK1X61wAfwyXq04cn7KYyskg90j4lLg3sGGKMW9Sq13hs91pqrjC44Q+lQLgCobrTkMDw9Wyl9nRFA==", + "dev": true + }, + "@cspell/dict-software-terms": { + "version": "5.1.11", + "resolved": "https://registry.npmjs.org/@cspell/dict-software-terms/-/dict-software-terms-5.1.11.tgz", + "integrity": "sha512-xwARdlp6o81BK7uNl4qR5CmLBXuc9xWyEeEwzeAw/8SkBdYheVQO6F1Fey2iqMRDT9LAb5Znbg83pJVpLjgBjg==", + "dev": true + }, + "@cspell/dict-sql": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@cspell/dict-sql/-/dict-sql-2.2.1.tgz", + "integrity": "sha512-qDHF8MpAYCf4pWU8NKbnVGzkoxMNrFqBHyG/dgrlic5EQiKANCLELYtGlX5auIMDLmTf1inA0eNtv74tyRJ/vg==", + "dev": true + }, + "@cspell/dict-svelte": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@cspell/dict-svelte/-/dict-svelte-1.0.7.tgz", + "integrity": "sha512-hGZsGqP0WdzKkdpeVLBivRuSNzOTvN036EBmpOwxH+FTY2DuUH7ecW+cSaMwOgmq5JFSdTcbTNFlNC8HN8lhaQ==", + "dev": true + }, + "@cspell/dict-swift": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@cspell/dict-swift/-/dict-swift-2.0.6.tgz", + "integrity": "sha512-PnpNbrIbex2aqU1kMgwEKvCzgbkHtj3dlFLPMqW1vSniop7YxaDTtvTUO4zA++ugYAEL+UK8vYrBwDPTjjvSnA==", + "dev": true }, - "node_modules/yargs": { - "version": "17.7.2", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", - "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "@cspell/dict-terraform": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@cspell/dict-terraform/-/dict-terraform-1.1.3.tgz", + "integrity": "sha512-gr6wxCydwSFyyBKhBA2xkENXtVFToheqYYGFvlMZXWjviynXmh+NK/JTvTCk/VHk3+lzbO9EEQKee6VjrAUSbA==", + "dev": true + }, + "@cspell/dict-typescript": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/@cspell/dict-typescript/-/dict-typescript-3.2.3.tgz", + "integrity": "sha512-zXh1wYsNljQZfWWdSPYwQhpwiuW0KPW1dSd8idjMRvSD0aSvWWHoWlrMsmZeRl4qM4QCEAjua8+cjflm41cQBg==", "dev": true, - "dependencies": { - "cliui": "^8.0.1", - "escalade": "^3.1.1", - "get-caller-file": "^2.0.5", - "require-directory": "^2.1.1", - "string-width": "^4.2.3", - "y18n": "^5.0.5", - "yargs-parser": "^21.1.1" - }, - "engines": { - "node": ">=12" - } + "peer": true }, - "node_modules/yargs-parser": { - "version": "21.1.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", - "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "@cspell/dict-vue": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@cspell/dict-vue/-/dict-vue-3.0.5.tgz", + "integrity": "sha512-Mqutb8jbM+kIcywuPQCCaK5qQHTdaByoEO2J9LKFy3sqAdiBogNkrplqUK0HyyRFgCfbJUgjz3N85iCMcWH0JA==", + "dev": true + }, + "@cspell/dynamic-import": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/dynamic-import/-/dynamic-import-9.2.2.tgz", + "integrity": "sha512-RHQLp0iYcWuK0MGiUBA6dgEOCdI29kZTiBRVcJM/Pzvhvs8j9pzBTkMesZAJ7XOSFz2kU+skRMBsFd774dmYTA==", "dev": true, - "engines": { - "node": ">=12" + "requires": { + "@cspell/url": "9.2.2", + "import-meta-resolve": "^4.2.0" } - } - }, - "dependencies": { + }, + "@cspell/filetypes": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/filetypes/-/filetypes-9.2.2.tgz", + "integrity": "sha512-oM+cqipbZ4PNxQcKP9sKOeRKBG+oM3NKO3To1FyxYxvnUG7DukW2yH6BS0/GUY7qK+oSftuq5d6DXEAl9wzbEQ==", + "dev": true + }, + "@cspell/strong-weak-map": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/strong-weak-map/-/strong-weak-map-9.2.2.tgz", + "integrity": "sha512-Z7rd7NwHaoH/d/Ds97Rv042WS9PgpVdqgO2X0ehYZmgj2E0LIq2MTkIJMheUrSn37D0PW/suroKh6hN15pJtpQ==", + "dev": true + }, + "@cspell/url": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@cspell/url/-/url-9.2.2.tgz", + "integrity": "sha512-gvLprhrArvLP/rnC8b766dA80EXwBbzXqb9tNDRk1esQV7d3uS1Ftk1970MRlAfLg1pG6V+3C4UrB6WOB/rMCQ==", + "dev": true + }, "@gulpjs/messages": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@gulpjs/messages/-/messages-1.1.0.tgz", @@ -4574,6 +7565,86 @@ "is-negated-glob": "^1.0.0" } }, + "@isaacs/balanced-match": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz", + "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==", + "dev": true + }, + "@isaacs/brace-expansion": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz", + "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==", + "dev": true, + "requires": { + "@isaacs/balanced-match": "^4.0.1" + } + }, + "@isaacs/cliui": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", + "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "dev": true, + "requires": { + "string-width": "^5.1.2", + "string-width-cjs": "npm:string-width@^4.2.0", + "strip-ansi": "^7.0.1", + "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", + "wrap-ansi": "^8.1.0", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", + "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", + "dev": true + }, + "ansi-styles": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", + "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", + "dev": true + }, + "emoji-regex": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true + }, + "string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, + "requires": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + } + }, + "strip-ansi": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", + "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", + "dev": true, + "requires": { + "ansi-regex": "^6.0.1" + } + }, + "wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, + "requires": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + } + } + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4626,6 +7697,15 @@ "@types/node": "*" } }, + "@types/debug": { + "version": "4.1.12", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", + "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==", + "dev": true, + "requires": { + "@types/ms": "*" + } + }, "@types/expect": { "version": "1.20.4", "resolved": "https://registry.npmjs.org/@types/expect/-/expect-1.20.4.tgz", @@ -4642,18 +7722,36 @@ "@types/node": "*" } }, + "@types/katex": { + "version": "0.16.7", + "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz", + "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==", + "dev": true + }, "@types/minimatch": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz", "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==", "dev": true }, + "@types/ms": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz", + "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==", + "dev": true + }, "@types/node": { "version": "14.14.31", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz", "integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g==", "dev": true }, + "@types/unist": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz", + "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==", + "dev": true + }, "@types/vinyl": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.6.tgz", @@ -4738,6 +7836,12 @@ "picomatch": "^2.0.4" } }, + "argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, "arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", @@ -4762,6 +7866,12 @@ "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==", "dev": true }, + "array-timsort": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz", + "integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==", + "dev": true + }, "array-union": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", @@ -5071,6 +8181,12 @@ "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==", "dev": true }, + "callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true + }, "caniuse-lite": { "version": "1.0.30001191", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz", @@ -5087,6 +8203,41 @@ "supports-color": "^7.1.0" } }, + "chalk-template": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-1.1.2.tgz", + "integrity": "sha512-2bxTP2yUH7AJj/VAXfcA+4IcWGdQ87HwBANLt5XxGTeomo8yG0y95N1um9i5StvhT/Bl0/2cARA5v1PpPXUxUA==", + "dev": true, + "requires": { + "chalk": "^5.2.0" + }, + "dependencies": { + "chalk": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz", + "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==", + "dev": true + } + } + }, + "character-entities": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz", + "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==", + "dev": true + }, + "character-entities-legacy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", + "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", + "dev": true + }, + "character-reference-invalid": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz", + "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==", + "dev": true + }, "chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -5109,6 +8260,16 @@ "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", "dev": true }, + "clear-module": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/clear-module/-/clear-module-4.1.2.tgz", + "integrity": "sha512-LWAxzHqdHsAZlPlEyJ2Poz6AIs384mPeqLVCru2p0BrP9G/kVGuhNyZYClLO6cXlnuJjzC8xtsJIuMjKqLXoAw==", + "dev": true, + "requires": { + "parent-module": "^2.0.0", + "resolve-from": "^5.0.0" + } + }, "clipboard": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz", @@ -5203,6 +8364,17 @@ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true }, + "comment-json": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/comment-json/-/comment-json-4.4.1.tgz", + "integrity": "sha512-r1To31BQD5060QdkC+Iheai7gHwoSZobzunqkf2/kQ6xIAfJyrKNAFUwdKvkK7Qgu7pVTKQEa7ok7Ed3ycAJgg==", + "dev": true, + "requires": { + "array-timsort": "^1.0.3", + "core-util-is": "^1.0.3", + "esprima": "^4.0.1" + } + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -5274,9 +8446,9 @@ "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" }, "core-util-is": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", "dev": true }, "cors": { @@ -5299,9 +8471,9 @@ } }, "cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "requires": { "path-key": "^3.1.0", @@ -5320,6 +8492,166 @@ } } }, + "cspell": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell/-/cspell-9.2.2.tgz", + "integrity": "sha512-D9jxXlYWIxUw4IjicxrmK83n5BzuQVZaIhsDsfRiH7iP4F71gDtKR9b+UgmXevvseN7OH4LkdyaPKzjNliGAbg==", + "dev": true, + "requires": { + "@cspell/cspell-json-reporter": "9.2.2", + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-types": "9.2.2", + "@cspell/dynamic-import": "9.2.2", + "@cspell/url": "9.2.2", + "chalk": "^5.6.2", + "chalk-template": "^1.1.2", + "commander": "^14.0.1", + "cspell-config-lib": "9.2.2", + "cspell-dictionary": "9.2.2", + "cspell-gitignore": "9.2.2", + "cspell-glob": "9.2.2", + "cspell-io": "9.2.2", + "cspell-lib": "9.2.2", + "fast-json-stable-stringify": "^2.1.0", + "flatted": "^3.3.3", + "semver": "^7.7.3", + "tinyglobby": "^0.2.15" + }, + "dependencies": { + "chalk": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz", + "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==", + "dev": true + }, + "commander": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.2.tgz", + "integrity": "sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==", + "dev": true + }, + "semver": { + "version": "7.7.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", + "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==", + "dev": true + } + } + }, + "cspell-config-lib": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-config-lib/-/cspell-config-lib-9.2.2.tgz", + "integrity": "sha512-Fp3jdFxb5gxcQP146TfNVmDqXKfm3xmcEUr1K829DmAFwhc7s+/pCRjhBPoGfQt6U7ugpxjkSx2gGKSbLhp7Mg==", + "dev": true, + "requires": { + "@cspell/cspell-types": "9.2.2", + "comment-json": "^4.4.1", + "smol-toml": "^1.4.2", + "yaml": "^2.8.1" + } + }, + "cspell-dictionary": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-dictionary/-/cspell-dictionary-9.2.2.tgz", + "integrity": "sha512-lnoCFoCAaiFJi+Hz22t+tdTj76jyTA76EYFKhmf/dbj5UO6kVy8by08uFfUbbMaC9Oi09YHnI62P/e+LBx1v8Q==", + "dev": true, + "requires": { + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-types": "9.2.2", + "cspell-trie-lib": "9.2.2", + "fast-equals": "^5.3.2" + } + }, + "cspell-gitignore": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-gitignore/-/cspell-gitignore-9.2.2.tgz", + "integrity": "sha512-Idx3IVKTpnGoyRlkj8F/lSWtWiJpqLhXmZglTzfGWxzbik8E0aQmSyT3blbNWhZL/K1JqlTjbSiAICVMoWTkhA==", + "dev": true, + "requires": { + "@cspell/url": "9.2.2", + "cspell-glob": "9.2.2", + "cspell-io": "9.2.2" + } + }, + "cspell-glob": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-glob/-/cspell-glob-9.2.2.tgz", + "integrity": "sha512-6mhUk4iLu5YzY9PE86ZyAjNFjM7TD8Oh4btJ7ZV+edzJjdVjFugXWyefPXCGNfuvpaJqpuoLDwMvNHJxUmLwbg==", + "dev": true, + "requires": { + "@cspell/url": "9.2.2", + "picomatch": "^4.0.3" + }, + "dependencies": { + "picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true + } + } + }, + "cspell-grammar": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-grammar/-/cspell-grammar-9.2.2.tgz", + "integrity": "sha512-m0aozo5gjZYL5Vm3/9D0/yLZJTsVJAP8VeRVljN4u5T7w+WY+LsnvKSZhnkOvsT3kCJDhcKEkMVkCo8d/7EcAQ==", + "dev": true, + "requires": { + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-types": "9.2.2" + } + }, + "cspell-io": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-io/-/cspell-io-9.2.2.tgz", + "integrity": "sha512-Rpky4woeB6/1VUCk7DtRm94A6c5XRbhcj5dUZh851EpZ0ItEz3S9+MhkX8g1sTVkDg6Hln1pu+Nbm9dFIpGkGA==", + "dev": true, + "requires": { + "@cspell/cspell-service-bus": "9.2.2", + "@cspell/url": "9.2.2" + } + }, + "cspell-lib": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-lib/-/cspell-lib-9.2.2.tgz", + "integrity": "sha512-ksy+5vCSZz7ECUDlLA8ZGNEcWmnzl5bMe4IEPHAMaPFY3iWNsG7dXBrae1dj/b/3HqVqOdXPdwjnGAyZciissg==", + "dev": true, + "requires": { + "@cspell/cspell-bundled-dicts": "9.2.2", + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-resolver": "9.2.2", + "@cspell/cspell-types": "9.2.2", + "@cspell/dynamic-import": "9.2.2", + "@cspell/filetypes": "9.2.2", + "@cspell/strong-weak-map": "9.2.2", + "@cspell/url": "9.2.2", + "clear-module": "^4.1.2", + "cspell-config-lib": "9.2.2", + "cspell-dictionary": "9.2.2", + "cspell-glob": "9.2.2", + "cspell-grammar": "9.2.2", + "cspell-io": "9.2.2", + "cspell-trie-lib": "9.2.2", + "env-paths": "^3.0.0", + "gensequence": "^7.0.0", + "import-fresh": "^3.3.1", + "resolve-from": "^5.0.0", + "vscode-languageserver-textdocument": "^1.0.12", + "vscode-uri": "^3.1.0", + "xdg-basedir": "^5.1.0" + } + }, + "cspell-trie-lib": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/cspell-trie-lib/-/cspell-trie-lib-9.2.2.tgz", + "integrity": "sha512-84L0Or6xkfnDMmxx2BtuaqsM4LOVCgnG4ZzMMgwQJU+9nSOAHs0ULNWQTHLbsCF+FFG/siILpUkIc3z+UxjGFw==", + "dev": true, + "requires": { + "@cspell/cspell-pipe": "9.2.2", + "@cspell/cspell-types": "9.2.2", + "gensequence": "^7.0.0" + } + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -5337,6 +8669,21 @@ } } }, + "decode-named-character-reference": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz", + "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==", + "dev": true, + "requires": { + "character-entities": "^2.0.0" + } + }, + "deep-extend": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", + "dev": true + }, "del": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz", @@ -5364,6 +8711,12 @@ "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", "dev": true }, + "dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true + }, "destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -5382,6 +8735,15 @@ "integrity": "sha1-p2o+0YVb56ASu4rBbLgPPADcKPA=", "dev": true }, + "devlop": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", + "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", + "dev": true, + "requires": { + "dequal": "^2.0.0" + } + }, "dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -5409,6 +8771,12 @@ } } }, + "eastasianwidth": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "dev": true + }, "easy-extender": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz", @@ -5497,6 +8865,18 @@ "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==", "dev": true }, + "entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true + }, + "env-paths": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz", + "integrity": "sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==", + "dev": true + }, "escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -5515,6 +8895,12 @@ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", "dev": true }, + "esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true + }, "etag": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", @@ -5575,6 +8961,12 @@ "time-stamp": "^1.0.0" } }, + "fast-equals": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.3.2.tgz", + "integrity": "sha512-6rxyATwPCkaFIL3JLqw8qXqMpIZ942pTX/tbQFkRsDGblS8tNGtlUauA/+mt6RUfqn/4MoEr+WDkYoIQbibWuQ==", + "dev": true + }, "fast-fifo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", @@ -5594,6 +8986,12 @@ "micromatch": "^4.0.4" } }, + "fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true + }, "fast-levenshtein": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-3.0.0.tgz", @@ -5698,6 +9096,12 @@ "integrity": "sha512-fw6V/6LdrkB/q/mW/8M4PfX9sDUo4k5UZ9vlRlTrsbhDrxbe51puGoGHOmfr5hAczTH/33Q4jzuDnOBerGaIlQ==", "dev": true }, + "flatted": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz", + "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==", + "dev": true + }, "follow-redirects": { "version": "1.15.9", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", @@ -5719,6 +9123,16 @@ "for-in": "^1.0.1" } }, + "foreground-child": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", + "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.6", + "signal-exit": "^4.0.1" + } + }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -5765,6 +9179,12 @@ "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", "dev": true }, + "gensequence": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/gensequence/-/gensequence-7.0.0.tgz", + "integrity": "sha512-47Frx13aZh01afHJTB3zTtKIlFI6vWY+MYCN9Qpew6i52rfKjnhCF/l1YlC8UmEMvvntZZ6z4PiCcmyuedR2aQ==", + "dev": true + }, "get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -5831,6 +9251,23 @@ "chokidar": "^3.5.3" } }, + "global-directory": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-4.0.1.tgz", + "integrity": "sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==", + "dev": true, + "requires": { + "ini": "4.1.1" + }, + "dependencies": { + "ini": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.1.tgz", + "integrity": "sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==", + "dev": true + } + } + }, "global-modules": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz", @@ -5899,6 +9336,7 @@ "resolved": "https://registry.npmjs.org/gulp/-/gulp-5.0.0.tgz", "integrity": "sha512-S8Z8066SSileaYw1S2N1I64IUc/myI2bqe2ihOBzO6+nKpvNSg7ZcWJt/AwF8LC/NVN+/QZ560Cb/5OPsyhkhg==", "dev": true, + "peer": true, "requires": { "glob-watcher": "^6.0.0", "gulp-cli": "^3.0.0", @@ -6303,9 +9741,9 @@ "dev": true }, "igniteui-docfx-template": { - "version": "3.9.4", - "resolved": "https://registry.npmjs.org/igniteui-docfx-template/-/igniteui-docfx-template-3.9.4.tgz", - "integrity": "sha512-c4lgIcX1Jq5xz2b6aIjxZJHgbweTmFMjyobJqDD4wr0NP/93OlwMxF6gJjOm50xE6AjAI9u/6cpdc9RNvjCJxA==", + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/igniteui-docfx-template/-/igniteui-docfx-template-3.11.0.tgz", + "integrity": "sha512-h2tMNRqeyi4SPqMIQrAzzlmY+coj25t278AWn5ZDIZ1A1gfMMa9alKV+z+gPFGh9VMecEjxepGVpDZfJwjwyjg==", "requires": { "@stackblitz/sdk": "^1.11.0", "anchor-js": "^4.3.0", @@ -6349,6 +9787,39 @@ "integrity": "sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==", "dev": true }, + "import-fresh": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", + "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==", + "dev": true, + "requires": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "dependencies": { + "parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "requires": { + "callsites": "^3.0.0" + } + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true + } + } + }, + "import-meta-resolve": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz", + "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==", + "dev": true + }, "indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -6389,8 +9860,24 @@ "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==", "dev": true, "requires": { - "is-relative": "^1.0.0", - "is-windows": "^1.0.1" + "is-relative": "^1.0.0", + "is-windows": "^1.0.1" + } + }, + "is-alphabetical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", + "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==", + "dev": true + }, + "is-alphanumerical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz", + "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==", + "dev": true, + "requires": { + "is-alphabetical": "^2.0.0", + "is-decimal": "^2.0.0" } }, "is-binary-path": { @@ -6411,6 +9898,12 @@ "hasown": "^2.0.2" } }, + "is-decimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz", + "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==", + "dev": true + }, "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -6432,6 +9925,12 @@ "is-extglob": "^2.1.1" } }, + "is-hexadecimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz", + "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==", + "dev": true + }, "is-negated-glob": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz", @@ -6532,6 +10031,15 @@ "textextensions": "^3.2.0" } }, + "jackspeak": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz", + "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==", + "dev": true, + "requires": { + "@isaacs/cliui": "^8.0.2" + } + }, "jquery": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz", @@ -6545,140 +10053,582 @@ "jquery": ">=1.8.0 <4.0.0" } }, + "js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "requires": { + "argparse": "^2.0.1" + } + }, "json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true }, + "jsonc-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz", + "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==", + "dev": true + }, "jsonfile": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz", "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=", "dev": true, "requires": { - "graceful-fs": "^4.1.6" + "graceful-fs": "^4.1.6" + } + }, + "jsonpointer": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz", + "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==", + "dev": true + }, + "katex": { + "version": "0.16.25", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.25.tgz", + "integrity": "sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==", + "dev": true, + "requires": { + "commander": "^8.3.0" + }, + "dependencies": { + "commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "dev": true + } + } + }, + "last-run": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/last-run/-/last-run-2.0.0.tgz", + "integrity": "sha512-j+y6WhTLN4Itnf9j5ZQos1BGPCS8DAwmgMroR3OzfxAsBxam0hMw7J8M3KqZl0pLQJ1jNnwIexg5DYpC/ctwEQ==", + "dev": true + }, + "lazysizes": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.3.2.tgz", + "integrity": "sha512-22UzWP+Vedi/sMeOr8O7FWimRVtiNJV2HCa+V8+peZOw6QbswN9k58VUhd7i6iK5bw5QkYrF01LJbeJe0PV8jg==" + }, + "lead": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/lead/-/lead-4.0.0.tgz", + "integrity": "sha512-DpMa59o5uGUWWjruMp71e6knmwKU3jRBBn1kjuLWN9EeIOxNeSAwvHf03WIl8g/ZMR2oSQC9ej3yeLBwdDc/pg==", + "dev": true + }, + "liftoff": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-5.0.0.tgz", + "integrity": "sha512-a5BQjbCHnB+cy+gsro8lXJ4kZluzOijzJ1UVVfyJYZC+IP2pLv1h4+aysQeKuTmyO8NAqfyQAk4HWaP/HjcKTg==", + "dev": true, + "requires": { + "extend": "^3.0.2", + "findup-sync": "^5.0.0", + "fined": "^2.0.0", + "flagged-respawn": "^2.0.0", + "is-plain-object": "^5.0.0", + "rechoir": "^0.8.0", + "resolve": "^1.20.0" + }, + "dependencies": { + "is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true + } + } + }, + "limiter": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz", + "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==", + "dev": true + }, + "linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "dev": true, + "requires": { + "uc.micro": "^2.0.0" + } + }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true + }, + "lodash._reinterpolate": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", + "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=", + "dev": true + }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "dev": true + }, + "lodash.isfinite": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz", + "integrity": "sha512-7FGG40uhC8Mm633uKW1r58aElFlBlxCrg9JfSi3P6aYiWmfiWF0PgMd86ZUsxE5GwWPdHoS2+48bwTh2VPkIQA==", + "dev": true + }, + "lodash.template": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz", + "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==", + "dev": true, + "requires": { + "lodash._reinterpolate": "^3.0.0", + "lodash.templatesettings": "^4.0.0" + } + }, + "lodash.templatesettings": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz", + "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==", + "dev": true, + "requires": { + "lodash._reinterpolate": "^3.0.0" + } + }, + "lru-cache": { + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz", + "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==", + "dev": true + }, + "lunr": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz", + "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==" + }, + "lunr-languages": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/lunr-languages/-/lunr-languages-1.9.0.tgz", + "integrity": "sha512-Be5vFuc8NAheOIjviCRms3ZqFFBlzns3u9DXpPSZvALetgnydAN0poV71pVLFn0keYy/s4VblMMkqewTLe+KPg==" + }, + "lz-string": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", + "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==" + }, + "map-cache": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", + "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==", + "dev": true + }, + "mark.js": { + "version": "8.11.1", + "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz", + "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==" + }, + "markdown-it": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", + "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", + "dev": true, + "requires": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + } + }, + "markdownlint": { + "version": "0.38.0", + "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.38.0.tgz", + "integrity": "sha512-xaSxkaU7wY/0852zGApM8LdlIfGCW8ETZ0Rr62IQtAnUMlMuifsg09vWJcNYeL4f0anvr8Vo4ZQar8jGpV0btQ==", + "dev": true, + "requires": { + "micromark": "4.0.2", + "micromark-core-commonmark": "2.0.3", + "micromark-extension-directive": "4.0.0", + "micromark-extension-gfm-autolink-literal": "2.1.0", + "micromark-extension-gfm-footnote": "2.1.0", + "micromark-extension-gfm-table": "2.1.1", + "micromark-extension-math": "3.1.0", + "micromark-util-types": "2.0.2" + } + }, + "markdownlint-cli": { + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/markdownlint-cli/-/markdownlint-cli-0.45.0.tgz", + "integrity": "sha512-GiWr7GfJLVfcopL3t3pLumXCYs8sgWppjIA1F/Cc3zIMgD3tmkpyZ1xkm1Tej8mw53B93JsDjgA3KOftuYcfOw==", + "dev": true, + "requires": { + "commander": "~13.1.0", + "glob": "~11.0.2", + "ignore": "~7.0.4", + "js-yaml": "~4.1.0", + "jsonc-parser": "~3.3.1", + "jsonpointer": "~5.0.1", + "markdown-it": "~14.1.0", + "markdownlint": "~0.38.0", + "minimatch": "~10.0.1", + "run-con": "~1.3.2", + "smol-toml": "~1.3.4" + }, + "dependencies": { + "commander": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz", + "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==", + "dev": true + }, + "glob": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz", + "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==", + "dev": true, + "requires": { + "foreground-child": "^3.3.1", + "jackspeak": "^4.1.1", + "minimatch": "^10.0.3", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^2.0.0" + } + }, + "ignore": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz", + "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==", + "dev": true + }, + "minimatch": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz", + "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==", + "dev": true, + "requires": { + "@isaacs/brace-expansion": "^5.0.0" + } + }, + "smol-toml": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.3.4.tgz", + "integrity": "sha512-UOPtVuYkzYGee0Bd2Szz8d2G3RfMfJ2t3qVdZUAozZyAk+a0Sxa+QKix0YCwjL/A1RR0ar44nCxaoN9FxdJGwA==", + "dev": true + } + } + }, + "mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==", + "dev": true + }, + "merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true + }, + "micromark": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz", + "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==", + "dev": true, + "requires": { + "@types/debug": "^4.0.0", + "debug": "^4.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-core-commonmark": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz", + "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==", + "dev": true, + "requires": { + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-factory-destination": "^2.0.0", + "micromark-factory-label": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-factory-title": "^2.0.0", + "micromark-factory-whitespace": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-classify-character": "^2.0.0", + "micromark-util-html-tag-name": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-directive": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-4.0.0.tgz", + "integrity": "sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==", + "dev": true, + "requires": { + "devlop": "^1.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-factory-whitespace": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "parse-entities": "^4.0.0" + } + }, + "micromark-extension-gfm-autolink-literal": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz", + "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==", + "dev": true, + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-gfm-footnote": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz", + "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==", + "dev": true, + "requires": { + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-gfm-table": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz", + "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==", + "dev": true, + "requires": { + "devlop": "^1.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-extension-math": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz", + "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==", + "dev": true, + "requires": { + "@types/katex": "^0.16.0", + "devlop": "^1.0.0", + "katex": "^0.16.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-destination": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz", + "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==", + "dev": true, + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-label": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz", + "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==", + "dev": true, + "requires": { + "devlop": "^1.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz", + "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==", + "dev": true, + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-title": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz", + "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==", + "dev": true, + "requires": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-factory-whitespace": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz", + "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==", + "dev": true, + "requires": { + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-character": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz", + "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==", + "dev": true, + "requires": { + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "micromark-util-chunked": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz", + "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==", + "dev": true, + "requires": { + "micromark-util-symbol": "^2.0.0" } }, - "last-run": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/last-run/-/last-run-2.0.0.tgz", - "integrity": "sha512-j+y6WhTLN4Itnf9j5ZQos1BGPCS8DAwmgMroR3OzfxAsBxam0hMw7J8M3KqZl0pLQJ1jNnwIexg5DYpC/ctwEQ==", - "dev": true - }, - "lazysizes": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.3.2.tgz", - "integrity": "sha512-22UzWP+Vedi/sMeOr8O7FWimRVtiNJV2HCa+V8+peZOw6QbswN9k58VUhd7i6iK5bw5QkYrF01LJbeJe0PV8jg==" - }, - "lead": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/lead/-/lead-4.0.0.tgz", - "integrity": "sha512-DpMa59o5uGUWWjruMp71e6knmwKU3jRBBn1kjuLWN9EeIOxNeSAwvHf03WIl8g/ZMR2oSQC9ej3yeLBwdDc/pg==", - "dev": true - }, - "liftoff": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-5.0.0.tgz", - "integrity": "sha512-a5BQjbCHnB+cy+gsro8lXJ4kZluzOijzJ1UVVfyJYZC+IP2pLv1h4+aysQeKuTmyO8NAqfyQAk4HWaP/HjcKTg==", + "micromark-util-classify-character": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz", + "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==", "dev": true, "requires": { - "extend": "^3.0.2", - "findup-sync": "^5.0.0", - "fined": "^2.0.0", - "flagged-respawn": "^2.0.0", - "is-plain-object": "^5.0.0", - "rechoir": "^0.8.0", - "resolve": "^1.20.0" - }, - "dependencies": { - "is-plain-object": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", - "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", - "dev": true - } + "micromark-util-character": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" } }, - "limiter": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz", - "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==", - "dev": true - }, - "lodash": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "micromark-util-combine-extensions": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz", + "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==", + "dev": true, + "requires": { + "micromark-util-chunked": "^2.0.0", + "micromark-util-types": "^2.0.0" + } }, - "lodash._reinterpolate": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", - "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=", - "dev": true + "micromark-util-decode-numeric-character-reference": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz", + "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==", + "dev": true, + "requires": { + "micromark-util-symbol": "^2.0.0" + } }, - "lodash.clonedeep": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", - "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "micromark-util-encode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz", + "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==", "dev": true }, - "lodash.isfinite": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz", - "integrity": "sha512-7FGG40uhC8Mm633uKW1r58aElFlBlxCrg9JfSi3P6aYiWmfiWF0PgMd86ZUsxE5GwWPdHoS2+48bwTh2VPkIQA==", + "micromark-util-html-tag-name": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz", + "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==", "dev": true }, - "lodash.template": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz", - "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==", + "micromark-util-normalize-identifier": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz", + "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==", "dev": true, "requires": { - "lodash._reinterpolate": "^3.0.0", - "lodash.templatesettings": "^4.0.0" + "micromark-util-symbol": "^2.0.0" } }, - "lodash.templatesettings": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz", - "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==", + "micromark-util-resolve-all": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz", + "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==", "dev": true, "requires": { - "lodash._reinterpolate": "^3.0.0" + "micromark-util-types": "^2.0.0" } }, - "lunr": { - "version": "2.3.9", - "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz", - "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==" - }, - "lunr-languages": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/lunr-languages/-/lunr-languages-1.9.0.tgz", - "integrity": "sha512-Be5vFuc8NAheOIjviCRms3ZqFFBlzns3u9DXpPSZvALetgnydAN0poV71pVLFn0keYy/s4VblMMkqewTLe+KPg==" + "micromark-util-sanitize-uri": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz", + "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==", + "dev": true, + "requires": { + "micromark-util-character": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-symbol": "^2.0.0" + } }, - "lz-string": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", - "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==" + "micromark-util-subtokenize": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz", + "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==", + "dev": true, + "requires": { + "devlop": "^1.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } }, - "map-cache": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", - "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==", + "micromark-util-symbol": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz", + "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==", "dev": true }, - "mark.js": { - "version": "8.11.1", - "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz", - "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==" - }, - "merge2": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", - "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "micromark-util-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz", + "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==", "dev": true }, "micromatch": { @@ -6726,6 +10676,12 @@ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==" }, + "minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true + }, "mitt": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz", @@ -6846,6 +10802,36 @@ "aggregate-error": "^3.0.0" } }, + "package-json-from-dist": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", + "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", + "dev": true + }, + "parent-module": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-2.0.0.tgz", + "integrity": "sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==", + "dev": true, + "requires": { + "callsites": "^3.1.0" + } + }, + "parse-entities": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz", + "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==", + "dev": true, + "requires": { + "@types/unist": "^2.0.0", + "character-entities-legacy": "^3.0.0", + "character-reference-invalid": "^2.0.0", + "decode-named-character-reference": "^1.0.0", + "is-alphanumerical": "^2.0.0", + "is-decimal": "^2.0.0", + "is-hexadecimal": "^2.0.0" + } + }, "parse-filepath": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz", @@ -6908,6 +10894,16 @@ "integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==", "dev": true }, + "path-scurry": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz", + "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==", + "dev": true, + "requires": { + "lru-cache": "^11.0.0", + "minipass": "^7.1.2" + } + }, "path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -6984,6 +10980,12 @@ "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", "dev": true }, + "punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "dev": true + }, "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -7127,6 +11129,12 @@ "global-modules": "^1.0.0" } }, + "resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true + }, "resolve-options": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/resolve-options/-/resolve-options-2.0.0.tgz", @@ -7172,6 +11180,26 @@ "glob": "^7.1.3" } }, + "run-con": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/run-con/-/run-con-1.3.2.tgz", + "integrity": "sha512-CcfE+mYiTcKEzg0IqS08+efdnH0oJ3zV0wSUFBNrMHMuxCtXvBCLzCJHatwuXDcu/RlhjTziTo/a1ruQik6/Yg==", + "dev": true, + "requires": { + "deep-extend": "^0.6.0", + "ini": "~4.1.0", + "minimist": "^1.2.8", + "strip-json-comments": "~3.1.1" + }, + "dependencies": { + "ini": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz", + "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==", + "dev": true + } + } + }, "run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -7530,11 +11558,23 @@ "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", "dev": true }, + "signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" }, + "smol-toml": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.4.2.tgz", + "integrity": "sha512-rInDH6lCNiEyn3+hH8KVGFdbjc099j47+OSgbMrfDYX1CmXLfdKd7qi6IfcWj2wFxvSVkuI46M+wPGYfEOEj6g==", + "dev": true + }, "socket.io": { "version": "4.8.1", "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz", @@ -7680,6 +11720,34 @@ } } }, + "string-width-cjs": { + "version": "npm:string-width@4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + }, + "strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + } + } + } + }, "strip-ansi": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", @@ -7689,6 +11757,29 @@ "ansi-regex": "^3.0.0" } }, + "strip-ansi-cjs": { + "version": "npm:strip-ansi@6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + } + } + }, + "strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -7763,6 +11854,32 @@ "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" }, + "tinyglobby": { + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", + "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "dev": true, + "requires": { + "fdir": "^6.5.0", + "picomatch": "^4.0.3" + }, + "dependencies": { + "fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "requires": {} + }, + "picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, + "peer": true + } + } + }, "to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -7812,6 +11929,12 @@ "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==", "dev": true }, + "uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==", + "dev": true + }, "unc-path-regex": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz", @@ -8019,6 +12142,18 @@ "source-map": "^0.5.1" } }, + "vscode-languageserver-textdocument": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz", + "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==", + "dev": true + }, + "vscode-uri": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz", + "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==", + "dev": true + }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", @@ -8056,6 +12191,34 @@ } } }, + "wrap-ansi-cjs": { + "version": "npm:wrap-ansi@7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + }, + "strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + } + } + } + }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", @@ -8069,6 +12232,12 @@ "dev": true, "requires": {} }, + "xdg-basedir": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-5.1.0.tgz", + "integrity": "sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==", + "dev": true + }, "xmlhttprequest-ssl": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz", @@ -8087,6 +12256,12 @@ "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", "dev": true }, + "yaml": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", + "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", + "dev": true + }, "yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index ea6b93496b..2b26fb0694 100644 --- a/package.json +++ b/package.json @@ -13,17 +13,22 @@ "build-staging": "cross-env NODE_ENV=staging gulp build", "build-production": "cross-env NODE_ENV=production gulp build", "test": "echo \"Error: no test specified\" && exit 1", + "verify": "npm run spellcheck && npm run lint:md", + "spellcheck": "cspell \"en/components/**/*.md\"", + "lint:md": "markdownlint \"en/components/**/*.md\"", + "lint:md:fix": "markdownlint \"en/components/**/*.md\" --fix", "postinstall": "dotnet tool restore --ignore-failed-sources && gulp copyGitHooks" }, "author": "Infragistics", "license": "ISC", "dependencies": { - "igniteui-docfx-template": "^3.9.4" + "igniteui-docfx-template": "^3.11.0" }, "devDependencies": { "@stackblitz/sdk": "^1.11.0", "browser-sync": "^3.0.3", "cross-env": "^7.0.3", + "cspell": "^9.2.2", "del": "^5.1.0", "gulp": "^5.0.0", "gulp-autoprefixer": "^7.0.1", @@ -31,6 +36,7 @@ "gulp-file-include": "^2.1.1", "gulp-replace": "^1.1.3", "gulp-shell": "^0.7.1", + "markdownlint-cli": "^0.45.0", "slash": "^3.0.0", "yargs": "^17.7.2" }