From be953a7f0a2195ff03282ff1cb84d160d614c0c7 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Fri, 7 Feb 2025 01:39:47 +0200 Subject: [PATCH] refactor(samples): updating wc styling samples --- browser/public/index.html | 9 ++ .../grids/list/styling/src/ListStyling.css | 18 ++- samples/grids/tree/styling/.prettierrc | 11 ++ samples/grids/tree/styling/ReadMe.md | 56 ++++++++++ samples/grids/tree/styling/index.html | 39 +++++++ samples/grids/tree/styling/package.json | 59 ++++++++++ .../grids/tree/styling/sandbox.config.json | 7 ++ samples/grids/tree/styling/src/TreeBasic.css | 4 + samples/grids/tree/styling/src/index.css | 2 + samples/grids/tree/styling/src/index.ts | 11 ++ samples/grids/tree/styling/src/layout.css | 5 + samples/grids/tree/styling/tsconfig.json | 20 ++++ samples/grids/tree/styling/webpack.config.js | 105 ++++++++++++++++++ samples/inputs/badge/styling/.prettierrc | 11 ++ samples/inputs/badge/styling/ReadMe.md | 56 ++++++++++ samples/inputs/badge/styling/index.html | 29 +++++ samples/inputs/badge/styling/package.json | 59 ++++++++++ .../inputs/badge/styling/sandbox.config.json | 7 ++ .../inputs/badge/styling/src/BadgeStyle.css | 5 + samples/inputs/badge/styling/src/index.css | 2 + samples/inputs/badge/styling/src/index.ts | 11 ++ samples/inputs/badge/styling/tsconfig.json | 20 ++++ .../inputs/badge/styling/webpack.config.js | 105 ++++++++++++++++++ .../inputs/button-group/styling/index.html | 2 +- .../styling/src/ButtonGroupStyle.css | 8 ++ .../inputs/button-group/styling/src/index.ts | 2 +- .../inputs/button/styling/src/ButtonStyle.css | 8 +- samples/inputs/checkbox/styling/.prettierrc | 11 ++ samples/inputs/checkbox/styling/ReadMe.md | 56 ++++++++++ samples/inputs/checkbox/styling/index.html | 29 +++++ samples/inputs/checkbox/styling/package.json | 59 ++++++++++ .../checkbox/styling/sandbox.config.json | 7 ++ .../checkbox/styling/src/CheckboxStyle.css | 8 ++ samples/inputs/checkbox/styling/src/index.css | 2 + samples/inputs/checkbox/styling/src/index.ts | 11 ++ samples/inputs/checkbox/styling/tsconfig.json | 20 ++++ .../inputs/checkbox/styling/webpack.config.js | 105 ++++++++++++++++++ samples/inputs/chip/styling/src/ChipStyle.css | 6 +- .../styling/src/CircularProgressStyling.css | 14 +-- .../inputs/combo/styling/src/ComboStyle.css | 17 +++ samples/inputs/combo/styling/src/index.ts | 2 +- .../date-time-input/styling/.prettierrc | 11 ++ .../inputs/date-time-input/styling/ReadMe.md | 56 ++++++++++ .../inputs/date-time-input/styling/index.html | 28 +++++ .../date-time-input/styling/package.json | 59 ++++++++++ .../styling/sandbox.config.json | 7 ++ .../styling/src/DateTimeInputStyle.css | 12 ++ .../date-time-input/styling/src/index.css | 2 + .../date-time-input/styling/src/index.ts | 45 ++++++++ .../date-time-input/styling/tsconfig.json | 20 ++++ .../date-time-input/styling/webpack.config.js | 105 ++++++++++++++++++ .../dropdown/styling/src/DropDownStyling.css | 8 +- .../styling/src/IconButtonStyling.css | 18 ++- .../inputs/input/styling/src/InputStyling.css | 19 ++-- .../styling/index.html | 2 +- .../styling/src/LinearProgressStyling.css | 6 +- samples/inputs/mask-input/styling/.prettierrc | 11 ++ samples/inputs/mask-input/styling/ReadMe.md | 56 ++++++++++ samples/inputs/mask-input/styling/index.html | 28 +++++ .../inputs/mask-input/styling/package.json | 59 ++++++++++ .../mask-input/styling/sandbox.config.json | 7 ++ .../mask-input/styling/src/MaskInputStyle.css | 9 ++ .../inputs/mask-input/styling/src/index.css | 2 + .../inputs/mask-input/styling/src/index.ts | 16 +++ .../inputs/mask-input/styling/tsconfig.json | 20 ++++ .../mask-input/styling/webpack.config.js | 105 ++++++++++++++++++ .../inputs/radio/styling/src/RadioStyle.css | 15 +++ samples/inputs/radio/styling/src/index.ts | 2 +- .../inputs/rating/styling/src/RatingStyle.css | 7 ++ samples/inputs/rating/styling/src/index.ts | 2 +- .../select/styling/src/SelectStyling.css | 25 ++--- .../slider/styling/src/SliderStyling.css | 32 ++---- samples/inputs/slider/styling/src/index.ts | 1 + samples/inputs/slider/styling/src/layout.css | 7 ++ samples/inputs/switches/styling/.prettierrc | 11 ++ samples/inputs/switches/styling/ReadMe.md | 56 ++++++++++ samples/inputs/switches/styling/index.html | 29 +++++ samples/inputs/switches/styling/package.json | 59 ++++++++++ .../switches/styling/sandbox.config.json | 7 ++ .../switches/styling/src/SwitchStyle.css | 12 ++ samples/inputs/switches/styling/src/index.css | 2 + samples/inputs/switches/styling/src/index.ts | 11 ++ samples/inputs/switches/styling/tsconfig.json | 20 ++++ .../inputs/switches/styling/webpack.config.js | 105 ++++++++++++++++++ .../inputs/textarea/styling/src/textarea.css | 12 +- samples/layouts/avatar/styling/.prettierrc | 11 ++ samples/layouts/avatar/styling/ReadMe.md | 56 ++++++++++ samples/layouts/avatar/styling/index.html | 29 +++++ samples/layouts/avatar/styling/package.json | 59 ++++++++++ .../avatar/styling/sandbox.config.json | 7 ++ .../avatar/styling/src/AvatarStyle.css | 6 + samples/layouts/avatar/styling/src/index.css | 2 + samples/layouts/avatar/styling/src/index.ts | 15 +++ samples/layouts/avatar/styling/tsconfig.json | 20 ++++ .../layouts/avatar/styling/webpack.config.js | 105 ++++++++++++++++++ .../layouts/card/styling/src/CardStyling.css | 19 ++-- samples/layouts/card/styling/src/index.ts | 1 + samples/layouts/card/styling/src/layout.css | 8 ++ .../styling/src/ExpansionPanelStyling.css | 35 ++---- .../expansion-panel/styling/src/index.ts | 1 + .../expansion-panel/styling/src/layout.css | 19 ++++ .../layouts/icon/styling/src/IconStyle.css | 4 + samples/layouts/icon/styling/src/index.ts | 2 +- samples/layouts/stepper/styling/.prettierrc | 11 ++ samples/layouts/stepper/styling/ReadMe.md | 56 ++++++++++ samples/layouts/stepper/styling/index.html | 44 ++++++++ samples/layouts/stepper/styling/package.json | 60 ++++++++++ .../stepper/styling/sandbox.config.json | 7 ++ .../stepper/styling/src/StepperStyle.css | 9 ++ samples/layouts/stepper/styling/src/index.css | 2 + samples/layouts/stepper/styling/src/index.ts | 16 +++ .../layouts/stepper/styling/src/layout.css | 3 + samples/layouts/stepper/styling/tsconfig.json | 20 ++++ .../layouts/stepper/styling/webpack.config.js | 105 ++++++++++++++++++ samples/layouts/tabs/styling/.prettierrc | 11 ++ samples/layouts/tabs/styling/ReadMe.md | 56 ++++++++++ samples/layouts/tabs/styling/index.html | 37 ++++++ samples/layouts/tabs/styling/package.json | 59 ++++++++++ .../layouts/tabs/styling/sandbox.config.json | 7 ++ .../layouts/tabs/styling/src/TabsStyle.css | 7 ++ samples/layouts/tabs/styling/src/index.css | 2 + samples/layouts/tabs/styling/src/index.ts | 24 ++++ samples/layouts/tabs/styling/tsconfig.json | 20 ++++ .../layouts/tabs/styling/webpack.config.js | 105 ++++++++++++++++++ .../nav-bar/styling/src/NavbarStyling.css | 18 +-- .../nav-drawer/styling/src/drawer-styling.css | 31 ++---- samples/menus/nav-drawer/styling/src/index.ts | 1 + .../menus/nav-drawer/styling/src/layout.css | 7 ++ .../banner-styling/src/BannerStyling.css | 39 +------ .../banner/banner-styling/src/index.ts | 1 + .../banner/banner-styling/src/layout.css | 32 ++++++ .../dialog/styling/src/DialogStyling.css | 10 +- .../snackbar/styling/src/SnackbarStyling.css | 6 +- .../toast/styling/src/ToastStyling.css | 5 +- .../calendar/styling/src/CalendarStyling.css | 14 +-- .../styling/src/DatePickerStyling.css | 20 ++-- 136 files changed, 3148 insertions(+), 240 deletions(-) create mode 100644 samples/grids/tree/styling/.prettierrc create mode 100644 samples/grids/tree/styling/ReadMe.md create mode 100644 samples/grids/tree/styling/index.html create mode 100644 samples/grids/tree/styling/package.json create mode 100644 samples/grids/tree/styling/sandbox.config.json create mode 100644 samples/grids/tree/styling/src/TreeBasic.css create mode 100644 samples/grids/tree/styling/src/index.css create mode 100644 samples/grids/tree/styling/src/index.ts create mode 100644 samples/grids/tree/styling/src/layout.css create mode 100644 samples/grids/tree/styling/tsconfig.json create mode 100644 samples/grids/tree/styling/webpack.config.js create mode 100644 samples/inputs/badge/styling/.prettierrc create mode 100644 samples/inputs/badge/styling/ReadMe.md create mode 100644 samples/inputs/badge/styling/index.html create mode 100644 samples/inputs/badge/styling/package.json create mode 100644 samples/inputs/badge/styling/sandbox.config.json create mode 100644 samples/inputs/badge/styling/src/BadgeStyle.css create mode 100644 samples/inputs/badge/styling/src/index.css create mode 100644 samples/inputs/badge/styling/src/index.ts create mode 100644 samples/inputs/badge/styling/tsconfig.json create mode 100644 samples/inputs/badge/styling/webpack.config.js create mode 100644 samples/inputs/button-group/styling/src/ButtonGroupStyle.css create mode 100644 samples/inputs/checkbox/styling/.prettierrc create mode 100644 samples/inputs/checkbox/styling/ReadMe.md create mode 100644 samples/inputs/checkbox/styling/index.html create mode 100644 samples/inputs/checkbox/styling/package.json create mode 100644 samples/inputs/checkbox/styling/sandbox.config.json create mode 100644 samples/inputs/checkbox/styling/src/CheckboxStyle.css create mode 100644 samples/inputs/checkbox/styling/src/index.css create mode 100644 samples/inputs/checkbox/styling/src/index.ts create mode 100644 samples/inputs/checkbox/styling/tsconfig.json create mode 100644 samples/inputs/checkbox/styling/webpack.config.js create mode 100644 samples/inputs/combo/styling/src/ComboStyle.css create mode 100644 samples/inputs/date-time-input/styling/.prettierrc create mode 100644 samples/inputs/date-time-input/styling/ReadMe.md create mode 100644 samples/inputs/date-time-input/styling/index.html create mode 100644 samples/inputs/date-time-input/styling/package.json create mode 100644 samples/inputs/date-time-input/styling/sandbox.config.json create mode 100644 samples/inputs/date-time-input/styling/src/DateTimeInputStyle.css create mode 100644 samples/inputs/date-time-input/styling/src/index.css create mode 100644 samples/inputs/date-time-input/styling/src/index.ts create mode 100644 samples/inputs/date-time-input/styling/tsconfig.json create mode 100644 samples/inputs/date-time-input/styling/webpack.config.js create mode 100644 samples/inputs/mask-input/styling/.prettierrc create mode 100644 samples/inputs/mask-input/styling/ReadMe.md create mode 100644 samples/inputs/mask-input/styling/index.html create mode 100644 samples/inputs/mask-input/styling/package.json create mode 100644 samples/inputs/mask-input/styling/sandbox.config.json create mode 100644 samples/inputs/mask-input/styling/src/MaskInputStyle.css create mode 100644 samples/inputs/mask-input/styling/src/index.css create mode 100644 samples/inputs/mask-input/styling/src/index.ts create mode 100644 samples/inputs/mask-input/styling/tsconfig.json create mode 100644 samples/inputs/mask-input/styling/webpack.config.js create mode 100644 samples/inputs/radio/styling/src/RadioStyle.css create mode 100644 samples/inputs/rating/styling/src/RatingStyle.css create mode 100644 samples/inputs/slider/styling/src/layout.css create mode 100644 samples/inputs/switches/styling/.prettierrc create mode 100644 samples/inputs/switches/styling/ReadMe.md create mode 100644 samples/inputs/switches/styling/index.html create mode 100644 samples/inputs/switches/styling/package.json create mode 100644 samples/inputs/switches/styling/sandbox.config.json create mode 100644 samples/inputs/switches/styling/src/SwitchStyle.css create mode 100644 samples/inputs/switches/styling/src/index.css create mode 100644 samples/inputs/switches/styling/src/index.ts create mode 100644 samples/inputs/switches/styling/tsconfig.json create mode 100644 samples/inputs/switches/styling/webpack.config.js create mode 100644 samples/layouts/avatar/styling/.prettierrc create mode 100644 samples/layouts/avatar/styling/ReadMe.md create mode 100644 samples/layouts/avatar/styling/index.html create mode 100644 samples/layouts/avatar/styling/package.json create mode 100644 samples/layouts/avatar/styling/sandbox.config.json create mode 100644 samples/layouts/avatar/styling/src/AvatarStyle.css create mode 100644 samples/layouts/avatar/styling/src/index.css create mode 100644 samples/layouts/avatar/styling/src/index.ts create mode 100644 samples/layouts/avatar/styling/tsconfig.json create mode 100644 samples/layouts/avatar/styling/webpack.config.js create mode 100644 samples/layouts/card/styling/src/layout.css create mode 100644 samples/layouts/expansion-panel/styling/src/layout.css create mode 100644 samples/layouts/icon/styling/src/IconStyle.css create mode 100644 samples/layouts/stepper/styling/.prettierrc create mode 100644 samples/layouts/stepper/styling/ReadMe.md create mode 100644 samples/layouts/stepper/styling/index.html create mode 100644 samples/layouts/stepper/styling/package.json create mode 100644 samples/layouts/stepper/styling/sandbox.config.json create mode 100644 samples/layouts/stepper/styling/src/StepperStyle.css create mode 100644 samples/layouts/stepper/styling/src/index.css create mode 100644 samples/layouts/stepper/styling/src/index.ts create mode 100644 samples/layouts/stepper/styling/src/layout.css create mode 100644 samples/layouts/stepper/styling/tsconfig.json create mode 100644 samples/layouts/stepper/styling/webpack.config.js create mode 100644 samples/layouts/tabs/styling/.prettierrc create mode 100644 samples/layouts/tabs/styling/ReadMe.md create mode 100644 samples/layouts/tabs/styling/index.html create mode 100644 samples/layouts/tabs/styling/package.json create mode 100644 samples/layouts/tabs/styling/sandbox.config.json create mode 100644 samples/layouts/tabs/styling/src/TabsStyle.css create mode 100644 samples/layouts/tabs/styling/src/index.css create mode 100644 samples/layouts/tabs/styling/src/index.ts create mode 100644 samples/layouts/tabs/styling/tsconfig.json create mode 100644 samples/layouts/tabs/styling/webpack.config.js create mode 100644 samples/menus/nav-drawer/styling/src/layout.css create mode 100644 samples/notifications/banner/banner-styling/src/layout.css diff --git a/browser/public/index.html b/browser/public/index.html index 386c0e4d97..f19f3ac098 100644 --- a/browser/public/index.html +++ b/browser/public/index.html @@ -682,6 +682,7 @@ ─Basic Example ─Load On Demand ─Load On Demand Virtualized + ─Styling
MAPS
diff --git a/samples/grids/list/styling/src/ListStyling.css b/samples/grids/list/styling/src/ListStyling.css index 46b4bf275a..80f8af81be 100644 --- a/samples/grids/list/styling/src/ListStyling.css +++ b/samples/grids/list/styling/src/ListStyling.css @@ -1,18 +1,14 @@ igc-list-header { - font-size: 20px; - font-weight: 700; - color: #3f51b5; + font-size: 20px; + font-weight: 700; + color: var(--ig-primary-700); } igc-list-item::part(title) { - font-size: 18px; - color: #3f51b5; + font-size: 18px; + color: var(--ig-primary-600); } igc-list-item::part(subtitle) { - color: #0099ff; -} - -igc-list-item::part(end) { - --ig-secondary-500: 230,48%,47%; -} + color: var(--ig-primary-300); +} \ No newline at end of file diff --git a/samples/grids/tree/styling/.prettierrc b/samples/grids/tree/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/grids/tree/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/grids/tree/styling/ReadMe.md b/samples/grids/tree/styling/ReadMe.md new file mode 100644 index 0000000000..11af704576 --- /dev/null +++ b/samples/grids/tree/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Tree](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/grids/tree/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/grids/tree/styling/index.html b/samples/grids/tree/styling/index.html new file mode 100644 index 0000000000..60eba7bbc5 --- /dev/null +++ b/samples/grids/tree/styling/index.html @@ -0,0 +1,39 @@ + + + + Tree Styling Example + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + +
+
+ + <% if (false) { %><% } %> + + + diff --git a/samples/grids/tree/styling/package.json b/samples/grids/tree/styling/package.json new file mode 100644 index 0000000000..312f0b2bd7 --- /dev/null +++ b/samples/grids/tree/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-tree-basic", + "version": "1.0.0", + "description": "This project provides example of Tree using IgniteUI for Web Components", + "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" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.2.1", + "lit": "^3.2.0", + "lit-html": "^3.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.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/grids/tree/styling/sandbox.config.json b/samples/grids/tree/styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/grids/tree/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/grids/tree/styling/src/TreeBasic.css b/samples/grids/tree/styling/src/TreeBasic.css new file mode 100644 index 0000000000..e0ea8cfcfc --- /dev/null +++ b/samples/grids/tree/styling/src/TreeBasic.css @@ -0,0 +1,4 @@ +igc-tree-item::part(active) { + background: var(--ig-secondary-500); + color: var(--ig-secondary-500-contrast); +} diff --git a/samples/grids/tree/styling/src/index.css b/samples/grids/tree/styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/grids/tree/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/grids/tree/styling/src/index.ts b/samples/grids/tree/styling/src/index.ts new file mode 100644 index 0000000000..85a0c3811f --- /dev/null +++ b/samples/grids/tree/styling/src/index.ts @@ -0,0 +1,11 @@ +import { defineComponents, IgcTreeComponent } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./TreeBasic.css"; + +defineComponents(IgcTreeComponent); +export class TreeStyling { + constructor() { + } +} + +new TreeStyling(); diff --git a/samples/grids/tree/styling/src/layout.css b/samples/grids/tree/styling/src/layout.css new file mode 100644 index 0000000000..05f7e03658 --- /dev/null +++ b/samples/grids/tree/styling/src/layout.css @@ -0,0 +1,5 @@ +igc-tree { + width: 320px; + max-height: 360px; + overflow-y: auto; +} diff --git a/samples/grids/tree/styling/tsconfig.json b/samples/grids/tree/styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/grids/tree/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/grids/tree/styling/webpack.config.js b/samples/grids/tree/styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/grids/tree/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/inputs/badge/styling/.prettierrc b/samples/inputs/badge/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/badge/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/inputs/badge/styling/ReadMe.md b/samples/inputs/badge/styling/ReadMe.md new file mode 100644 index 0000000000..b4ff136cc7 --- /dev/null +++ b/samples/inputs/badge/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Badge](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/inputs/badge/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/inputs/badge/styling/index.html b/samples/inputs/badge/styling/index.html new file mode 100644 index 0000000000..788a9f7f90 --- /dev/null +++ b/samples/inputs/badge/styling/index.html @@ -0,0 +1,29 @@ + + + + + Badge Styling + + + + + + + + + + +
+
+ +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/inputs/badge/styling/package.json b/samples/inputs/badge/styling/package.json new file mode 100644 index 0000000000..7ad8c078bd --- /dev/null +++ b/samples/inputs/badge/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-badge-variants", + "version": "1.0.0", + "description": "This project provides example of Badge Variants using IgniteUI for Web Components", + "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" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.1.2", + "lit": "^3.2.0", + "lit-html": "^3.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.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/inputs/badge/styling/sandbox.config.json b/samples/inputs/badge/styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/inputs/badge/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/inputs/badge/styling/src/BadgeStyle.css b/samples/inputs/badge/styling/src/BadgeStyle.css new file mode 100644 index 0000000000..6d958e4ec8 --- /dev/null +++ b/samples/inputs/badge/styling/src/BadgeStyle.css @@ -0,0 +1,5 @@ +igc-badge::part(base) { + background: var(--ig-primary-500); + color: var(--ig-primary-500-contrast); + border-radius: 2px; +} \ No newline at end of file diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/badge/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/inputs/badge/styling/src/index.ts b/samples/inputs/badge/styling/src/index.ts new file mode 100644 index 0000000000..6096720df1 --- /dev/null +++ b/samples/inputs/badge/styling/src/index.ts @@ -0,0 +1,11 @@ +import { defineComponents, IgcBadgeComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './BadgeStyle.css' + +defineComponents(IgcBadgeComponent); +export class BadgeStyle { + constructor() { + } +} + +new BadgeStyle(); diff --git a/samples/inputs/badge/styling/tsconfig.json b/samples/inputs/badge/styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/inputs/badge/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/inputs/badge/styling/webpack.config.js b/samples/inputs/badge/styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/inputs/badge/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/inputs/button-group/styling/index.html b/samples/inputs/button-group/styling/index.html index 4e666a5687..5d6a570721 100644 --- a/samples/inputs/button-group/styling/index.html +++ b/samples/inputs/button-group/styling/index.html @@ -27,7 +27,7 @@ New York - + Tokyo diff --git a/samples/inputs/button-group/styling/src/ButtonGroupStyle.css b/samples/inputs/button-group/styling/src/ButtonGroupStyle.css new file mode 100644 index 0000000000..4181785f8d --- /dev/null +++ b/samples/inputs/button-group/styling/src/ButtonGroupStyle.css @@ -0,0 +1,8 @@ +igc-button-group::part(group) { + background-color: var(--ig-primary-500); + padding: 8px; +} + +igc-toggle-button::part(toggle) { + color: var(--ig-secondary-300); +} diff --git a/samples/inputs/button-group/styling/src/index.ts b/samples/inputs/button-group/styling/src/index.ts index 7a33e389bf..d366571b25 100644 --- a/samples/inputs/button-group/styling/src/index.ts +++ b/samples/inputs/button-group/styling/src/index.ts @@ -1,6 +1,6 @@ import { defineComponents, IgcButtonGroupComponent, IgcRippleComponent } from 'igniteui-webcomponents'; import 'igniteui-webcomponents/themes/light/material.css'; -import './index.css'; +import './ButtonGroupStyle.css' defineComponents(IgcButtonGroupComponent, IgcRippleComponent); export class ButtonGroupStyling { diff --git a/samples/inputs/button/styling/src/ButtonStyle.css b/samples/inputs/button/styling/src/ButtonStyle.css index 095b25940a..586cff6be1 100644 --- a/samples/inputs/button/styling/src/ButtonStyle.css +++ b/samples/inputs/button/styling/src/ButtonStyle.css @@ -1,5 +1,5 @@ igc-button::part(base) { - background-color: #e99221; - color: #011627; - padding: 18px; -} + background-color: var(--ig-primary-500); + color: var(--ig-primary-500-contrast); + padding: 18px; +} \ No newline at end of file diff --git a/samples/inputs/checkbox/styling/.prettierrc b/samples/inputs/checkbox/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/checkbox/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/inputs/checkbox/styling/ReadMe.md b/samples/inputs/checkbox/styling/ReadMe.md new file mode 100644 index 0000000000..10d5e3f23d --- /dev/null +++ b/samples/inputs/checkbox/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Checkbox](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/inputs/checkbox/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/inputs/checkbox/styling/index.html b/samples/inputs/checkbox/styling/index.html new file mode 100644 index 0000000000..7bb26d1246 --- /dev/null +++ b/samples/inputs/checkbox/styling/index.html @@ -0,0 +1,29 @@ + + + + + Checkbox Styling + + + + + + + + + + +
+
+ Label +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/inputs/checkbox/styling/package.json b/samples/inputs/checkbox/styling/package.json new file mode 100644 index 0000000000..3db8b57e6a --- /dev/null +++ b/samples/inputs/checkbox/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-checkbox-disabled", + "version": "1.0.0", + "description": "This project provides example of Checkbox Disabled using IgniteUI for Web Components", + "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" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.2.1", + "lit": "^3.2.0", + "lit-html": "^3.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.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/inputs/checkbox/styling/sandbox.config.json b/samples/inputs/checkbox/styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/inputs/checkbox/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/inputs/checkbox/styling/src/CheckboxStyle.css b/samples/inputs/checkbox/styling/src/CheckboxStyle.css new file mode 100644 index 0000000000..f3ce951a00 --- /dev/null +++ b/samples/inputs/checkbox/styling/src/CheckboxStyle.css @@ -0,0 +1,8 @@ +igc-checkbox::part(indicator) { + stroke: var(--ig-secondary-500-contrast); +} + +igc-checkbox::part(control checked)::after { + border-radius: 4px; + background: var(--ig-secondary-500); +} \ No newline at end of file diff --git a/samples/inputs/checkbox/styling/src/index.css b/samples/inputs/checkbox/styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/checkbox/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/inputs/checkbox/styling/src/index.ts b/samples/inputs/checkbox/styling/src/index.ts new file mode 100644 index 0000000000..ed1c2b58c2 --- /dev/null +++ b/samples/inputs/checkbox/styling/src/index.ts @@ -0,0 +1,11 @@ +import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './CheckboxStyle.css' + +defineComponents(IgcCheckboxComponent); +export class CheckboxStyling { + constructor() { + } +} + +new CheckboxStyling(); diff --git a/samples/inputs/checkbox/styling/tsconfig.json b/samples/inputs/checkbox/styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/inputs/checkbox/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/inputs/checkbox/styling/webpack.config.js b/samples/inputs/checkbox/styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/inputs/checkbox/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/inputs/chip/styling/src/ChipStyle.css b/samples/inputs/chip/styling/src/ChipStyle.css index 988dd8101e..73fe8efda7 100644 --- a/samples/inputs/chip/styling/src/ChipStyle.css +++ b/samples/inputs/chip/styling/src/ChipStyle.css @@ -1,8 +1,8 @@ igc-chip::part(base) { - background: #011627; - color: #ECAA53; + background: var(--ig-primary-500); + color: var(--ig-primary-500-contrast); } igc-chip::part(suffix) { - color: #B7B6C2; + color: var(--ig-gray-400); } \ No newline at end of file diff --git a/samples/inputs/circular-progress-indicator/styling/src/CircularProgressStyling.css b/samples/inputs/circular-progress-indicator/styling/src/CircularProgressStyling.css index a602db9a93..942408cd71 100644 --- a/samples/inputs/circular-progress-indicator/styling/src/CircularProgressStyling.css +++ b/samples/inputs/circular-progress-indicator/styling/src/CircularProgressStyling.css @@ -1,13 +1,13 @@ -igc-circular-progress{ - margin: 20px; - --diameter: 50px; +igc-circular-progress { + margin: 20px; + --diameter: 50px; } igc-circular-progress::part(gradient_end), -igc-circular-progress::part(gradient_start){ - stop-color: #72da67; +igc-circular-progress::part(gradient_start) { + stop-color: var(--ig-success-200); } -igc-circular-progress::part(track){ - stroke: rgb(216, 211, 211); +igc-circular-progress::part(track) { + stroke: var(--ig-gray-400); } \ No newline at end of file diff --git a/samples/inputs/combo/styling/src/ComboStyle.css b/samples/inputs/combo/styling/src/ComboStyle.css new file mode 100644 index 0000000000..deec46585d --- /dev/null +++ b/samples/inputs/combo/styling/src/ComboStyle.css @@ -0,0 +1,17 @@ +igc-combo::part(search-input) { + background-color: var(--ig-gray-100); + border-radius: 2px; +} + +igc-combo::part(input) { + background-color: var(--ig-gray-100); +} + +igc-combo::part(prefix) { + background-color: var(--ig-secondary-50); + color: var(--ig-primary-500); +} + +igc-combo::part(toggle-icon) { + color: var(--ig-primary-500); +} \ No newline at end of file diff --git a/samples/inputs/combo/styling/src/index.ts b/samples/inputs/combo/styling/src/index.ts index 6e02506878..8df99bab5a 100644 --- a/samples/inputs/combo/styling/src/index.ts +++ b/samples/inputs/combo/styling/src/index.ts @@ -1,6 +1,6 @@ import { defineComponents, registerIconFromText, IgcComboComponent } from "igniteui-webcomponents"; import "igniteui-webcomponents/themes/light/bootstrap.css"; -import "./index.css"; +import "./ComboStyle.css"; defineComponents(IgcComboComponent); diff --git a/samples/inputs/date-time-input/styling/.prettierrc b/samples/inputs/date-time-input/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/date-time-input/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/inputs/date-time-input/styling/ReadMe.md b/samples/inputs/date-time-input/styling/ReadMe.md new file mode 100644 index 0000000000..8008e0c31f --- /dev/null +++ b/samples/inputs/date-time-input/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Date Time Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/inputs/date-time-input/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/inputs/date-time-input/styling/index.html b/samples/inputs/date-time-input/styling/index.html new file mode 100644 index 0000000000..09523b082b --- /dev/null +++ b/samples/inputs/date-time-input/styling/index.html @@ -0,0 +1,28 @@ + + + + Date Time Input Styling + + + + + + + + + + +
+
+ + + + + +
+
+ + <% if (false) { %><% } %> + + + diff --git a/samples/inputs/date-time-input/styling/package.json b/samples/inputs/date-time-input/styling/package.json new file mode 100644 index 0000000000..2e21fe2b51 --- /dev/null +++ b/samples/inputs/date-time-input/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-date-time-input-step-up-down", + "version": "1.0.0", + "description": "This project provides example of date time input step up/down using IgniteUI for Web Components", + "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" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.2.1", + "lit": "^3.2.0", + "lit-html": "^3.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.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/inputs/date-time-input/styling/sandbox.config.json b/samples/inputs/date-time-input/styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/inputs/date-time-input/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/inputs/date-time-input/styling/src/DateTimeInputStyle.css b/samples/inputs/date-time-input/styling/src/DateTimeInputStyle.css new file mode 100644 index 0000000000..8e382d1d37 --- /dev/null +++ b/samples/inputs/date-time-input/styling/src/DateTimeInputStyle.css @@ -0,0 +1,12 @@ +igc-date-time-input::part(input) { + background-color: var(--ig-primary-100); + border-color: var(--ig-secondary-500); + box-shadow: none; +} + +igc-date-time-input::part(prefix), +igc-date-time-input::part(suffix) { + color: var(--ig-primary-600-contrast); + background-color: var(--ig-primary-500); + border-color: var(--ig-secondary-500); +} \ No newline at end of file diff --git a/samples/inputs/date-time-input/styling/src/index.css b/samples/inputs/date-time-input/styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/date-time-input/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/inputs/date-time-input/styling/src/index.ts b/samples/inputs/date-time-input/styling/src/index.ts new file mode 100644 index 0000000000..3925aba0a1 --- /dev/null +++ b/samples/inputs/date-time-input/styling/src/index.ts @@ -0,0 +1,45 @@ +import { defineComponents, IgcIconComponent, IgcDateTimeInputComponent, registerIconFromText, DatePartDeltas, DatePart } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './DateTimeInputStyle.css' + +defineComponents(IgcIconComponent, IgcDateTimeInputComponent); + +const upIcon = +''; + +const downIcon = +''; + +const clearIcon = +''; + +export class DateTimeInputStyling { + constructor() { + const input = document.getElementById('dateTimeInput') as IgcDateTimeInputComponent; + + const spinDelta: DatePartDeltas = { + date: 2, + month: 3, + year: 10, + }; + + input.spinDelta = spinDelta; + + const up = document.getElementById('up'); + const down = document.getElementById('down'); + + up!.addEventListener('click', () => { + input.stepUp("month" as DatePart); + }); + + down!.addEventListener('click', () => { + input.stepDown("date" as DatePart); + }); + + registerIconFromText("up", upIcon); + registerIconFromText("down", downIcon); + registerIconFromText("clear", clearIcon); + } +} + +new DateTimeInputStyling(); diff --git a/samples/inputs/date-time-input/styling/tsconfig.json b/samples/inputs/date-time-input/styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/inputs/date-time-input/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/inputs/date-time-input/styling/webpack.config.js b/samples/inputs/date-time-input/styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/inputs/date-time-input/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/inputs/dropdown/styling/src/DropDownStyling.css b/samples/inputs/dropdown/styling/src/DropDownStyling.css index e6df7c5be4..0ccce8a794 100644 --- a/samples/inputs/dropdown/styling/src/DropDownStyling.css +++ b/samples/inputs/dropdown/styling/src/DropDownStyling.css @@ -1,12 +1,12 @@ igc-dropdown::part(list) { - height: 220px; + height: 220px; } igc-dropdown-item[selected] { - background: #28a745; + background: var(--ig-success-300); } igc-dropdown-group::part(label) { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } \ No newline at end of file diff --git a/samples/inputs/icon-button/styling/src/IconButtonStyling.css b/samples/inputs/icon-button/styling/src/IconButtonStyling.css index 3dca61aa84..08c6a54e33 100644 --- a/samples/inputs/icon-button/styling/src/IconButtonStyling.css +++ b/samples/inputs/icon-button/styling/src/IconButtonStyling.css @@ -1,11 +1,9 @@ +igc-icon-button[variant="contained"]:not([disabled])::part(base) { + padding: 12px; + background-color: var(--ig-success-500); +} -igc-icon-button[variant=contained]:not([disabled])::part(base) { - padding: 12px; - color: olive; - background-color: lightgray; - } - - igc-icon-button::part(icon) { - --size: 32px; - } - \ No newline at end of file +igc-icon-button::part(icon) { + --size: 22px; + color: var(--ig-success-500-contrast); +} diff --git a/samples/inputs/input/styling/src/InputStyling.css b/samples/inputs/input/styling/src/InputStyling.css index 875a094a64..c7f352551a 100644 --- a/samples/inputs/input/styling/src/InputStyling.css +++ b/samples/inputs/input/styling/src/InputStyling.css @@ -1,15 +1,16 @@ -igc-input::part(input){ - background-color: rgb(169, 214, 229); - border-color: rgb(42, 111, 151); +igc-input::part(input) { + background-color: var(--ig-primary-100); + border-color: var(--ig-secondary-500); + box-shadow: none; } -igc-input::part(label){ - color: rgb(1, 42, 74); +igc-input::part(label) { + color: var(--ig-gray-700); } igc-input::part(prefix), -igc-input::part(suffix){ - color: white; - border-color: rgb(42, 111, 151); - background-color: rgb(70, 143, 175); +igc-input::part(suffix) { + color: var(--ig-primary-600-contrast); + background-color: var(--ig-primary-600); + border-color: var(--ig-secondary-600); } diff --git a/samples/inputs/linear-progress-indicator/styling/index.html b/samples/inputs/linear-progress-indicator/styling/index.html index 9637d0a9d8..e50202accf 100644 --- a/samples/inputs/linear-progress-indicator/styling/index.html +++ b/samples/inputs/linear-progress-indicator/styling/index.html @@ -14,7 +14,7 @@
- +
diff --git a/samples/inputs/linear-progress-indicator/styling/src/LinearProgressStyling.css b/samples/inputs/linear-progress-indicator/styling/src/LinearProgressStyling.css index d92367cb8f..f7a027abf4 100644 --- a/samples/inputs/linear-progress-indicator/styling/src/LinearProgressStyling.css +++ b/samples/inputs/linear-progress-indicator/styling/src/LinearProgressStyling.css @@ -1,11 +1,11 @@ igc-linear-progress::part(track){ - background-color: #D3D3D3 + background-color: var(--ig-gray-300) } igc-linear-progress::part(fill){ - background-color: #ECAA53 + background-color: var(--ig-primary-300) } igc-linear-progress::part(label){ - color: #ECAA53 + color: var(--ig-primary-300) } \ No newline at end of file diff --git a/samples/inputs/mask-input/styling/.prettierrc b/samples/inputs/mask-input/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/mask-input/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/inputs/mask-input/styling/ReadMe.md b/samples/inputs/mask-input/styling/ReadMe.md new file mode 100644 index 0000000000..8befdec0fa --- /dev/null +++ b/samples/inputs/mask-input/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Mask Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/inputs/mask-input/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/inputs/mask-input/styling/index.html b/samples/inputs/mask-input/styling/index.html new file mode 100644 index 0000000000..13271e007b --- /dev/null +++ b/samples/inputs/mask-input/styling/index.html @@ -0,0 +1,28 @@ + + + + Mask Input Styling + + + + + + + + + + +
+
+ + + Phone number + +
+
+ + + <% if (false) { %><% } %> + + + diff --git a/samples/inputs/mask-input/styling/package.json b/samples/inputs/mask-input/styling/package.json new file mode 100644 index 0000000000..9efcab15cf --- /dev/null +++ b/samples/inputs/mask-input/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-mask-input-applying-mask", + "version": "1.0.0", + "description": "This project provides example of Mask Input Applying Mask using IgniteUI for Web Components", + "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" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.2.1", + "lit": "^3.2.0", + "lit-html": "^3.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.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/inputs/mask-input/styling/sandbox.config.json b/samples/inputs/mask-input/styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/inputs/mask-input/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/inputs/mask-input/styling/src/MaskInputStyle.css b/samples/inputs/mask-input/styling/src/MaskInputStyle.css new file mode 100644 index 0000000000..f8492ff96f --- /dev/null +++ b/samples/inputs/mask-input/styling/src/MaskInputStyle.css @@ -0,0 +1,9 @@ +igc-mask-input::part(input) { + background-color: var(--ig-primary-100); + border-color: var(--ig-secondary-500); + box-shadow: none; +} + +igc-mask-input::part(input)::placeholder { + color: var(--ig-primary-100-contrast); +} \ No newline at end of file diff --git a/samples/inputs/mask-input/styling/src/index.css b/samples/inputs/mask-input/styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/mask-input/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/inputs/mask-input/styling/src/index.ts b/samples/inputs/mask-input/styling/src/index.ts new file mode 100644 index 0000000000..18690bb38c --- /dev/null +++ b/samples/inputs/mask-input/styling/src/index.ts @@ -0,0 +1,16 @@ +import { defineComponents, IgcIconComponent, IgcMaskInputComponent, registerIconFromText } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './MaskInputStyle.css' + +defineComponents(IgcIconComponent, IgcMaskInputComponent); + +const phoneIcon = +''; + +export class MaskInputStyling { + constructor() { + registerIconFromText("phone", phoneIcon); + } +} + +new MaskInputStyling(); diff --git a/samples/inputs/mask-input/styling/tsconfig.json b/samples/inputs/mask-input/styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/inputs/mask-input/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/inputs/mask-input/styling/webpack.config.js b/samples/inputs/mask-input/styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/inputs/mask-input/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/inputs/radio/styling/src/RadioStyle.css b/samples/inputs/radio/styling/src/RadioStyle.css new file mode 100644 index 0000000000..b5440db9c7 --- /dev/null +++ b/samples/inputs/radio/styling/src/RadioStyle.css @@ -0,0 +1,15 @@ +igc-radio::part(control) { + --size: 18px; +} + +igc-radio-group { + padding: 12px; +} + +igc-radio::part(checked)::after { + background-color: var(--ig-success-500); +} + +igc-radio::part(label) { + color: var(--ig-secondary-800); +} diff --git a/samples/inputs/radio/styling/src/index.ts b/samples/inputs/radio/styling/src/index.ts index e4d4ccce55..15d4ce474f 100644 --- a/samples/inputs/radio/styling/src/index.ts +++ b/samples/inputs/radio/styling/src/index.ts @@ -1,6 +1,6 @@ import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -import "./index.css"; +import "./RadioStyle.css"; defineComponents(IgcRadioComponent, IgcRadioGroupComponent); export class RadioStyling { diff --git a/samples/inputs/rating/styling/src/RatingStyle.css b/samples/inputs/rating/styling/src/RatingStyle.css new file mode 100644 index 0000000000..26622e4cb4 --- /dev/null +++ b/samples/inputs/rating/styling/src/RatingStyle.css @@ -0,0 +1,7 @@ +igc-rating::part(full) { + color: var(--ig-primary-500) +} + +igc-rating::part(empty) { + color: var(--ig-secondary-200); +} \ No newline at end of file diff --git a/samples/inputs/rating/styling/src/index.ts b/samples/inputs/rating/styling/src/index.ts index 4e51b45bb6..1eb240c079 100644 --- a/samples/inputs/rating/styling/src/index.ts +++ b/samples/inputs/rating/styling/src/index.ts @@ -1,6 +1,6 @@ import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -import './index.css'; +import './RatingStyle.css'; defineComponents(IgcRatingComponent); export class RatingStyling { diff --git a/samples/inputs/select/styling/src/SelectStyling.css b/samples/inputs/select/styling/src/SelectStyling.css index 3e999153a8..5c63d2587c 100644 --- a/samples/inputs/select/styling/src/SelectStyling.css +++ b/samples/inputs/select/styling/src/SelectStyling.css @@ -1,26 +1,17 @@ igc-select::part(base) { - background: rgb(225, 241, 246); -} - -igc-select-item::part(prefix), -igc-select-item::part(suffix) { - color: rgb(1, 42, 74); + background: var(--ig-primary-50); } igc-select-item[active] { - background: rgb(42, 111, 151); + background: var(--ig-secondary-300); } -igc-select::part(label) { - color: rgb(1, 42, 74); -} - -igc-select::part(input){ - background-color: rgb(225, 241, 246); +igc-select::part(input) { + background-color: var(--ig-primary-50); } igc-select::part(prefix), -igc-select::part(suffix){ - color: white; - background: rgb(42, 111, 151); -} +igc-select::part(suffix) { + color: var(--ig-secondary-500-contrast); + background: var(--ig-secondary-500); +} \ No newline at end of file diff --git a/samples/inputs/slider/styling/src/SliderStyling.css b/samples/inputs/slider/styling/src/SliderStyling.css index 8ed9188737..c85188bffe 100644 --- a/samples/inputs/slider/styling/src/SliderStyling.css +++ b/samples/inputs/slider/styling/src/SliderStyling.css @@ -1,39 +1,31 @@ -igc-slider { - padding: 30px 30px 0px 30px; -} - -igc-range-slider { - padding: 30px 30px 0px 30px; -} - igc-slider::part(thumb) { -background: #28a745; + background: var(--ig-success-500); } igc-slider::part(thumb):focus { - background: #28a745; - box-shadow: 0 0 0 2px #28a74694; + background: var(--ig-success-200); + box-shadow: 0 0 0 2px var(--ig-success-200); } igc-slider::part(fill) { - display: block; - background: #28a745; + display: block; + background: var(--ig-success-500); } igc-range-slider::part(thumb) { - background: orange; + background: var(--ig-warn-600); } igc-range-slider::part(thumb):focus { - background: navy; - box-shadow: 0 0 0 2px orange; + background: var(--ig-warn-400); + box-shadow: 0 0 0 2px var(--ig-warn-500); } igc-range-slider::part(track) { - display: block; - background: navy; + display: block; + background: var(--ig-primary-800); } igc-range-slider::part(thumb-label-inner) { - background: navy; -} \ No newline at end of file + background: var(--ig-primary-800); +} diff --git a/samples/inputs/slider/styling/src/index.ts b/samples/inputs/slider/styling/src/index.ts index 0381a907b6..bad699f15e 100644 --- a/samples/inputs/slider/styling/src/index.ts +++ b/samples/inputs/slider/styling/src/index.ts @@ -1,6 +1,7 @@ import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from 'igniteui-webcomponents'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './SliderStyling.css'; +import './layout.css'; defineComponents(IgcSliderComponent); defineComponents(IgcRangeSliderComponent); diff --git a/samples/inputs/slider/styling/src/layout.css b/samples/inputs/slider/styling/src/layout.css new file mode 100644 index 0000000000..1b53709016 --- /dev/null +++ b/samples/inputs/slider/styling/src/layout.css @@ -0,0 +1,7 @@ +igc-slider { + padding: 30px 30px 0px 30px; +} + +igc-range-slider { + padding: 30px 30px 0px 30px; +} diff --git a/samples/inputs/switches/styling/.prettierrc b/samples/inputs/switches/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/switches/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/inputs/switches/styling/ReadMe.md b/samples/inputs/switches/styling/ReadMe.md new file mode 100644 index 0000000000..240c0198f3 --- /dev/null +++ b/samples/inputs/switches/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Switches](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/inputs/switches/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/inputs/switches/styling/index.html b/samples/inputs/switches/styling/index.html new file mode 100644 index 0000000000..05461c5688 --- /dev/null +++ b/samples/inputs/switches/styling/index.html @@ -0,0 +1,29 @@ + + + + + Switch Checking + + + + + + + + + + +
+
+ Label +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/inputs/switches/styling/package.json b/samples/inputs/switches/styling/package.json new file mode 100644 index 0000000000..aa2e9232ed --- /dev/null +++ b/samples/inputs/switches/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-switch-checked", + "version": "1.0.0", + "description": "This project provides example of Switch Checked using IgniteUI for Web Components", + "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" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.2.1", + "lit": "^3.2.0", + "lit-html": "^3.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.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/inputs/switches/styling/sandbox.config.json b/samples/inputs/switches/styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/inputs/switches/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/inputs/switches/styling/src/SwitchStyle.css b/samples/inputs/switches/styling/src/SwitchStyle.css new file mode 100644 index 0000000000..25047c1826 --- /dev/null +++ b/samples/inputs/switches/styling/src/SwitchStyle.css @@ -0,0 +1,12 @@ +igc-switch::part(thumb) { + background-color: var(--ig-success-500); + box-shadow: none; +} + +igc-switch::part(thumb checked) { + background-color: var(--ig-gray-50); +} + +igc-switch::part(control checked) { + background-color: var(--ig-success-500); +} diff --git a/samples/inputs/switches/styling/src/index.css b/samples/inputs/switches/styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/switches/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/inputs/switches/styling/src/index.ts b/samples/inputs/switches/styling/src/index.ts new file mode 100644 index 0000000000..971ed8e970 --- /dev/null +++ b/samples/inputs/switches/styling/src/index.ts @@ -0,0 +1,11 @@ +import {defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './SwitchStyle.css' + +defineComponents(IgcSwitchComponent); +export class SwitchStyling { + constructor() { + } +} + +new SwitchStyling(); diff --git a/samples/inputs/switches/styling/tsconfig.json b/samples/inputs/switches/styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/inputs/switches/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/inputs/switches/styling/webpack.config.js b/samples/inputs/switches/styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/inputs/switches/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/inputs/textarea/styling/src/textarea.css b/samples/inputs/textarea/styling/src/textarea.css index f8ac50e87e..0ea6086a8c 100644 --- a/samples/inputs/textarea/styling/src/textarea.css +++ b/samples/inputs/textarea/styling/src/textarea.css @@ -1,15 +1,15 @@ igc-textarea::part(input) { - background-color: rgb(169, 214, 229); - border-color: rgb(42, 111, 151); + background-color: var(--ig-info-100); + border-color: var(--ig-primary-400); } igc-textarea::part(label) { - color: rgb(1, 42, 74); + color: var(--ig-gray-800); } igc-textarea::part(prefix), igc-textarea::part(suffix) { - color: white; - border-color: rgb(42, 111, 151); - background-color: rgb(70, 143, 175); + color: var(--ig-primary-500-contrast); + border-color: var(--ig-primary-500); + background-color: var(--ig-primary-500); } diff --git a/samples/layouts/avatar/styling/.prettierrc b/samples/layouts/avatar/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/layouts/avatar/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/avatar/styling/ReadMe.md b/samples/layouts/avatar/styling/ReadMe.md new file mode 100644 index 0000000000..c6b4f3b48e --- /dev/null +++ b/samples/layouts/avatar/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Avatar](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/avatar/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/avatar/styling/index.html b/samples/layouts/avatar/styling/index.html new file mode 100644 index 0000000000..bfe3f87d85 --- /dev/null +++ b/samples/layouts/avatar/styling/index.html @@ -0,0 +1,29 @@ + + + + + Avatar Styling + + + + + + + + + + +
+
+ +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/layouts/avatar/styling/package.json b/samples/layouts/avatar/styling/package.json new file mode 100644 index 0000000000..eb732d771f --- /dev/null +++ b/samples/layouts/avatar/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-avatar-shape", + "version": "1.0.0", + "description": "This project provides example of Avatar Shape using IgniteUI for Web Components", + "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" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.2.1", + "lit": "^3.2.0", + "lit-html": "^3.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.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/avatar/styling/sandbox.config.json b/samples/layouts/avatar/styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/layouts/avatar/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/avatar/styling/src/AvatarStyle.css b/samples/layouts/avatar/styling/src/AvatarStyle.css new file mode 100644 index 0000000000..a55c955108 --- /dev/null +++ b/samples/layouts/avatar/styling/src/AvatarStyle.css @@ -0,0 +1,6 @@ +igc-avatar::part(base) { + --size: 60px; + color: var(--ig-success-500-contrast); + background: var(--ig-success-500);; + border-radius: 20px; +} \ No newline at end of file diff --git a/samples/layouts/avatar/styling/src/index.css b/samples/layouts/avatar/styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/layouts/avatar/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/avatar/styling/src/index.ts b/samples/layouts/avatar/styling/src/index.ts new file mode 100644 index 0000000000..d6df833e53 --- /dev/null +++ b/samples/layouts/avatar/styling/src/index.ts @@ -0,0 +1,15 @@ +import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './AvatarStyle.css' + +defineComponents(IgcAvatarComponent, IgcIconComponent); +const homeIcon = + ''; + +export class AvatarStyle { + constructor() { + registerIconFromText("home", homeIcon, "material"); + } +} + +new AvatarStyle(); diff --git a/samples/layouts/avatar/styling/tsconfig.json b/samples/layouts/avatar/styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/layouts/avatar/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/avatar/styling/webpack.config.js b/samples/layouts/avatar/styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/layouts/avatar/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/layouts/card/styling/src/CardStyling.css b/samples/layouts/card/styling/src/CardStyling.css index 87d6757275..78695ddd57 100644 --- a/samples/layouts/card/styling/src/CardStyling.css +++ b/samples/layouts/card/styling/src/CardStyling.css @@ -1,22 +1,17 @@ -.card-wrapper { - max-width: 320px; - min-width: 220px; -} - igc-card { - background-color: #011627; + background-color: var(--ig-secondary-900); } igc-card-content, -igc-card-header > *[slot="title"] { - color: #FEFEFE; +igc-card-header::part(title) { + color: var(--ig-primary-500-contrast); } igc-card-header > *[slot="subtitle"] { - color: #ECAA53; - opacity: 0.9; + color: var(--ig-warn-500); + opacity: 0.9; } -igc-icon-button+igc-icon-button { - margin-left: 10px; +igc-icon-button::part(base) { + background-color: var(--ig-primary-300); } \ No newline at end of file diff --git a/samples/layouts/card/styling/src/index.ts b/samples/layouts/card/styling/src/index.ts index e66c75051f..67e06c3b9f 100644 --- a/samples/layouts/card/styling/src/index.ts +++ b/samples/layouts/card/styling/src/index.ts @@ -2,6 +2,7 @@ import { defineComponents, IgcCardComponent, IgcIconButtonComponent, IgcRippleCo import { all } from '@igniteui/material-icons-extended'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './CardStyling.css'; +import './layout.css' defineComponents(IgcCardComponent, IgcIconButtonComponent, IgcRippleComponent); export class CardStyling { diff --git a/samples/layouts/card/styling/src/layout.css b/samples/layouts/card/styling/src/layout.css new file mode 100644 index 0000000000..af785a30c5 --- /dev/null +++ b/samples/layouts/card/styling/src/layout.css @@ -0,0 +1,8 @@ +.card-wrapper { + max-width: 320px; + min-width: 220px; +} + +igc-icon-button+igc-icon-button { + margin-left: 10px; +} \ No newline at end of file diff --git a/samples/layouts/expansion-panel/styling/src/ExpansionPanelStyling.css b/samples/layouts/expansion-panel/styling/src/ExpansionPanelStyling.css index 68f68a76e9..a48114f393 100644 --- a/samples/layouts/expansion-panel/styling/src/ExpansionPanelStyling.css +++ b/samples/layouts/expansion-panel/styling/src/ExpansionPanelStyling.css @@ -1,42 +1,25 @@ igc-expansion-panel { - width: 500px; - background-color: #18203b; - color: white; - border-radius: 8px; + background-color: var(--ig-secondary-900); + color: var(--ig-secondary-900-contrast); } -igc-button::part(base){ - color: #18203b; +igc-button::part(base) { + color: var(--ig-secondary-900-contrast); } igc-button::part(base)::before { - background-color: #ffd351; + background-color: var(--ig-warn-500); } igc-expansion-panel::part(indicator) { - color: #ffd351; + color: var(--ig-warn-500); } igc-expansion-panel::part(header) { - background-color: #18203b; + background-color: var(--ig-secondary-900); } igc-expansion-panel::part(title), igc-expansion-panel::part(subtitle) { - color: #ffd351; -} - -igc-button { - display: flex; - margin-top: 16px; -} - -a { - text-decoration: none; -} - -img { - width: 100%; - margin-bottom: 8px; - border-radius: 8px; -} + color: var(--ig-warn-500); +} \ No newline at end of file diff --git a/samples/layouts/expansion-panel/styling/src/index.ts b/samples/layouts/expansion-panel/styling/src/index.ts index bb51eb35a0..fc3558172d 100644 --- a/samples/layouts/expansion-panel/styling/src/index.ts +++ b/samples/layouts/expansion-panel/styling/src/index.ts @@ -1,6 +1,7 @@ import { defineComponents, IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent } from 'igniteui-webcomponents'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './ExpansionPanelStyling.css'; +import './layout.css' defineComponents(IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent); export class ExpansionPanelStyling { diff --git a/samples/layouts/expansion-panel/styling/src/layout.css b/samples/layouts/expansion-panel/styling/src/layout.css new file mode 100644 index 0000000000..10a8933cd9 --- /dev/null +++ b/samples/layouts/expansion-panel/styling/src/layout.css @@ -0,0 +1,19 @@ +igc-button { + display: flex; + margin-top: 16px; +} + +a { + text-decoration: none; +} + +img { + width: 100%; + margin-bottom: 8px; + border-radius: 8px; +} + +igc-expansion-panel { + width: 500px; + border-radius: 8px; +} \ No newline at end of file diff --git a/samples/layouts/icon/styling/src/IconStyle.css b/samples/layouts/icon/styling/src/IconStyle.css new file mode 100644 index 0000000000..c87f5ea763 --- /dev/null +++ b/samples/layouts/icon/styling/src/IconStyle.css @@ -0,0 +1,4 @@ +igc-icon { + --size: 28px; + color: var(--ig-primary-500); +} \ No newline at end of file diff --git a/samples/layouts/icon/styling/src/index.ts b/samples/layouts/icon/styling/src/index.ts index 072fbfaf45..822ffbedba 100644 --- a/samples/layouts/icon/styling/src/index.ts +++ b/samples/layouts/icon/styling/src/index.ts @@ -1,6 +1,6 @@ import { defineComponents, IgcIconComponent, registerIconFromText } from "igniteui-webcomponents"; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -import './index.css'; +import './IconStyle.css'; defineComponents(IgcIconComponent); diff --git a/samples/layouts/stepper/styling/.prettierrc b/samples/layouts/stepper/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/layouts/stepper/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/stepper/styling/ReadMe.md b/samples/layouts/stepper/styling/ReadMe.md new file mode 100644 index 0000000000..e71a60a406 --- /dev/null +++ b/samples/layouts/stepper/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Stepper](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/stepper/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/stepper/styling/index.html b/samples/layouts/stepper/styling/index.html new file mode 100644 index 0000000000..de4e0d0cc0 --- /dev/null +++ b/samples/layouts/stepper/styling/index.html @@ -0,0 +1,44 @@ + + + + Stepper Styling Example + + + + + + + + + + +
+
+ + + Order +
+ NEXT + + + Payment +
+ PREVIOUS + NEXT + + + Confirmation +
+ PREVIOUS + RESET + + +
+
+ + <% if (false) { %> + + <% } %> + + + \ No newline at end of file diff --git a/samples/layouts/stepper/styling/package.json b/samples/layouts/stepper/styling/package.json new file mode 100644 index 0000000000..b446991e58 --- /dev/null +++ b/samples/layouts/stepper/styling/package.json @@ -0,0 +1,60 @@ +{ + "name": "wc-stepper-title-position-and-orientation", + "version": "1.0.0", + "description": "This project provides example of Stepper Title Position and Orientation using IgniteUI for Web Components", + "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" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.2.1", + "install": "^0.13.0", + "lit": "^3.2.0", + "lit-html": "^3.2.0", + "npm": "^8.19.2", + "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", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/stepper/styling/sandbox.config.json b/samples/layouts/stepper/styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/layouts/stepper/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/stepper/styling/src/StepperStyle.css b/samples/layouts/stepper/styling/src/StepperStyle.css new file mode 100644 index 0000000000..1cb5454321 --- /dev/null +++ b/samples/layouts/stepper/styling/src/StepperStyle.css @@ -0,0 +1,9 @@ +igc-step::part(title) { + color: var(--ig-primary-500); +} +igc-step[active]::part(indicator) { + background-color: var(--ig-primary-500); +} +igc-step::part(indicator) { + background-color: var(--ig-surface-500); +} diff --git a/samples/layouts/stepper/styling/src/index.css b/samples/layouts/stepper/styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/layouts/stepper/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/stepper/styling/src/index.ts b/samples/layouts/stepper/styling/src/index.ts new file mode 100644 index 0000000000..f51f12c6fe --- /dev/null +++ b/samples/layouts/stepper/styling/src/index.ts @@ -0,0 +1,16 @@ +import { defineComponents, IgcStepperComponent, IgcRadioGroupComponent, IgcRadioComponent, IgcButtonComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './StepperStyle.css'; +import './layout.css'; + +defineComponents(IgcStepperComponent, IgcRadioGroupComponent, IgcButtonComponent); +export class StepperStyling { + private stepper: IgcStepperComponent; + + constructor() { + this.stepper = document.querySelector("igc-stepper") as IgcStepperComponent; + + } +} + +new StepperStyling(); diff --git a/samples/layouts/stepper/styling/src/layout.css b/samples/layouts/stepper/styling/src/layout.css new file mode 100644 index 0000000000..9a06ace75e --- /dev/null +++ b/samples/layouts/stepper/styling/src/layout.css @@ -0,0 +1,3 @@ +.container { + padding: 1rem; +} diff --git a/samples/layouts/stepper/styling/tsconfig.json b/samples/layouts/stepper/styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/layouts/stepper/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/stepper/styling/webpack.config.js b/samples/layouts/stepper/styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/layouts/stepper/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/layouts/tabs/styling/.prettierrc b/samples/layouts/tabs/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/layouts/tabs/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/tabs/styling/ReadMe.md b/samples/layouts/tabs/styling/ReadMe.md new file mode 100644 index 0000000000..80bf082755 --- /dev/null +++ b/samples/layouts/tabs/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Tabs](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/tabs/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/tabs/styling/index.html b/samples/layouts/tabs/styling/index.html new file mode 100644 index 0000000000..2b469ec20e --- /dev/null +++ b/samples/layouts/tabs/styling/index.html @@ -0,0 +1,37 @@ + + + + Tabs Styling + + + + + + + + + + +
+
+ + + + + + + + + + + Home tab panel + Search tab panel + Favorite tab panel + +
+
+ + <% if (false) { %><% } %> + + + diff --git a/samples/layouts/tabs/styling/package.json b/samples/layouts/tabs/styling/package.json new file mode 100644 index 0000000000..2f52710195 --- /dev/null +++ b/samples/layouts/tabs/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-tabs-overview", + "version": "1.0.0", + "description": "This project provides example of Tabs overview using IgniteUI for Web Components", + "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" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.2.1", + "lit": "^3.2.0", + "lit-html": "^3.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.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/tabs/styling/sandbox.config.json b/samples/layouts/tabs/styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/layouts/tabs/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/tabs/styling/src/TabsStyle.css b/samples/layouts/tabs/styling/src/TabsStyle.css new file mode 100644 index 0000000000..61eb57cb49 --- /dev/null +++ b/samples/layouts/tabs/styling/src/TabsStyle.css @@ -0,0 +1,7 @@ +igc-tabs::part(headers-content) { + background-color: var(--ig-gray-200); +} + +igc-tab::part(content) { + color: var(--ig-success-500); +} \ No newline at end of file diff --git a/samples/layouts/tabs/styling/src/index.css b/samples/layouts/tabs/styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/layouts/tabs/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/tabs/styling/src/index.ts b/samples/layouts/tabs/styling/src/index.ts new file mode 100644 index 0000000000..5ef064159c --- /dev/null +++ b/samples/layouts/tabs/styling/src/index.ts @@ -0,0 +1,24 @@ +import { defineComponents, IgcTabsComponent, registerIconFromText } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './TabsStyle.css' + +defineComponents(IgcTabsComponent); + +export class TabsStyling { + constructor() { + registerIconFromText( + 'home', + '' + ); + registerIconFromText( + 'search', + '' + ); + registerIconFromText( + 'favorite', + '' + ); + } +} + +new TabsStyling(); diff --git a/samples/layouts/tabs/styling/tsconfig.json b/samples/layouts/tabs/styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/layouts/tabs/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/tabs/styling/webpack.config.js b/samples/layouts/tabs/styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/layouts/tabs/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/menus/nav-bar/styling/src/NavbarStyling.css b/samples/menus/nav-bar/styling/src/NavbarStyling.css index fc6c107c4e..3ca398b142 100644 --- a/samples/menus/nav-bar/styling/src/NavbarStyling.css +++ b/samples/menus/nav-bar/styling/src/NavbarStyling.css @@ -1,20 +1,12 @@ igc-icon { - color: currentColor !important; + color: var(--ig-primary-500); } igc-navbar { - background-color: #232121 -} - -igc-navbar::part(start) { - color: #f23269; + background-color: var(--ig-secondary-200); } igc-navbar::part(middle) { - font-family: Titillium Web,sans-serif; - color: #e9e8ea -} - -igc-navbar::part(end) { - color: #e9e8ea -} + font-family: Titillium Web, sans-serif; + color: var(--ig-primary-500);; +} \ No newline at end of file diff --git a/samples/menus/nav-drawer/styling/src/drawer-styling.css b/samples/menus/nav-drawer/styling/src/drawer-styling.css index bbca4e06eb..1d8486c69c 100644 --- a/samples/menus/nav-drawer/styling/src/drawer-styling.css +++ b/samples/menus/nav-drawer/styling/src/drawer-styling.css @@ -1,37 +1,20 @@ igc-nav-drawer::part(base) { - background: #2d313a; + background: var(--ig-secondary-500); } igc-nav-drawer-item::part(base) { - color: #fff; + color: var(--ig-secondary-500-contrast); } igc-nav-drawer-item::part(base):hover { - background-color: #3D4149; + background-color: var(--ig-gray-800); } igc-nav-drawer-item[active]::part(base) { - background: #f3c03e; - color: #2c2c2c; + background: var(--ig-warn-500); + color: var(--ig-warn-500-contrast); } igc-nav-drawer-header-item { - color: #f3c03e; -} - -#button-wrapper{ - padding: 16px; -} - -igc-icon-button::part(icon) { - --size: 32px; - color: #f3c03e -} - -igc-icon-button::part(base) { - background-color: #2c2c2c; -} - -igc-icon-button::part(base):hover { - background-color: #3D4149; -} + color: var(--ig-warn-500); +} \ No newline at end of file diff --git a/samples/menus/nav-drawer/styling/src/index.ts b/samples/menus/nav-drawer/styling/src/index.ts index 80ccf3ed86..cae310f3be 100644 --- a/samples/menus/nav-drawer/styling/src/index.ts +++ b/samples/menus/nav-drawer/styling/src/index.ts @@ -2,6 +2,7 @@ import { defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent, Igc registerIconFromText, IgcIconButtonComponent } from 'igniteui-webcomponents'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './drawer-styling.css'; +import './layout.css' defineComponents(IgcNavDrawerComponent, IgcIconComponent, IgcIconButtonComponent); diff --git a/samples/menus/nav-drawer/styling/src/layout.css b/samples/menus/nav-drawer/styling/src/layout.css new file mode 100644 index 0000000000..be7261c0fa --- /dev/null +++ b/samples/menus/nav-drawer/styling/src/layout.css @@ -0,0 +1,7 @@ +#button-wrapper { + padding: 16px; +} + +igc-icon-button::part(icon) { + color: var(--ig-secondary-500); +} \ No newline at end of file diff --git a/samples/notifications/banner/banner-styling/src/BannerStyling.css b/samples/notifications/banner/banner-styling/src/BannerStyling.css index a23133ad27..308cdabce9 100644 --- a/samples/notifications/banner/banner-styling/src/BannerStyling.css +++ b/samples/notifications/banner/banner-styling/src/BannerStyling.css @@ -1,44 +1,11 @@ -.offline-banner { - border-bottom: 1px solid rgba(0, 0, 0, .12); -} - -.gallery__wrapper { - max-width: 400px; - padding-top: 24px; - margin: 0 auto; -} - -.gallery__content { - display: flex; - flex-flow: column; - max-height: 430px; - overflow: hidden; - box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12); -} - -.gallery__item { - margin: 8px 16px; - overflow: visible; - border-radius: 0; - - & div { - display: flex; - justify-content: center; - } -} - -img { - max-width: 100%; -} - igc-banner::part(spacer) { - background: #dedede; + background: var(--ig-surface-600); } igc-banner::part(illustration) { - color: #666666; + color: var(--ig-surface-600-contrast);; } igc-banner::part(content) { - color: #151515; + color: var(--ig-gray-900);; } \ No newline at end of file diff --git a/samples/notifications/banner/banner-styling/src/index.ts b/samples/notifications/banner/banner-styling/src/index.ts index ae58c2a471..f1cb3e302d 100644 --- a/samples/notifications/banner/banner-styling/src/index.ts +++ b/samples/notifications/banner/banner-styling/src/index.ts @@ -1,6 +1,7 @@ import { defineComponents, registerIconFromText, IgcBannerComponent, IgcIconComponent, IgcCardComponent, IgcNavbarComponent, IgcButtonComponent, IgcRippleComponent, IgcToastComponent } from "igniteui-webcomponents"; import "igniteui-webcomponents/themes/light/bootstrap.css"; import "./BannerStyling.css"; +import "./layout.css"; defineComponents(IgcBannerComponent, IgcNavbarComponent, IgcIconComponent, IgcCardComponent, IgcButtonComponent, IgcRippleComponent, IgcToastComponent); diff --git a/samples/notifications/banner/banner-styling/src/layout.css b/samples/notifications/banner/banner-styling/src/layout.css new file mode 100644 index 0000000000..81e956d171 --- /dev/null +++ b/samples/notifications/banner/banner-styling/src/layout.css @@ -0,0 +1,32 @@ +.offline-banner { + border-bottom: 1px solid rgba(0, 0, 0, .12); +} + +.gallery__wrapper { + max-width: 400px; + padding-top: 24px; + margin: 0 auto; +} + +.gallery__content { + display: flex; + flex-flow: column; + max-height: 430px; + overflow: hidden; + box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12); +} + +.gallery__item { + margin: 8px 16px; + overflow: visible; + border-radius: 0; + + & div { + display: flex; + justify-content: center; + } +} + +img { + max-width: 100%; +} diff --git a/samples/notifications/dialog/styling/src/DialogStyling.css b/samples/notifications/dialog/styling/src/DialogStyling.css index c45c89d913..e007060e2f 100644 --- a/samples/notifications/dialog/styling/src/DialogStyling.css +++ b/samples/notifications/dialog/styling/src/DialogStyling.css @@ -1,10 +1,10 @@ igc-dialog::part(content) { - background: #011627; - color:white; + background: var(--ig-secondary-800); + color: var(--ig-secondary-800-contrast); } igc-dialog::part(title), igc-dialog::part(footer) { - background: #011627; - color:#ECAA53; -} \ No newline at end of file + background: var(--ig-secondary-800); + color: var(--ig-warn-500); +} diff --git a/samples/notifications/snackbar/styling/src/SnackbarStyling.css b/samples/notifications/snackbar/styling/src/SnackbarStyling.css index b7adf4db67..ff36d5464f 100644 --- a/samples/notifications/snackbar/styling/src/SnackbarStyling.css +++ b/samples/notifications/snackbar/styling/src/SnackbarStyling.css @@ -1,5 +1,5 @@ igc-snackbar::part(base) { - background: #0d6efd; - border-color: #0d6efd; - color: white; + background: var(--ig-primary-500); + border-color: var(--ig-primary-800); + color: white; } \ No newline at end of file diff --git a/samples/notifications/toast/styling/src/ToastStyling.css b/samples/notifications/toast/styling/src/ToastStyling.css index 902e48d705..354bdc55f6 100644 --- a/samples/notifications/toast/styling/src/ToastStyling.css +++ b/samples/notifications/toast/styling/src/ToastStyling.css @@ -1,5 +1,4 @@ igc-toast { - background: #011627; - color: #ECAA53; - outline-color: #ECAA53; + background-color: var(--ig-primary-500); + color: var(--ig-primary-500-contrast); } \ No newline at end of file diff --git a/samples/scheduling/calendar/styling/src/CalendarStyling.css b/samples/scheduling/calendar/styling/src/CalendarStyling.css index 941901d857..048907fb6b 100644 --- a/samples/scheduling/calendar/styling/src/CalendarStyling.css +++ b/samples/scheduling/calendar/styling/src/CalendarStyling.css @@ -3,15 +3,15 @@ igc-calendar::part(month-inner selected), igc-calendar::part(year-inner selected), igc-calendar::part(month-inner selected):focus, igc-calendar::part(year-inner selected):focus { - background: #446418; - border-color: #446418; + background: var(--ig-primary-500); + border-color: var(--ig-primary-800); } igc-calendar::part(date-inner selected):hover, igc-calendar::part(month-inner selected):hover, igc-calendar::part(year-inner selected):hover { - background: #7d9b5d; - border-color: #7d9b5d; + background: var(--ig-primary-500); + border-color: var(--ig-primary-800); } igc-calendar::part(label), @@ -20,10 +20,10 @@ igc-calendar::part(months-navigation):hover, igc-calendar::part(months-navigation):focus, igc-calendar::part(years-navigation):hover, igc-calendar::part(years-navigation):focus { - color: #7d9b5d; + color: var(--ig-primary-300); } igc-calendar::part(navigation-button):hover, igc-calendar::part(navigation-button):focus { - color: #446418; -} + color: var(--ig-primary-800); +} \ No newline at end of file diff --git a/samples/scheduling/date-picker/styling/src/DatePickerStyling.css b/samples/scheduling/date-picker/styling/src/DatePickerStyling.css index 76b3fc5359..05f0d0f2ea 100644 --- a/samples/scheduling/date-picker/styling/src/DatePickerStyling.css +++ b/samples/scheduling/date-picker/styling/src/DatePickerStyling.css @@ -1,29 +1,29 @@ igc-date-picker::part(header) { - background-color: #345779; - color: #ffffff; + background-color: var(--ig-primary-500); + color: var(--ig-primary-500-contrast); } igc-date-picker::part(calendar-content) { - background-color: #fdfdfd; + background-color: var(--ig-surface-300); } igc-date-picker::part(date-inner current) { - color: #2dabe8; - background-color: #fdfdfd; + color: var(--ig-info-300); + background-color: var(--ig-surface-300); } igc-date-picker::part(navigation-button):hover, igc-date-picker::part(months-navigation):hover, igc-date-picker::part(years-navigation):hover { - color: #345779; + color: var(--ig-secondary-500); } igc-date-picker::part(month-inner current), igc-date-picker::part(year-inner current), igc-date-picker::part(navigation-button), igc-date-picker::part(months-navigation), igc-date-picker::part(years-navigation) { - color: #2dabe8; + color: var(--ig-info-300); } igc-date-picker::part(date-inner selected), igc-date-picker::part(month-inner selected), igc-date-picker::part(year-inner selected) { - color: #fdfdfd; - background-color: #345779; -} + color: var(--ig-secondary-500-contrast); + background-color: var(--ig-secondary-500); +} \ No newline at end of file