IgniteUI · azure-pipelines · Oct 16, 2023
diff --git a/samples/charts/category-chart/format-specifiers/index.html b/samples/charts/category-chart/format-specifiers/index.html
@@ -42,12 +42,6 @@
         data-tool-tip-value-format-mode="Currency"
         data-tool-tip-value-format-string="${0} Billion"
         y-axis-label-format="{0}B">
-            <igc-number-format-specifier
-            style="currency"
-            currency="USD"
-            currency-display="symbol"
-            minimum-fraction-digits="0">
-            </igc-number-format-specifier>
         </igc-category-chart>
     </div>
 </div>

diff --git a/samples/charts/category-chart/format-specifiers/src/index.ts b/samples/charts/category-chart/format-specifiers/src/index.ts
@@ -2,6 +2,7 @@ import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
 import { IgcDataLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataLegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
 import { IgcDataLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
+import { IgcNumberFormatSpecifierComponent } from 'igniteui-webcomponents-core';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
 
 import { ModuleManager } from 'igniteui-webcomponents-core';
@@ -18,6 +19,22 @@ export class Sample {
 
     private legend: IgcDataLegendComponent
     private chart: IgcCategoryChartComponent
+    private _numberFormatSpecifier1: IgcNumberFormatSpecifierComponent[] | null = null;
+    public get numberFormatSpecifier1(): IgcNumberFormatSpecifierComponent[] {
+        if (this._numberFormatSpecifier1 == null)
+        {
+            let numberFormatSpecifier1: IgcNumberFormatSpecifierComponent[] = [];
+            var numberFormatSpecifier2 = new IgcNumberFormatSpecifierComponent();
+            numberFormatSpecifier2.style = "currency";
+            numberFormatSpecifier2.currency = "USD";
+            numberFormatSpecifier2.currencyDisplay = "symbol";
+            numberFormatSpecifier2.minimumFractionDigits = 0;
+
+            numberFormatSpecifier1.push(numberFormatSpecifier2)
+            this._numberFormatSpecifier1 = numberFormatSpecifier1;
+        }
+        return this._numberFormatSpecifier1;
+    }
     private _bind: () => void;
 
     constructor() {
@@ -27,6 +44,7 @@ export class Sample {
         this._bind = () => {
             legend.target = this.chart;
             chart.dataSource = this.highestGrossingMovies;
+            chart.yAxisLabelFormatSpecifiers = this.numberFormatSpecifier1;
         }
         this._bind();
 

diff --git a/samples/charts/data-chart/format-specifiers/index.html b/samples/charts/data-chart/format-specifiers/index.html
@@ -51,12 +51,6 @@
             title="Billions of U.S. Dollars"
             label-format="{0}B"
             abbreviate-large-numbers="false">
-                <igc-number-format-specifier
-                style="currency"
-                currency="USD"
-                currency-display="symbol"
-                minimum-fraction-digits="0">
-                </igc-number-format-specifier>
             </igc-numeric-x-axis>
             <igc-bar-series
             name="BarSeries1"

diff --git a/samples/charts/data-chart/format-specifiers/src/index.ts b/samples/charts/data-chart/format-specifiers/src/index.ts
@@ -1,5 +1,6 @@
 import { IgcDataLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
 import { IgcDataLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
+import { IgcNumberFormatSpecifierComponent } from 'igniteui-webcomponents-core';
 import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
 
 import { ModuleManager } from 'igniteui-webcomponents-core';
@@ -22,6 +23,22 @@ export class Sample {
     private chart: IgcDataChartComponent
     private yAxis: IgcCategoryYAxisComponent
     private xAxis: IgcNumericXAxisComponent
+    private _numberFormatSpecifier1: IgcNumberFormatSpecifierComponent[] | null = null;
+    public get numberFormatSpecifier1(): IgcNumberFormatSpecifierComponent[] {
+        if (this._numberFormatSpecifier1 == null)
+        {
+            let numberFormatSpecifier1: IgcNumberFormatSpecifierComponent[] = [];
+            var numberFormatSpecifier2 = new IgcNumberFormatSpecifierComponent();
+            numberFormatSpecifier2.style = "currency";
+            numberFormatSpecifier2.currency = "USD";
+            numberFormatSpecifier2.currencyDisplay = "symbol";
+            numberFormatSpecifier2.minimumFractionDigits = 0;
+
+            numberFormatSpecifier1.push(numberFormatSpecifier2)
+            this._numberFormatSpecifier1 = numberFormatSpecifier1;
+        }
+        return this._numberFormatSpecifier1;
+    }
     private barSeries1: IgcBarSeriesComponent
     private barSeries2: IgcBarSeriesComponent
     private tooltips: IgcDataToolTipLayerComponent
@@ -39,6 +56,7 @@ export class Sample {
         this._bind = () => {
             legend.target = this.chart;
             yAxis.dataSource = this.highestGrossingMovies;
+            xAxis.labelFormatSpecifiers = this.numberFormatSpecifier1;
             barSeries1.xAxis = this.xAxis;
             barSeries1.yAxis = this.yAxis;
             barSeries1.dataSource = this.highestGrossingMovies;

diff --git a/samples/charts/financial-chart/format-specifiers/index.html b/samples/charts/financial-chart/format-specifiers/index.html
@@ -43,16 +43,6 @@
         zoom-slider-type="None"
         y-axis-label-format="{0}"
         x-axis-label-format="{0}">
-            <igc-number-format-specifier
-            currency="EUR"
-            style="currency"
-            locale="en-GB"
-            minimum-fraction-digits="0">
-            </igc-number-format-specifier>
-            <igc-date-time-format-specifier
-            locale="en-GB"
-            date-style="long">
-            </igc-date-time-format-specifier>
         </igc-financial-chart>
     </div>
 </div>

diff --git a/samples/charts/financial-chart/format-specifiers/src/index.ts b/samples/charts/financial-chart/format-specifiers/src/index.ts
@@ -1,5 +1,6 @@
 import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcDataLegendModule } from 'igniteui-webcomponents-charts';
 import { IgcDataLegendComponent, IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
+import { IgcNumberFormatSpecifierComponent, IgcDateTimeFormatSpecifierComponent } from 'igniteui-webcomponents-core';
 import { MultipleStocks } from './MultipleStocks';
 
 import { ModuleManager } from 'igniteui-webcomponents-core';
@@ -16,6 +17,36 @@ export class Sample {
 
     private legend: IgcDataLegendComponent
     private chart: IgcFinancialChartComponent
+    private _numberFormatSpecifier1: IgcNumberFormatSpecifierComponent[] | null = null;
+    public get numberFormatSpecifier1(): IgcNumberFormatSpecifierComponent[] {
+        if (this._numberFormatSpecifier1 == null)
+        {
+            let numberFormatSpecifier1: IgcNumberFormatSpecifierComponent[] = [];
+            var numberFormatSpecifier2 = new IgcNumberFormatSpecifierComponent();
+            numberFormatSpecifier2.currency = "EUR";
+            numberFormatSpecifier2.style = "currency";
+            numberFormatSpecifier2.locale = "en-GB";
+            numberFormatSpecifier2.minimumFractionDigits = 0;
+
+            numberFormatSpecifier1.push(numberFormatSpecifier2)
+            this._numberFormatSpecifier1 = numberFormatSpecifier1;
+        }
+        return this._numberFormatSpecifier1;
+    }
+    private _dateTimeFormatSpecifier1: IgcDateTimeFormatSpecifierComponent[] | null = null;
+    public get dateTimeFormatSpecifier1(): IgcDateTimeFormatSpecifierComponent[] {
+        if (this._dateTimeFormatSpecifier1 == null)
+        {
+            let dateTimeFormatSpecifier1: IgcDateTimeFormatSpecifierComponent[] = [];
+            var dateTimeFormatSpecifier2 = new IgcDateTimeFormatSpecifierComponent();
+            dateTimeFormatSpecifier2.locale = "en-GB";
+            dateTimeFormatSpecifier2.dateStyle = "long";
+
+            dateTimeFormatSpecifier1.push(dateTimeFormatSpecifier2)
+            this._dateTimeFormatSpecifier1 = dateTimeFormatSpecifier1;
+        }
+        return this._dateTimeFormatSpecifier1;
+    }
     private _bind: () => void;
 
     constructor() {
@@ -25,6 +56,8 @@ export class Sample {
         this._bind = () => {
             legend.target = this.chart;
             chart.dataSource = this.multipleStocks;
+            chart.yAxisLabelFormatSpecifiers = this.numberFormatSpecifier1;
+            chart.xAxisLabelFormatSpecifiers = this.dateTimeFormatSpecifier1;
         }
         this._bind();
 

diff --git a/samples/grids/grid/action-strip/index.html b/samples/grids/grid/action-strip/index.html
@@ -16,7 +16,7 @@
   <body>
     <div id="root">
 
-<div class="container sample">
+<div class="container sample ig-typography">
 
     <div class="container fill">
         <igc-grid
@@ -26,9 +26,6 @@
         row-editable="true"
         allow-filtering="true"
         primary-key="ProductID">
-            <igc-pinning-config
-            rows="Top">
-            </igc-pinning-config>
             <igc-action-strip
             name="actionStrip"
             id="actionStrip">

diff --git a/samples/grids/grid/action-strip/src/index.ts b/samples/grids/grid/action-strip/src/index.ts
@@ -1,7 +1,7 @@
 import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
 import 'igniteui-webcomponents-grids/grids/combined';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
-import { IgcGridComponent, IgcActionStripComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
+import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
 
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
@@ -16,6 +16,17 @@ ModuleManager.register(
 export class Sample {
 
     private grid: IgcGridComponent
+    private _pinningConfig1: IgcPinningConfig | null = null;
+    public get pinningConfig1(): IgcPinningConfig {
+        if (this._pinningConfig1 == null)
+        {
+            var pinningConfig1: IgcPinningConfig = {} as IgcPinningConfig;
+            pinningConfig1.rows = RowPinningPosition.Top;
+
+            this._pinningConfig1 = pinningConfig1;
+        }
+        return this._pinningConfig1;
+    }
     private actionStrip: IgcActionStripComponent
     private productName: IgcColumnComponent
     private unitPrice: IgcColumnComponent
@@ -39,6 +50,7 @@ export class Sample {
 
         this._bind = () => {
             grid.data = this.nwindData;
+            grid.pinning = this.pinningConfig1;
         }
         this._bind();
 

diff --git a/samples/grids/grid/advanced-filtering-options/index.html b/samples/grids/grid/advanced-filtering-options/index.html
@@ -16,7 +16,7 @@
   <body>
     <div id="root">
 
-<div class="container sample">
+<div class="container sample ig-typography">
 
     <div class="container fill">
         <igc-grid

diff --git a/samples/grids/grid/advanced-filtering-style/.prettierrc b/samples/grids/grid/advanced-filtering-style/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
diff --git a/samples/grids/grid/advanced-filtering-style/index.html b/samples/grids/grid/advanced-filtering-style/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample | Ignite UI | Web Components | infragistics</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+    <link rel="stylesheet" href="/src/index.css" type="text/css" />
+
+  </head>
+
+  <body>
+    <div id="root">
+
+<div class="container sample ig-typography">
+
+    <div class="container fill">
+        <igc-grid
+        auto-generate="false"
+        name="grid"
+        id="grid"
+        id="grid"
+        moving="true"
+        allow-advanced-filtering="true">
+            <igc-grid-toolbar
+            >
+                <igc-grid-toolbar-actions
+                >
+                    <igc-grid-toolbar-advanced-filtering
+                    >
+                    </igc-grid-toolbar-advanced-filtering>
+                </igc-grid-toolbar-actions>
+            </igc-grid-toolbar>
+            <igc-column
+            field="ProductName"
+            header="Product Name"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="QuantityPerUnit"
+            header="Quantity Per Unit"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="UnitPrice"
+            header="Unit Price"
+            sortable="true"
+            data-type="currency">
+            </igc-column>
+            <igc-column
+            field="OrderDate"
+            header="Order Date"
+            data-type="date"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Discontinued"
+            header="Discontinued"
+            data-type="boolean"
+            sortable="true"
+            name="column1"
+            id="column1">
+            </igc-column>
+        </igc-grid>
+    </div>
+</div>
+
+    </div>
+
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+  </body>
+</html>
diff --git a/samples/grids/grid/advanced-filtering-style/package.json b/samples/grids/grid/advanced-filtering-style/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "example-ignite-ui-web-components",
+  "description": "This project provides example of using Ignite UI for Web Components",
+  "author": "Infragistics",
+  "version": "1.0.0",
+  "license": "",
+  "private": true,
+  "homepage": ".",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents-core": "4.3.1",
+    "igniteui-webcomponents-grids": "4.3.1",
+    "igniteui-webcomponents-inputs": "4.3.1",
+    "igniteui-webcomponents-layouts": "4.3.1",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  }
+}
diff --git a/samples/grids/grid/advanced-filtering-style/sandbox.config.json b/samples/grids/grid/advanced-filtering-style/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}