diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 4beb592aec..35c90a981b 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -17,30 +17,27 @@ # These users own any files in the following directory at the root of # the repository and any of its subdirectories. -* @davidicus @jessieyan @sls-ca @herleraja +* @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 ##### # Core admin team should be notified of changes to build/test/deploy # Core dependencies -/package.json @davidicus @jessieyan @sls-ca @herleraja -/yarn.lock @davidicus @jessieyan @sls-ca @herleraja +/package.json @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 +/yarn.lock @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 # Configuration files -**/*.config.js @davidicus @jessieyan @sls-ca @herleraja -**/config/ @davidicus @jessieyan @sls-ca @herleraja -/.nvmrc @davidicus @jessieyan @sls-ca @herleraja +**/*.config.js @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 +**/config/ @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 +/.nvmrc @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 # Deploy configuration -**/.storybook/ @davidicus @jessieyan @sls-ca @herleraja -/.github/workflows/ @davidicus @jessieyan @sls-ca @herleraja -/netlify.toml @davidicus @jessieyan @sls-ca @herleraja +**/.storybook/ @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 +/.github/workflows/ @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 +/netlify.toml @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 ##### # Release team should be notified of Public API changes in the system -**/publicAPI.test.js @davidicus @jessieyan @sls-ca @herleraja -**/publicAPI.test.js.snap @davidicus @jessieyan @sls-ca @herleraja - -# Angular team should be required for Angular changes -/packages/angular/ @carbon-design-system/angular-maintainers +**/publicAPI.test.js @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 +**/publicAPI.test.js.snap @davidicus @jessieyan @sls-ca @herleraja @abpaul1993 diff --git a/.github/CONTRIBUTING.MD b/.github/CONTRIBUTING.MD index f22b1edbb1..ad8b1f6930 100644 --- a/.github/CONTRIBUTING.MD +++ b/.github/CONTRIBUTING.MD @@ -20,7 +20,7 @@ With that all in place, you're ready to start contributing! ### Working with the monorepo -The PAL is structured as a set of packages versioned and deployed together - `carbon-addons-iot-react`, `@ai-apps/angular`, and `@ai-apps/components`. Each one of these packages live in the `packages` directory, for example, `carbon-addons-iot-react` lives in the `packages/react` directory. +The PAL is structured as a set of packages versioned and deployed together - `carbon-addons-iot-react`, and `@ai-apps/components`. Each one of these packages live in the `packages` directory, for example, `carbon-addons-iot-react` lives in the `packages/react` directory. To work on a package you must make sure to change into the correct directory - `cd packages/react` - otherwise package specific commands, or packages added via `yarn add`, will be run and added to the global scope and may conflict with other packages. diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md index e7bc67e333..963719a90f 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.md +++ b/.github/ISSUE_TEMPLATE/bug-report.md @@ -9,7 +9,6 @@ assignees: '' ### What package is this for? - [ ] React -- [ ] Angular ### Describe the bug diff --git a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.md b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.md index e5586d0cf3..3a9ff93df2 100644 --- a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.md +++ b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.md @@ -21,7 +21,6 @@ If you are reporting a bug or problem, please use the bug template instead. ### What package is this for? - [ ] React -- [ ] Angular ### Summary diff --git a/.github/ISSUE_TEMPLATE/new-component-proposal.md b/.github/ISSUE_TEMPLATE/new-component-proposal.md index 9d0fe7182c..1164bd5158 100644 --- a/.github/ISSUE_TEMPLATE/new-component-proposal.md +++ b/.github/ISSUE_TEMPLATE/new-component-proposal.md @@ -11,7 +11,6 @@ assignees: '' ### What package is this for? - [ ] React -- [ ] Angular ### Summary diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md index f840b70cd2..955c951dec 100644 --- a/.github/ISSUE_TEMPLATE/question.md +++ b/.github/ISSUE_TEMPLATE/question.md @@ -26,8 +26,6 @@ If these resources don't work out, help us out by filling in the details below. ### What package is this for? - [ ] React -- [ ] Angular -- [ ] Both ### Summary diff --git a/.github/README.MD b/.github/README.MD index 9a12eed3a2..5659c272a5 100644 --- a/.github/README.MD +++ b/.github/README.MD @@ -1,6 +1,3 @@ -> [!WARNING] -> This library no longer has a dedicated development resource maintaining it. When you are able to [migrate to Carbon v11](https://carbondesignsystem.com/migrating/guide/overview/) we recommend you reference the [related component guide](migration.md) and use components from [Carbon for IBM Products](https://carbon-for-ibm-products.netlify.app/?path=/story/overview-welcome--overview) and core [Carbon](https://react.carbondesignsystem.com/). -

Carbon add-ons for Watson IoT @@ -47,6 +44,9 @@ **@latest from [`master`](https://github.com/carbon-design-system/carbon-addons-iot-react/tree/master)** +  -   +view @latest storybook + ```bash # with npm diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 2ad0c48980..3240c339df 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -18,7 +18,7 @@ jobs: - name: Use Node.js uses: actions/setup-node@v4 with: - node-version: '16.x' + node-version: '20.x' - name: Cache dependencies uses: actions/cache@v4 diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 83d04284ae..55ff23f7bc 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -18,7 +18,6 @@ jobs: steps: - name: Checkout repository uses: actions/checkout@v4 - # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL uses: github/codeql-action/init@v3 @@ -26,4 +25,4 @@ jobs: languages: javascript - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v3 + uses: github/codeql-action/analyze@v3 \ No newline at end of file diff --git a/.github/workflows/codesandbox.md b/.github/workflows/codesandbox.md index c12eed931a..aae387b69e 100644 --- a/.github/workflows/codesandbox.md +++ b/.github/workflows/codesandbox.md @@ -20,7 +20,7 @@ options: --privileged - name: Checkout code uses: actions/checkout@v4 - - uses: dorny/paths-filter@v3 + - uses: dorny/paths-filter3 id: changes with: filters: | @@ -34,7 +34,7 @@ options: --privileged uses: actions/setup-node@v4 if: steps.changes.outputs.react == 'true' with: - node-version: '16.x' + node-version: '20.x' - name: Cache dependencies uses: actions/cache@v4 diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 3018f496d1..de07f47f4b 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -3,7 +3,7 @@ name: Deploy on: push: branches: - - 'next' + - 'next' permissions: contents: read @@ -20,10 +20,10 @@ jobs: - name: Use Node.js uses: actions/setup-node@v4 with: - node-version: '16.x' + node-version: '20.x' - name: Cache dependencies - uses: actions/cache@v4 + uses: actions/cache@v2 with: path: | node_modules diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index 0e7f62e194..433c08c2d6 100644 --- a/.github/workflows/format.yml +++ b/.github/workflows/format.yml @@ -18,7 +18,7 @@ jobs: - name: Use Node.js uses: actions/setup-node@v4 with: - node-version: '16.x' + node-version: '20.x' - name: Cache dependencies uses: actions/cache@v4 diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index fdf397f901..2d8b9d367c 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -14,11 +14,10 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v4 - - name: Use Node.js uses: actions/setup-node@v4 with: - node-version: '16.x' + node-version: '20.x' - name: Cache dependencies uses: actions/cache@v4 diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 620e7443bc..4b0c61de9c 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -5,6 +5,7 @@ on: branches: - master - next + - v4-Carbon11 jobs: publish: @@ -20,7 +21,7 @@ jobs: - name: Use Node.js uses: actions/setup-node@v4 with: - node-version: '16.x' + node-version: '20.x' - name: Cache dependencies uses: actions/cache@v4 diff --git a/.github/workflows/test-app.yml b/.github/workflows/test-app.yml index e78c4a8d46..a3df8efc09 100644 --- a/.github/workflows/test-app.yml +++ b/.github/workflows/test-app.yml @@ -29,7 +29,7 @@ jobs: uses: actions/setup-node@v4 if: steps.changes.outputs.react == 'true' with: - node-version: '16.x' + node-version: '20.x' - name: Cache dependencies uses: actions/cache@v4 @@ -60,49 +60,4 @@ jobs: uses: actions/upload-artifact@v4 with: name: dist - path: packages/react/dist - - create-test-app: - name: Create test app and build - needs: build-pal - runs-on: ubuntu-latest - - steps: - - name: Checkout code - uses: actions/checkout@v4 - - - uses: dorny/paths-filter@v3 - id: changes - with: - filters: | - react: - - 'packages/react/**' - - - name: Use Node.js - uses: actions/setup-node@v4 - if: steps.changes.outputs.react == 'true' - with: - node-version: '16.x' - - - name: Run cli command to create test app - if: steps.changes.outputs.react == 'true' - run: | - npx create-iot-react-app test-app - - - name: Download all build artifacts - if: steps.changes.outputs.react == 'true' - uses: actions/download-artifact@v4 - - - name: Link dependencies and build test app - if: steps.changes.outputs.react == 'true' - run: | - cd dist - yarn install --frozen-lockfile --production - yarn link - cd ../test-app - yarn link carbon-addons-iot-react - yarn build - - - name: Serve app - if: ${{ success() }} - run: timeout 40s npx serve -s ../../../test-app/build || CODE="$?"; if [[ "$CODE" -ne 124 ]]; then exit $CODE; else exit 0; fi + path: packages/react/dist \ No newline at end of file diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 2faa7ec274..e69de29bb2 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,240 +0,0 @@ -name: Test - -on: [push, pull_request] - -concurrency: - group: ${{ github.workflow }}-${{ github.ref }} - cancel-in-progress: true - -jobs: - react-jest-test: - name: React Jest test - runs-on: ubuntu-latest - - steps: - - name: Checkout code - uses: actions/checkout@v4 - - - uses: dorny/paths-filter@v3 - id: changes - with: - filters: | - react: - - 'packages/react/**' - - - name: Increase watchers - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p - - - name: Use Node.js - uses: actions/setup-node@v4 - if: steps.changes.outputs.react == 'true' - with: - node-version: '16.x' - - - name: Cache dependencies - uses: actions/cache@v4 - if: steps.changes.outputs.react == 'true' - with: - path: | - node_modules - */*/node_modules - key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} - - - name: Install dependencies - if: steps.changes.outputs.react == 'true' - run: | - yarn --frozen-lockfile - yarn lerna run --stream postinstall - yarn lerna link - - - name: Run Jest tests, collect coverage - if: steps.changes.outputs.react == 'true' - run: | - cd packages/react - yarn test:ci --silent - - - name: Archive coverage artifacts - if: ${{ success() }} && steps.changes.outputs.react == 'true' - uses: actions/upload-artifact@v4 - with: - name: jest-coverage - path: packages/react/jest/coverage/coverage-final.json - - react-cypress-test: - name: React Cypress test - runs-on: ubuntu-latest - container: - image: cypress/browsers:node16.14.0-slim-chrome99-ff97 - options: --privileged - - steps: - - name: Upgrade git - run: | - echo deb "http://archive.debian.org/debian buster-backports main" >> /etc/apt/sources.list - apt-get update - apt-get install -y git/buster-backports - - - name: Checkout code - uses: actions/checkout@v4 - - - uses: dorny/paths-filter@v3 - id: changes - with: - filters: | - react: - - 'packages/react/**' - - - name: Use Node.js - uses: actions/setup-node@v4 - if: steps.changes.outputs.react == 'true' - with: - node-version: '16.x' - - - name: Install dependencies - if: steps.changes.outputs.react == 'true' - run: | - yarn --frozen-lockfile - yarn lerna run --stream postinstall - yarn lerna link - - - name: Cache dependencies - uses: actions/cache@v4 - if: steps.changes.outputs.react == 'true' - with: - path: | - node_modules - */*/node_modules - key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} - - - name: Cache Cypress binary - uses: actions/cache@v4 - if: steps.changes.outputs.react == 'true' - with: - path: ~/.cache/Cypress - key: cypress-${{ runner.os }}-cypress-${{ hashFiles('**/yarn.lock') }} - - - name: Run Cypress tests, collect coverage - if: steps.changes.outputs.react == 'true' - run: | - cd packages/react - yarn test:e2e:ci - env: - CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} - HEIGHT: 900 - WIDTH: 1680 - - - name: Archive visual diff report - if: ${{ failure() }} && steps.changes.outputs.react == 'true' - uses: actions/upload-artifact@v4 - with: - name: visual-diff-report - path: | - packages/react/cypress-visual-report - packages/react/cypress-visual-screenshots - - - name: Archive coverage artifacts - if: ${{ success() }} && steps.changes.outputs.react == 'true' - uses: actions/upload-artifact@v4 - with: - name: cypress-coverage - path: packages/react/cypress/coverage/coverage-final.json - - combine-reports: - name: Combine Coverage Reports - runs-on: ubuntu-latest - needs: [react-cypress-test, react-jest-test] - - steps: - - name: Checkout code - uses: actions/checkout@v4 - - - uses: dorny/paths-filter@v3 - id: changes - with: - filters: | - react: - - 'packages/react/**' - - - name: Use Node.js - uses: actions/setup-node@v4 - if: steps.changes.outputs.react == 'true' - with: - node-version: '16.x' - - - name: Download all workflow run artifacts - uses: actions/download-artifact@v4 - if: steps.changes.outputs.react == 'true' - with: - name: cypress-coverage - path: ~/work/carbon-addons-iot-react/carbon-addons-iot-react/packages/react/cypress/coverage/ - - - name: Download all workflow run artifacts - uses: actions/download-artifact@v4 - if: steps.changes.outputs.react == 'true' - with: - name: jest-coverage - path: ~/work/carbon-addons-iot-react/carbon-addons-iot-react/packages/react/jest/coverage/ - - - name: Change file paths for cypress coverage report - if: steps.changes.outputs.react == 'true' - run: | - cd packages/react/cypress/coverage - pwd - node ../../../../scripts/change-paths.js - - - name: Copy, combine, and report coverage - if: steps.changes.outputs.react == 'true' - run: | - cd packages/react - yarn reports - - - name: Coveralls - uses: coverallsapp/github-action@master - if: steps.changes.outputs.react == 'true' - with: - github-token: ${{ secrets.GITHUB_TOKEN }} - path-to-lcov: './packages/react/coverage/lcov.info' - base-path: 'packages/react' - - test-angular: - name: Test Angular - runs-on: ubuntu-latest - - steps: - - name: Checkout code - uses: actions/checkout@v4 - - - uses: dorny/paths-filter@v3 - id: changes - with: - filters: | - angular: - - 'packages/angular/**' - - - name: Use Node.js - uses: actions/setup-node@v4 - if: steps.changes.outputs.angular == 'true' - with: - node-version: '16.x' - - - name: Cache dependencies - uses: actions/cache@v4 - if: steps.changes.outputs.angular == 'true' - with: - path: | - node_modules - */*/node_modules - key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} - - - name: Install dependencies - if: steps.changes.outputs.angular == 'true' - run: | - yarn --frozen-lockfile - yarn lerna run --stream postinstall - yarn lerna link - - - name: Run tests, collect coverage - if: steps.changes.outputs.angular == 'true' - run: | - cd packages/angular - yarn test:ci diff --git a/.nvmrc b/.nvmrc index b6a7d89c68..209e3ef4b6 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16 +20 diff --git a/.vscode/settings.json b/.vscode/settings.json index 8e434b4a72..b7882583ce 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,5 +5,6 @@ "prettier.singleQuote": true, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" - } + }, + "wcaForGP.enable": false } diff --git a/CHANGELOG.md b/CHANGELOG.md index 01ca30bd42..488f837ec0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,29 +3,501 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -# [2.154.0-next.41](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.40...v2.154.0-next.41) (2024-12-04) +## [4.0.1-v4-Carbon11.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.75...v4.0.1-v4-Carbon11.0) (2024-12-06) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.75](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.74...v4.0.0-v4-Carbon11.75) (2024-12-06) + + + +# [2.154.0-next.41](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.73...v2.154.0-next.41) (2024-12-04) + + +### Bug Fixes + +* table card ([#3899](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3899)) ([fe741bd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fe741bdc9d0f6d4780a1e6af6e023356d3648829)) + + + + + +# [4.0.0-v4-Carbon11.74](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.73...v4.0.0-v4-Carbon11.74) (2024-12-06) + + +### Reverts + +* hide the overflow in value card ([3b5692f](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/3b5692f9494e42f060ddc4ffb30b81c31d099be2)) + + + + + +# [4.0.0-v4-Carbon11.73](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.72...v4.0.0-v4-Carbon11.73) (2024-12-02) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.72](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.71...v4.0.0-v4-Carbon11.72) (2024-12-01) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.71](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.70...v4.0.0-v4-Carbon11.71) (2024-12-01) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.70](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.69...v4.0.0-v4-Carbon11.70) (2024-12-01) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.69](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.68...v4.0.0-v4-Carbon11.69) (2024-12-01) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.68](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.67...v4.0.0-v4-Carbon11.68) (2024-12-01) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.67](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.66...v4.0.0-v4-Carbon11.67) (2024-12-01) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.66](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.65...v4.0.0-v4-Carbon11.66) (2024-12-01) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.65](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.64...v4.0.0-v4-Carbon11.65) (2024-12-01) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.64](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.63...v4.0.0-v4-Carbon11.64) (2024-12-01) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.63](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.62...v4.0.0-v4-Carbon11.63) (2024-11-28) + + +### Bug Fixes + +* table card ([#3899](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3899)) ([fe741bd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fe741bdc9d0f6d4780a1e6af6e023356d3648829)) + + + + + +# [4.0.0-v4-Carbon11.62](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.61...v4.0.0-v4-Carbon11.62) (2024-11-28) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.61](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.60...v4.0.0-v4-Carbon11.61) (2024-11-28) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.60](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.59...v4.0.0-v4-Carbon11.60) (2024-11-26) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.59](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.58...v4.0.0-v4-Carbon11.59) (2024-11-21) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.58](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.57...v4.0.0-v4-Carbon11.58) (2024-11-21) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.57](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.56...v4.0.0-v4-Carbon11.57) (2024-11-20) + + + +# [2.154.0-next.40](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.39...v2.154.0-next.40) (2024-11-10) + + +### Bug Fixes + +* add maximum data point to data table card ([23b4b2e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/23b4b2ee04e525bce42f14aedeeaf7706aeae8b2)) + + + +# [2.154.0-next.39](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.41...v2.154.0-next.39) (2024-11-10) + + + +# [2.154.0-next.38](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.37...v2.154.0-next.38) (2024-11-06) + + +### Bug Fixes + +* out of focus issue when typing ([#3895](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3895)) ([b898247](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b898247b7b1b8f933b07ea4079c0e7f9a52a5873)) + + + +# [2.154.0-next.37](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.35...v2.154.0-next.37) (2024-10-10) + + +### Bug Fixes + +* adding back style fix that was deleted during merge ([#3889](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3889)) ([9b2bffd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/9b2bffdb2d50143d7b6a83a30b25952247302c41)) + + + +# [2.154.0-next.36](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.35...v2.154.0-next.36) (2024-10-02) + + +### Bug Fixes + +* date time picker ([#3884](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3884)) ([d16461c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d16461c15af40112865c02d96dd458c65ba8329d)) + + + +# [2.154.0-next.35](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.33...v2.154.0-next.35) (2024-10-01) + + +### Features + +* Support to CodeEditor new lib ([#3887](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3887)) ([4aee867](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/4aee867aba203cde305bb99ab1959541fa08be8d)) + + + +# [2.154.0-next.34](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.26...v2.154.0-next.34) (2024-08-16) + + +### Bug Fixes + +* select the inner modal body css ([#3878](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3878)) ([fe6103e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fe6103e998b51327ad989e00831834f0996620f3)) + + + +# [2.154.0-next.33](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.19...v2.154.0-next.33) (2024-08-09) + + +### Bug Fixes + +* moving flyout menu var to be scoped to flyout-menu ([#3877](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3877)) ([2e54d53](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/2e54d538920442943e458d49eed93f0a369b7d1c)) + + + +# [2.154.0-next.32](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.10...v2.154.0-next.32) (2024-08-01) + + +### Bug Fixes + +* remove last threshold ([#3876](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3876)) ([35eef3c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/35eef3c88fa1dedd6c25e0d8eb0d7c532b493d58)) + + + + + +# [4.0.0-v4-Carbon11.56](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.55...v4.0.0-v4-Carbon11.56) (2024-11-20) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.55](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.54...v4.0.0-v4-Carbon11.55) (2024-11-20) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.54](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.53...v4.0.0-v4-Carbon11.54) (2024-11-20) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.53](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.52...v4.0.0-v4-Carbon11.53) (2024-11-18) + + +### Reverts + +* d5369fa1b08956eb525ca3fe4c05a687070f48a3 ([1aae97f](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1aae97f41f4de301962532e803cc994e137c637e)) + + + + + +# [4.0.0-v4-Carbon11.52](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.51...v4.0.0-v4-Carbon11.52) (2024-11-18) + + +### Reverts + +* partial revert of 6b29aedb7ed5e317a35d9c6b36680504df5fd7df ([d5369fa](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d5369fa1b08956eb525ca3fe4c05a687070f48a3)) + + + + + +# [4.0.0-v4-Carbon11.51](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.50...v4.0.0-v4-Carbon11.51) (2024-11-18) + + +### Bug Fixes + +* adding back side-nav style fix ([d21fc82](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d21fc82b6e2d1e85eca1c95c87ffb909814f45da)) +* color token usage ([0952809](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/09528091d34aa604cc0f6125f15b2a71c9501f17)) + + +# [4.0.0-v4-Carbon11.50](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.49...v4.0.0-v4-Carbon11.50) (2024-11-15) + + + +# [4.0.0-v4-Carbon11.49](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.48...v4.0.0-v4-Carbon11.49) (2024-11-14) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.48](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.47...v4.0.0-v4-Carbon11.48) (2024-11-13) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.47](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.46...v4.0.0-v4-Carbon11.47) (2024-11-12) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.46](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.45...v4.0.0-v4-Carbon11.46) (2024-11-12) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.45](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.44...v4.0.0-v4-Carbon11.45) (2024-11-11) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.44](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.43...v4.0.0-v4-Carbon11.44) (2024-11-11) + + +### Bug Fixes + +* enable floating styles ([b28502a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b28502a0be43c40c8af728339b8c8b9f199a6d5b)) + + + + + +# [4.0.0-v4-Carbon11.43](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.42...v4.0.0-v4-Carbon11.43) (2024-11-11) + + +### Bug Fixes + +* update tab components in card editor ([7d831fc](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/7d831fcefde9aacca4ac9731b4e4733996c3096a)) + + + + + +# [4.0.0-v4-Carbon11.42](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.41...v4.0.0-v4-Carbon11.42) (2024-11-10) + + +### Bug Fixes + +* add maximum data point to data table card ([26d7829](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/26d782926e1bd30cfa5f2d653d029ef28470c2fd)) + + +### Features + +* Monaco editor load resources from npm ([#3886](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3886)) ([6299902](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6299902869febbecd7b535d2434679e30240258e)) + + + + + +# [4.0.0-v4-Carbon11.33](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.32...v4.0.0-v4-Carbon11.33) (2024-09-25) + + +### Bug Fixes + +* date time picker v2 style ([6edf30b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6edf30bf33853eb551073bf48b57073f5dd0d3ca)) + + + + + +# [4.0.0-v4-Carbon11.32](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.31...v4.0.0-v4-Carbon11.32) (2024-09-06) ### Bug Fixes -* table card ([#3899](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3899)) ([fe741bd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fe741bdc9d0f6d4780a1e6af6e023356d3648829)) +* side nav colors added back ([932dc57](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/932dc57d93ab81513e023f6b62a7da3ed8f4814f)) -# [2.154.0-next.40](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.39...v2.154.0-next.40) (2024-11-10) +# [4.0.0-v4-Carbon11.31](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.30...v4.0.0-v4-Carbon11.31) (2024-08-30) ### Bug Fixes -* add maximum data point to data table card ([23b4b2e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/23b4b2ee04e525bce42f14aedeeaf7706aeae8b2)) +* adding missing optional chaining ([d7bd829](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d7bd8298863e09952b52a2deda6fa5dc293da1e7)) + + + + + +# [4.0.0-v4-Carbon11.30](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.29...v4.0.0-v4-Carbon11.30) (2024-08-30) + + +### Bug Fixes + +* date time picker util function ([8d0aeba](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8d0aeba47544cf7ef4ae3423bd3b2e40e5862785)) + + + + + +# [4.0.0-v4-Carbon11.29](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.28...v4.0.0-v4-Carbon11.29) (2024-08-30) + + +### Bug Fixes + +* date time picker tooltip and error on close ([2c5976c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/2c5976c3a023576fa7d818111c6c367a4d259c3b)) + + + + + +# [4.0.0-v4-Carbon11.28](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.27...v4.0.0-v4-Carbon11.28) (2024-08-29) + + +### Bug Fixes + +* table head definition tooltip alignment ([94a0ec3](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/94a0ec34bac8a68e5aca75d4ee87188d723608a2)) + + + + + +# [4.0.0-v4-Carbon11.27](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.26...v4.0.0-v4-Carbon11.27) (2024-08-21) + + +### Bug Fixes + +* header style fixes ([58e926a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/58e926ac797f9f612305ed647bdf7dbbf76967fc)) + + + + + +# [4.0.0-v4-Carbon11.26](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.25...v4.0.0-v4-Carbon11.26) (2024-08-14) + + +### Bug Fixes + +* table toolbar search fix ([ae9cc8c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/ae9cc8c278f6db0cb5d1a26e133bfb81a4916317)) + + + + + +# [4.0.0-v4-Carbon11.25](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.24...v4.0.0-v4-Carbon11.25) (2024-08-14) + + +### Bug Fixes + +* card title overflow fix ([69072e6](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/69072e69c0a8a5fde151a48866dc1ee4f18a5ab8)) + +# [4.0.0-v4-Carbon11.24](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.23...v4.0.0-v4-Carbon11.24) (2024-08-13) -# [2.154.0-next.39](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.38...v2.154.0-next.39) (2024-11-10) + +### Bug Fixes + +* text overflow hook ([4cd289d](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/4cd289d4a659d57f06ac641edc78bbff80015c93)) + + + + + +# [4.0.0-v4-Carbon11.23](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.22...v4.0.0-v4-Carbon11.23) (2024-08-12) **Note:** Version bump only for package ibm-ai-applications @@ -33,78 +505,270 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline -# [2.154.0-next.38](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.37...v2.154.0-next.38) (2024-11-06) +# [4.0.0-v4-Carbon11.22](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.21...v4.0.0-v4-Carbon11.22) (2024-08-12) ### Bug Fixes -* out of focus issue when typing ([#3895](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3895)) ([b898247](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b898247b7b1b8f933b07ea4079c0e7f9a52a5873)) +* tooltip display style change ([43bba22](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/43bba2238e5869cf3c87dfc514b5656280634bed)) -# [2.154.0-next.37](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.36...v2.154.0-next.37) (2024-10-10) +# [4.0.0-v4-Carbon11.21](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.20...v4.0.0-v4-Carbon11.21) (2024-08-12) ### Bug Fixes -* adding back style fix that was deleted during merge ([#3889](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3889)) ([9b2bffd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/9b2bffdb2d50143d7b6a83a30b25952247302c41)) +* tooltip definition open on hover default value change ([5588ab3](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/5588ab3422a14de4e13c09213a2cb9475e33b9df)) -# [2.154.0-next.36](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.35...v2.154.0-next.36) (2024-10-02) +# [4.0.0-v4-Carbon11.20](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.19...v4.0.0-v4-Carbon11.20) (2024-08-09) ### Bug Fixes -* date time picker ([#3884](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3884)) ([d16461c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d16461c15af40112865c02d96dd458c65ba8329d)) +* removing tooltip svg fill ([efffc46](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/efffc46cd4da412a16d1d85b72f1309eb9a0c688)) -# [2.154.0-next.35](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.34...v2.154.0-next.35) (2024-10-01) +# [4.0.0-v4-Carbon11.19](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.18...v4.0.0-v4-Carbon11.19) (2024-08-08) -### Features +### Bug Fixes -* Support to CodeEditor new lib ([#3887](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3887)) ([4aee867](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/4aee867aba203cde305bb99ab1959541fa08be8d)) +* tear sheet style fix ([e5e2d1e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/e5e2d1eef685c2b80efdca199ac4c3c003ac0ff0)) -# [2.154.0-next.34](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.33...v2.154.0-next.34) (2024-08-16) +# [4.0.0-v4-Carbon11.18](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.17...v4.0.0-v4-Carbon11.18) (2024-08-08) ### Bug Fixes -* select the inner modal body css ([#3878](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3878)) ([fe6103e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fe6103e998b51327ad989e00831834f0996620f3)) +* tooltip style ([898f889](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/898f889dea2965954930c155a7f9f85ee567caf9)) -# [2.154.0-next.33](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.32...v2.154.0-next.33) (2024-08-09) +# [4.0.0-v4-Carbon11.17](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.16...v4.0.0-v4-Carbon11.17) (2024-08-08) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.16](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.15...v4.0.0-v4-Carbon11.16) (2024-08-08) ### Bug Fixes -* moving flyout menu var to be scoped to flyout-menu ([#3877](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3877)) ([2e54d53](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/2e54d538920442943e458d49eed93f0a369b7d1c)) +* tear sheet style fix ([b160875](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b160875b42ef3dd6e13f38f8da63c6ee7adee068)) -# [2.154.0-next.32](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.31...v2.154.0-next.32) (2024-08-01) +# [4.0.0-v4-Carbon11.15](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.14...v4.0.0-v4-Carbon11.15) (2024-08-07) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.14](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.13...v4.0.0-v4-Carbon11.14) (2024-08-07) ### Bug Fixes -* remove last threshold ([#3876](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3876)) ([35eef3c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/35eef3c88fa1dedd6c25e0d8eb0d7c532b493d58)) +* table styles ([83e5b73](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/83e5b73bd8d9a0650ed3a44f952136139566e4e2)) + + + + + +# [4.0.0-v4-Carbon11.13](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.12...v4.0.0-v4-Carbon11.13) (2024-08-06) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.12](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.11...v4.0.0-v4-Carbon11.12) (2024-08-06) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.11](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.10...v4.0.0-v4-Carbon11.11) (2024-08-05) + + +### Bug Fixes + +* header menu button style ([aee3b6e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/aee3b6e1ce522677d165b4c7a6e9f38515400eaf)) + + + + + +# [4.0.0-v4-Carbon11.10](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.9...v4.0.0-v4-Carbon11.10) (2024-07-31) + + +### Bug Fixes + +* header and suite header fixes ([398a423](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/398a42358c606a8fc1a5760e9230ffebd47aef5e)) + + + + + +# [4.0.0-v4-Carbon11.9](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.8...v4.0.0-v4-Carbon11.9) (2024-07-31) + + +### Bug Fixes + +* table crash issue due to infinite reload ([50d8e10](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/50d8e10942dd9e4128a3fefba8632be00b686876)) + + + + + +# [4.0.0-v4-Carbon11.8](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.7...v4.0.0-v4-Carbon11.8) (2024-07-31) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.7](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.6...v4.0.0-v4-Carbon11.7) (2024-07-30) + + +### Bug Fixes + +* header style ([1e9e9e6](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1e9e9e681f113fb9f36f49e3a9f4d09e3954564f)) + + + + + +# [4.0.0-v4-Carbon11.6](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.5...v4.0.0-v4-Carbon11.6) (2024-07-30) + + +### Bug Fixes + +* removing missing carbon exports ([b9d6c70](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b9d6c70f8617b90da6d216033201ae01ffb3a3d0)) + + + + + +# [4.0.0-v4-Carbon11.5](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.4...v4.0.0-v4-Carbon11.5) (2024-07-30) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.4](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.3...v4.0.0-v4-Carbon11.4) (2024-07-30) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.3](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.2...v4.0.0-v4-Carbon11.3) (2024-07-29) + + +### Bug Fixes + +* date time picker auto positioning ([f2a4287](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f2a428789eeb131da6105202515976f75e33de57)) +* flyout menu css fix ([198717b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/198717bc43a99544ed74cb04cd4d5da12827b09a)) + + + + + +# [4.0.0-v4-Carbon11.2](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.1...v4.0.0-v4-Carbon11.2) (2024-07-28) + +**Note:** Version bump only for package ibm-ai-applications + + + + + +# [4.0.0-v4-Carbon11.1](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.0...v4.0.0-v4-Carbon11.1) (2024-07-26) + + +### Bug Fixes + +* header btn menu item padding fix ([6c5bde3](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6c5bde357fb52547c19f5a8432a00a9172ecad77)) +* suite header styles ([c4d7b52](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c4d7b525b3bd397e6bc27f4c1d0016f6b1d1be12)) + + + + + +# [4.0.0-v4-Carbon11.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.31...v4.0.0-v4-Carbon11.0) (2024-07-25) + + +### Bug Fixes + +* (table) inline action storybook example fixed ([77961dc](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/77961dcb749210a2737f0abfd3ce8aab20ce6730)) +* complete for Icon Dropdown ([1781f66](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1781f66393df5d14d28eb548f12c5e9e0f1e8721)) +* datepicker exparimental carbon 11 fix ([f8cb2a1](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f8cb2a11f20729d291e25abb47dbbb05e33f7344)) +* fix tooltip issue on FlyoutMenu ([b9b2a82](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b9b2a824563fc432c35c81cde13d4e7eeee83cd5)) +* fix tooltip issue on table card ([20e6d2e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/20e6d2e54ff842587f79ee7575d8031588aa55c9)) +* fix tooltip style issue on date time picker ([6836655](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/683665509126fb3815e5e2f07e0046c1814db788)) +* flyout menu fixes ([c164c65](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c164c653671d8f5f8842c03452a2ab90ea2c7bc4)) +* flyout menu in rtl ([21fbc1c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/21fbc1ce6c162960fb8d1ef1f5d214b967e3d2fd)) +* fonts and overflow-menu imports added to styles.scss ([ecbd9b9](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/ecbd9b9e2e65f6ffd0258995bb6c0a0b73104472)) +* header and overflow-menu styles ([1cc94cc](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1cc94ccb68724b70b3c9fc06f6f882b1724327b3)) +* header items and submenu style ([4300924](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/43009248a13177333c4c2714c591274d718de605)) +* header styles ([0406b69](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/0406b6909cd1f81ffdb18fb3a411b28f29f0cc3a)) +* hotspot content style ([530c7a0](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/530c7a0a1b722fdafb17205f54588175d9522642)) +* hotspot text input style fix ([52bf382](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/52bf382925d89f00dfae7aa95f82ead124d07ff8)) +* icon switch rtl style fix ([ed2334a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/ed2334a9131d323cc839db67384ae1eab4b064e1)) +* icon switch style ([a0c518c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a0c518c868d78b9d15ea93b725544e280404d0b9)) +* image hotspots styles ([dc73f20](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/dc73f20cdfb652144d4ac98d217b5c85193a398c)) +* mini-units usage removed ([482b8e9](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/482b8e9691012fa49e4513e1ea6b2dda0580194c)) +* modal carbon 11 upgrade issue fixing ([836c52b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/836c52b00fc918ec5545af83a76348e7561a6fef)) +* modal image gallery delete button issue fixed ([518036e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/518036ee60c3cb47a1c655a27d927f52c1122c3b)) +* moving flyout menu var to be scoped to flyout-menu ([6b9b4c9](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6b9b4c9f4ae073ba6717ac3f917a06d5c4f2d9ff)) +* multiselect carbon 11 fix ([7699aec](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/7699aecfbca3886236cee8e5162c5a8f8fb7572c)) +* navigation bar component ([1499162](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1499162f19fad19e985c5e545ea3815c0c8e2116)) +* page-title-bar ([c0f468c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c0f468c3d89b179cf88f822c82ed6dff6b668499)) +* page-title-bar knobs ([2a82d2e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/2a82d2e4125ad470a689eb850908abf2c3e22a00)) +* show tooltip on datetimepicker ([c99b51a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c99b51a5a3848b3842ccfdcae0f9baca00d888f4)) +* side-panel ([a3ca6fe](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a3ca6fe366e1c5b719bcad95e1f35f3c92bd113b)) +* table carbon 11 css fixing ([b992d8b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b992d8b8320eb3440ce0ba678c25b61063c7d079)) +* table header title spacing issue ([eb58e9b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/eb58e9bc0064acd4ab72a46babfd92dfe411bf09)) +* table row action issue ([75d5022](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/75d5022f8d708e259e68b3846e03ff22d44a4a8b)) +* table sorting carbon 11 fix ([7aba7a6](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/7aba7a6f6519f50659a71b3fd35542c9572dc37a)) +* thresold item ([d24aea9](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d24aea90cd8bbd6dc22c044f76ebd257c8871ba5)) + + +### Features + +* add tooltip to the tablecard column ([a7d8d7c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a7d8d7cecb8eaa5e199d56c88b73b13238d560b6)) +* deploy storybook to github page ([df3f40e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/df3f40e34b91dbeafe8ca3e8ba154fc22a7332f1)) +* override the default behaviour of handledataitemedit ([85ba9e7](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/85ba9e79d2ea6e3b6c3827e4c67e1026e2df4cb2)) @@ -2562,16 +3226,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline # [2.151.0-next.9](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.151.0-next.8...v2.151.0-next.9) (2022-08-31) - -### Bug Fixes - -* adding angular 12 and 13 to peer dependencies ([76ff324](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/76ff324412f035f5741e2e755d043331dce7412d)) -* **angular:** disable ivy compilation ([1d9969d](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1d9969d2d59e3c6ac87ee3e769709a4d1073cab9)) - - - - - # [2.151.0-next.8](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.151.0-next.7...v2.151.0-next.8) (2022-08-23) @@ -3829,7 +4483,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline * **empty state:** add directives for empty state sections ([a0ad14d](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a0ad14d640accd63dd8db190ecc15f7598ad7652)) * **empty state:** convert action directives to components ([63aa0a3](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/63aa0a31b433ee064904b63b2a3343c9e3eef6b2)) -* **empty-state:** add angular empty state ([ed1ed82](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/ed1ed8296f1016e789caee38a356af03142fc66d)) * **table:** add empty state ([9e06356](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/9e06356f01e3bcae9f16bcd4edd7682850000dfe)) * **table:** add helpers for column alignment ([1780147](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1780147a05ee83903e3d0ebec41a4541423df666)) @@ -4287,7 +4940,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ### Features -* **rule-builder:** add basic rule builder angular ([feab7fd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/feab7fd5ef9e97b7c3df476f7d440241ecfc28fa)) * **rule-builder:** add more translations ([cf0c639](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/cf0c63999574c5343ce9f7972d6caf9aff49536a)) * **rule-builder:** add per-column operands and value templates ([d32553f](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d32553f954e5b988662745d40d7b4b8daa493ada)) * **rule-builder:** add translations ([7e79321](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/7e7932164d4210e4912658def9430a0cd6c289ba)) @@ -4334,14 +4986,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline # [2.147.0-next.74](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.0-next.73...v2.147.0-next.74) (2021-12-02) -### Bug Fixes - -* **table:** segregate angular styles from react table ([eac4cf5](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/eac4cf5f179c6c46a3c8ed99580452c1be9ae43a)) - - - - - # [2.147.0-next.73](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.0-next.72...v2.147.0-next.73) (2021-12-02) @@ -7019,7 +7663,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline * **list:** add support for row actions ([57ad775](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/57ad7753145739b8cd716bd35565bc9ea2c31128)) * **list:** add template context for rowActions ([aec82a2](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/aec82a2aa412acfea49724ebb59dffdbc20fbe9e)) * **list:** change selectedIds expandedIds and indeterminateIds to sets ([4d71656](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/4d7165630a8cc632c4f1674b5d329b419a93f44e)) -* **list:** start working on angular list component ([923143c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/923143c9e9c615737b17f05045bcfa031a1fa8eb)) * **list:** update to latest specs ([fc82b50](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fc82b50a2af4e452a2cb23d2bc629da4a0f960ec)) * **list:** update to latest specs ([d791682](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d791682bcc160469d100d09721d2f211d4010f51)) @@ -7378,15 +8021,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline * **datetimepicker:** add hover style and fix bottom border ([773b2a0](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/773b2a0f915349ff94f8e1b7f1e7a3f53a52f5b0)) * **datetimepicker:** adjust react styles to better match the design ([eada8c3](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/eada8c3077b9bd57699366c7584de5532454f2dd)) - -### Features - -* **datetimepicker:** add angular datetime picker ([6b2b7b0](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6b2b7b00073a7ee7cfb73747ac36965fc25cc49e)) - - - - - # [2.146.0-next.57](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.146.0-next.56...v2.146.0-next.57) (2021-07-14) @@ -7871,15 +8505,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline # [2.146.0-next.23](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.146.0-next.22...v2.146.0-next.23) (2021-06-04) - -### Features - -* **tabs:** add initial implementation of Angular tabs components ([bf1c632](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/bf1c632c93e7ac6ab8870143df7e5069d7108710)) - - - - - # [2.146.0-next.22](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.146.0-next.21...v2.146.0-next.22) (2021-06-04) @@ -8749,22 +9374,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline # [2.145.0-next.43](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.145.0-next.42...v2.145.0-next.43) (2021-04-15) -### Features - -* **card:** add card implementation for Angular ([cd4667c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/cd4667c844c07dd1e6e4102181df5dd9c4684be3)) - - - - - # [2.145.0-next.42](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.145.0-next.41...v2.145.0-next.42) (2021-04-15) **Note:** Version bump only for package ibm-ai-applications - - - - # [2.145.0-next.41](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.145.0-next.40...v2.145.0-next.41) (2021-04-15) diff --git a/lerna.json b/lerna.json index b1b0667d3b..1a195ce625 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "packages": ["packages/*"], "useWorkspaces": true, - "version": "2.154.0-next.41", + "version": "4.0.1-v4-Carbon11.0", "npmClient": "yarn" } diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000000..b13d1920a3 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,23 @@ +[build] + # Directory (relative to root of your repo) that contains the deploy-ready + # HTML files and assets generated by the build. If a base directory has + # been specified, include it in the publish directory path. + publish = "packages/react/storybook-static" + + # Default build command. + command = "yarn build:storybook" + +[build.processing] + skip_processing = true + +[context.production.processing] + skip = [ + "header rules", + "pages changed", + "redirect rules" + ] +[context.deploy-preview.processing] + skip_processing = true + +[context.branch-deploy.processing] + skip_processing = true \ No newline at end of file diff --git a/package.json b/package.json index a489b3296c..67b5e290c1 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "test": "lerna run --stream test", "test:ci": "lerna run --stream test:ci", "start": "lerna run --stream start", - "clean": "lerna run --stream clean", + "clean": "lerna run --stream clean && lerna clean && rm -rf node_modules", "format": "prettier --write \"**/*.{scss,css,js,jsx,md,ts}\"", "format:check": "prettier --check \"**/*.{scss,css,js,jsx,md,ts}\" --loglevel warn", "publish-npm": "bash ./scripts/release.sh", @@ -69,13 +69,5 @@ "prettier-config-carbon": "^0.11.0" }, "sideEffects": false, - "version": "0.0.0-development", - "resolutions": { - "carbon-addons-iot-react/chokidar": "3.3.1", - "carbon-addons-iot-react/react-grid-layout": "1.2.2", - "react-test-renderer": "16.14.0", - "react-dom": "16.14.0", - "react": "16.14.0", - "webpack": "4" - } + "version": "0.0.0-development" } diff --git a/packages/angular/.browserslistrc b/packages/angular/.browserslistrc deleted file mode 100644 index a01918aeec..0000000000 --- a/packages/angular/.browserslistrc +++ /dev/null @@ -1,16 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/packages/angular/.gitignore b/packages/angular/.gitignore deleted file mode 100644 index 29bbf61707..0000000000 --- a/packages/angular/.gitignore +++ /dev/null @@ -1,17 +0,0 @@ -.DS_Store -*.log* -*.swp -bower_components -node_modules -dist -dist-pkg -demo/bundle -.idea -.vscode -.cache -.cache/ -doc/ -documentation/ -dist/ -a11y/results* -src/vendor diff --git a/packages/angular/.storybook/addons.js b/packages/angular/.storybook/addons.js deleted file mode 100644 index c9df5772e9..0000000000 --- a/packages/angular/.storybook/addons.js +++ /dev/null @@ -1,31 +0,0 @@ -import './polyfills.js'; - -import '@storybook/addon-storysource/register'; -import '@storybook/addon-actions/register'; -import '@storybook/addon-links/register'; - -import { addons } from '@storybook/addons'; -import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from '@storybook/core-events'; - -// custom addon for google analytics v4 -addons.register('ga4', (api) => { - api.on(STORY_CHANGED, () => { - const { path } = api.getUrlState(); - gtag('event', 'page_view', { - page_path: path, - page_title: document.title, - }); - }); - api.on(STORY_ERRORED, ({ description }) => { - gtag('event', 'exception', { - description, - fatal: true, - }); - }); - api.on(STORY_MISSING, (id) => { - gtag('event', 'exception', { - description: `attempted to render ${id}, but it is missing`, - fatal: false, - }); - }); -}); diff --git a/packages/angular/.storybook/main.js b/packages/angular/.storybook/main.js deleted file mode 100644 index e994f4386b..0000000000 --- a/packages/angular/.storybook/main.js +++ /dev/null @@ -1,29 +0,0 @@ -const path = require('path'); - -module.exports = { - stories: ['../src/index.stories.ts', '../src/**/*.stories.ts'], - addons: ['@storybook/addon-knobs'], - webpackFinal: async (config) => { - config.module.rules.push({ - test: [/\.stories\.tsx?$/, /index\.ts$/], - loaders: [ - { - loader: require.resolve('@storybook/source-loader'), - options: { - parser: 'typescript', - }, - }, - ], - include: [path.resolve(__dirname, '../src')], - enforce: 'pre', - }); - - // add the package local node_modules as the first place to look when resolving modules - // more info here: https://webpack.js.org/configuration/resolve/#resolvemodules - config.resolve.modules = [path.resolve(__dirname, '../node_modules'), 'node_modules']; - - config.mode = 'development'; - config.devtool = 'source-map'; - return config; - }, -}; diff --git a/packages/angular/.storybook/manager-head.html b/packages/angular/.storybook/manager-head.html deleted file mode 100644 index 5ea6aa24e7..0000000000 --- a/packages/angular/.storybook/manager-head.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/packages/angular/.storybook/polyfills.js b/packages/angular/.storybook/polyfills.js deleted file mode 100644 index fc5f04d7b0..0000000000 --- a/packages/angular/.storybook/polyfills.js +++ /dev/null @@ -1,5 +0,0 @@ -import 'core-js/es7'; - -import 'zone.js/dist/zone'; - -import 'element-closest-polyfill'; diff --git a/packages/angular/.storybook/postcss.config.js b/packages/angular/.storybook/postcss.config.js deleted file mode 100644 index a0fa32b9cc..0000000000 --- a/packages/angular/.storybook/postcss.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - plugins: [require('autoprefixer')], -}; diff --git a/packages/angular/.storybook/preview.js b/packages/angular/.storybook/preview.js deleted file mode 100644 index 31c5a62b88..0000000000 --- a/packages/angular/.storybook/preview.js +++ /dev/null @@ -1,19 +0,0 @@ -import './polyfills.js'; - -import { addDecorator, addParameters } from '@storybook/angular'; -import { withKnobs } from '@storybook/addon-knobs'; -import { CarbonG10 } from './theme'; - -// load global styles -require('!style-loader!css-loader!postcss-loader!sass-loader!./preview.scss'); - -addParameters({ - options: { - theme: CarbonG10, - showRoots: true, - storySort: (a, b) => - a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }), - }, -}); - -addDecorator(withKnobs); diff --git a/packages/angular/.storybook/preview.scss b/packages/angular/.storybook/preview.scss deleted file mode 100644 index 229a7d3e39..0000000000 --- a/packages/angular/.storybook/preview.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../src/vendor/@ai-apps/styles/css/ai-apps-pal.css'; - -html { - height: 100%; -} - -.sb-show-main:not(.full-page) { - padding: 3em; - display: flex; - flex-direction: column; - align-items: center; - height: 100%; -} - -#root { - display: block; - width: 100%; -} diff --git a/packages/angular/.storybook/public/carbon.jpg b/packages/angular/.storybook/public/carbon.jpg deleted file mode 100644 index 773e30b0d5..0000000000 Binary files a/packages/angular/.storybook/public/carbon.jpg and /dev/null differ diff --git a/packages/angular/.storybook/theme.js b/packages/angular/.storybook/theme.js deleted file mode 100644 index 07de3f22ef..0000000000 --- a/packages/angular/.storybook/theme.js +++ /dev/null @@ -1,39 +0,0 @@ -import { create } from '@storybook/theming'; -import { g10 } from '@carbon/themes'; - -const { field01, interactive01, text01, text04, ui01, ui03, ui04, uiBackground } = g10; - -export const CarbonG10 = create({ - base: 'light', - - colorPrimary: interactive01, - colorSecondary: ui04, - - // UI - appBg: ui01, - appContentBg: uiBackground, - appBorderColor: ui04, - appBorderRadius: 0, - - // Typography - fontBase: "'IBM Plex Sans', sans-serif", - fontCode: "'IBM Plex Mono', monospace", - - // Text colors - textColor: text01, - textInverseColor: text04, - - // Toolbar default and active colors - barTextColor: text01, - barSelectedColor: interactive01, - barBg: uiBackground, - - // Form colors - inputBg: field01, - inputBorder: ui03, - inputTextColor: text01, - inputBorderRadius: 0, - - brandTitle: 'AI Apps PAL Angular', - brandUrl: 'https://github.com/carbon-design-system/carbon-addons-iot-react', -}); diff --git a/packages/angular/.storybook/tsconfig.json b/packages/angular/.storybook/tsconfig.json deleted file mode 100644 index f1fde562da..0000000000 --- a/packages/angular/.storybook/tsconfig.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "baseUrl": "", - "declaration": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ - "es2016", - "dom" - ], - "sourceMap": true, - "mapRoot": "./../", - "module": "es2015", - "moduleResolution": "node", - "outDir": "./../dist", - "rootDirs": [ - "./../src", - "./../stories" - ], - "target": "es2015", - "inlineSources": true, - "typeRoots": [ - "./../node_modules/@types", - "./../demo/typings.d.ts" - ], - "paths": { - "@ai-apps/angular/*": [ - "./../src/*-index" - ] - } - }, - "files": [ - "./../src/index.ts" - ] -} diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md deleted file mode 100644 index 48609b5fd7..0000000000 --- a/packages/angular/CHANGELOG.md +++ /dev/null @@ -1,741 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# [2.154.0-next.30](https://github.com/IBM/carbon-components-angular/compare/v2.154.0-next.29...v2.154.0-next.30) (2024-07-16) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.154.0-next.20](https://github.com/IBM/carbon-components-angular/compare/v2.154.0-next.19...v2.154.0-next.20) (2024-04-08) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.154.0-next.2](https://github.com/IBM/carbon-components-angular/compare/v2.154.0-next.1...v2.154.0-next.2) (2023-10-13) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.154.0-next.1](https://github.com/IBM/carbon-components-angular/compare/v2.153.0-next.35...v2.154.0-next.1) (2023-10-11) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.153.0](https://github.com/IBM/carbon-components-angular/compare/v2.152.5...v2.153.0) (2023-10-11) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -## [2.152.4-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.152.3...v2.152.4-next.0) (2023-02-28) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -## [2.152.1](https://github.com/IBM/carbon-components-angular/compare/v2.152.1-next.0...v2.152.1) (2023-02-22) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -## [2.152.1-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.152.0...v2.152.1-next.0) (2023-02-21) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.152.0](https://github.com/IBM/carbon-components-angular/compare/v2.152.0-next.32...v2.152.0) (2023-02-20) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -## [2.151.1-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.151.0...v2.151.1-next.0) (2022-11-01) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.151.0](https://github.com/IBM/carbon-components-angular/compare/v2.151.0-next.47...v2.151.0) (2022-11-01) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.151.0-next.39](https://github.com/IBM/carbon-components-angular/compare/v2.151.0-next.38...v2.151.0-next.39) (2022-10-17) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.151.0-next.30](https://github.com/IBM/carbon-components-angular/compare/v2.151.0-next.29...v2.151.0-next.30) (2022-10-04) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.151.0-next.9](https://github.com/IBM/carbon-components-angular/compare/v2.151.0-next.8...v2.151.0-next.9) (2022-08-31) - - -### Bug Fixes - -* adding angular 12 and 13 to peer dependencies ([76ff324](https://github.com/IBM/carbon-components-angular/commit/76ff324412f035f5741e2e755d043331dce7412d)) -* **angular:** disable ivy compilation ([1d9969d](https://github.com/IBM/carbon-components-angular/commit/1d9969d2d59e3c6ac87ee3e769709a4d1073cab9)) - - - - - -# [2.151.0-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.150.1-next.12...v2.151.0-next.0) (2022-07-26) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -## [2.150.1-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.150.0...v2.150.1-next.0) (2022-06-06) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.150.0](https://github.com/IBM/carbon-components-angular/compare/v2.150.0-next.2...v2.150.0) (2022-06-03) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -## [2.149.1-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.149.0...v2.149.1-next.0) (2022-05-26) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.149.0](https://github.com/IBM/carbon-components-angular/compare/v2.149.0-next.58...v2.149.0) (2022-05-26) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.149.0-next.44](https://github.com/IBM/carbon-components-angular/compare/v2.149.0-next.43...v2.149.0-next.44) (2022-03-31) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.149.0-next.26](https://github.com/IBM/carbon-components-angular/compare/v2.149.0-next.25...v2.149.0-next.26) (2022-03-18) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.149.0-next.24](https://github.com/IBM/carbon-components-angular/compare/v2.149.0-next.23...v2.149.0-next.24) (2022-03-14) - - -### Bug Fixes - -* added isOpen knob to test the change ([c41dd5a](https://github.com/IBM/carbon-components-angular/commit/c41dd5a0908fa2af783c5abc915f37f61b64c7c2)) -* resolve issues as mentioned in code review ([e8e0342](https://github.com/IBM/carbon-components-angular/commit/e8e034297c31ccd41ee6df09d0c0c915db331645)) - - -### Features - -* **ai-flyout-menu:** track open/close state ([583b732](https://github.com/IBM/carbon-components-angular/commit/583b7326d671397dde1588b2ef2b494cff0d3c4f)) - - - - - -# [2.149.0-next.20](https://github.com/IBM/carbon-components-angular/compare/v2.149.0-next.19...v2.149.0-next.20) (2022-03-07) - - -### Bug Fixes - -* **table:** fix type error ([a978cda](https://github.com/IBM/carbon-components-angular/commit/a978cdae200c2571a96685939e27e6574c142917)) - - -### Features - -* **table model:** account for rowSpans in moveColumn ([5eb8c11](https://github.com/IBM/carbon-components-angular/commit/5eb8c11ebed812e9474bf232f87c311a22ea7826)) -* **tabs:** add support for custom templates ([6dc2faf](https://github.com/IBM/carbon-components-angular/commit/6dc2fafadb42d3eea0b28477f2796a9060be25fb)) - - - - - -# [2.149.0-next.1](https://github.com/IBM/carbon-components-angular/compare/v2.149.0-next.0...v2.149.0-next.1) (2022-02-14) - - -### Bug Fixes - -* **datetimepicker:** clear and format code ([b6d7774](https://github.com/IBM/carbon-components-angular/commit/b6d7774a5dfca0961782a2ec96430f1929aa2c88)) -* **datetimepicker:** unable to modify abs range issue ([73c5e04](https://github.com/IBM/carbon-components-angular/commit/73c5e0411bd06c08d84a82875be9f649b7e64aa1)) - - - - - -## [2.148.1-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.148.0-next.15...v2.148.1-next.0) (2022-02-08) - - - -# [2.148.0](https://github.com/IBM/carbon-components-angular/compare/v2.148.0-next.14...v2.148.0) (2022-02-07) - - -### Reverts - -* Revert "Revert "Merge branch 'next' into master"" ([eebc448](https://github.com/IBM/carbon-components-angular/commit/eebc448685cb89e35e58d5be7d9891192f527f68)) - - - - - -# [2.148.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.4...v2.148.0) (2022-02-07) - -### Reverts - -* Revert "Revert "Merge branch 'next' into master"" ([eebc448](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/eebc448685cb89e35e58d5be7d9891192f527f68)) - -# [2.148.0-next.15](https://github.com/IBM/carbon-components-angular/compare/v2.148.0-next.14...v2.148.0-next.15) (2022-02-07) - - -### Bug Fixes - -* **datetimepicker:** absolute end time ([a3a6d74](https://github.com/IBM/carbon-components-angular/commit/a3a6d74e30a7ecc3a4ac2fee659c86814083eec7)) -* **datetimepicker:** add comments for RelativeToOption ([4e4fd3e](https://github.com/IBM/carbon-components-angular/commit/4e4fd3eebf7d34e2e2fb889160669f43338aa94c)) -* **datetimepicker:** add key in RelativeToOption ([635a253](https://github.com/IBM/carbon-components-angular/commit/635a253e2b5393ca1221326a8a5783a4005af584)) -* **datetimepicker:** fix preset relative story ([823c2f8](https://github.com/IBM/carbon-components-angular/commit/823c2f85cd2c2bf028546f72d55a06eb6c742e6c)) -* **datetimepicker:** fix type name ([8e8cb65](https://github.com/IBM/carbon-components-angular/commit/8e8cb6592181b93b7291307ddadee6f76e9fe3ea)) -* **datetimepicker:** format code ([e563cd8](https://github.com/IBM/carbon-components-angular/commit/e563cd8f1d22b48fe74475fa5b0ab2b2a52c9051)) -* **datetimepicker:** format code ([93a6319](https://github.com/IBM/carbon-components-angular/commit/93a631978c89884a09b087b6243d74a8d1155f3a)) -* **datetimepicker:** support relativeTo customization ([3ab3b43](https://github.com/IBM/carbon-components-angular/commit/3ab3b43d5c145b812910881ec96fda1de5161e1b)) -* **empty state:** fix build ([8857f1a](https://github.com/IBM/carbon-components-angular/commit/8857f1a6b7e6bc95671fe5d2ecb365d39e39021e)) -* **icons:** move entry point up a level ([fdd9351](https://github.com/IBM/carbon-components-angular/commit/fdd935142dc0df46ac976a62d8672c5cfe6a0134)) -* **table:** change column type ([16385fe](https://github.com/IBM/carbon-components-angular/commit/16385fe350a5b4201ba05caa1a8f1908ec93ac15)) -* **table:** fill header item with provided props ([3f2352a](https://github.com/IBM/carbon-components-angular/commit/3f2352a45542d907d5f05990196fecaaa4f95a7d)) -* **table:** fix tests ([e3896e3](https://github.com/IBM/carbon-components-angular/commit/e3896e3c54acf9cf9e0b36621461e6a0194c716b)) -* **table model:** allow TableHeaderItems to be passed in ([d527325](https://github.com/IBM/carbon-components-angular/commit/d527325df9b91ce027589644723ad7620b3e5fee)) - - -### Features - -* **empty state:** add directives for empty state sections ([a0ad14d](https://github.com/IBM/carbon-components-angular/commit/a0ad14d640accd63dd8db190ecc15f7598ad7652)) -* **empty state:** convert action directives to components ([63aa0a3](https://github.com/IBM/carbon-components-angular/commit/63aa0a31b433ee064904b63b2a3343c9e3eef6b2)) -* **empty-state:** add angular empty state ([ed1ed82](https://github.com/IBM/carbon-components-angular/commit/ed1ed8296f1016e789caee38a356af03142fc66d)) -* **table:** add empty state ([9e06356](https://github.com/IBM/carbon-components-angular/commit/9e06356f01e3bcae9f16bcd4edd7682850000dfe)) -* **table:** add helpers for column alignment ([1780147](https://github.com/IBM/carbon-components-angular/commit/1780147a05ee83903e3d0ebec41a4541423df666)) - - - - - -## [2.147.1-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.147.0...v2.147.1-next.0) (2022-01-12) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.147.0](https://github.com/IBM/carbon-components-angular/compare/v2.147.0-next.91...v2.147.0) (2022-01-12) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.147.0-next.80](https://github.com/IBM/carbon-components-angular/compare/v2.147.0-next.79...v2.147.0-next.80) (2021-12-11) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.147.0-next.77](https://github.com/IBM/carbon-components-angular/compare/v2.147.0-next.76...v2.147.0-next.77) (2021-12-07) - - -### Bug Fixes - -* **rule-builder:** build ([6cc54bb](https://github.com/IBM/carbon-components-angular/commit/6cc54bb115fe72a1d988ea7a4b562188b7859d0f)) -* **rule-builder:** clean ([ae5903c](https://github.com/IBM/carbon-components-angular/commit/ae5903c18eb51fa0a4bb9056e4a7d77749b9843d)) - - -### Features - -* **rule-builder:** add basic rule builder angular ([feab7fd](https://github.com/IBM/carbon-components-angular/commit/feab7fd5ef9e97b7c3df476f7d440241ecfc28fa)) -* **rule-builder:** add more translations ([cf0c639](https://github.com/IBM/carbon-components-angular/commit/cf0c63999574c5343ce9f7972d6caf9aff49536a)) -* **rule-builder:** add per-column operands and value templates ([d32553f](https://github.com/IBM/carbon-components-angular/commit/d32553f954e5b988662745d40d7b4b8daa493ada)) -* **rule-builder:** add translations ([7e79321](https://github.com/IBM/carbon-components-angular/commit/7e7932164d4210e4912658def9430a0cd6c289ba)) - - - - - -# [2.147.0-next.72](https://github.com/IBM/carbon-components-angular/compare/v2.147.0-next.71...v2.147.0-next.72) (2021-12-02) - - -### Bug Fixes - -* **button-menu:** update cca and query correct el ([83ce0b8](https://github.com/IBM/carbon-components-angular/commit/83ce0b84927d6ca486f9377a678a2ce8f66c4eff)) - - -### Features - -* update carbon-components ([8a7dd47](https://github.com/IBM/carbon-components-angular/commit/8a7dd47ebff6e3f535dd831bb9ffd95bed0ab224)) - - - - - -# [2.147.0-next.57](https://github.com/IBM/carbon-components-angular/compare/v2.147.0-next.56...v2.147.0-next.57) (2021-11-11) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.147.0-next.39](https://github.com/IBM/carbon-components-angular/compare/v2.147.0-next.38...v2.147.0-next.39) (2021-10-29) - - -### Bug Fixes - -* **datetimepicker:** remain selection on cancel ([5a723c5](https://github.com/IBM/carbon-components-angular/commit/5a723c56731aa76e402787a966665fd92cc7f890)) - - - - - -# [2.147.0-next.22](https://github.com/IBM/carbon-components-angular/compare/v2.147.0-next.21...v2.147.0-next.22) (2021-10-21) - - -### Bug Fixes - -* **build:** move entry points to the same level ([4a4756b](https://github.com/IBM/carbon-components-angular/commit/4a4756b1de2a4e4cdb82cd12b1d197ce1c45fa16)) -* **list-header:** change imports ([6fcf26e](https://github.com/IBM/carbon-components-angular/commit/6fcf26ea86cd549ceebb6d59cf4e57e25aeaa1f0)) - - - - - -# [2.147.0-next.12](https://github.com/IBM/carbon-components-angular/compare/v2.147.0-next.11...v2.147.0-next.12) (2021-10-06) - - -### Features - -* **icon-content-switcher:** add it ([310aa15](https://github.com/IBM/carbon-components-angular/commit/310aa15c4214ec6745659b138286389c1338fd12)) - - - - - -# [2.147.0-next.11](https://github.com/IBM/carbon-components-angular/compare/v2.147.0-next.10...v2.147.0-next.11) (2021-10-06) - - -### Bug Fixes - -* **table:** body ([f1cd8d6](https://github.com/IBM/carbon-components-angular/commit/f1cd8d677f7bb0afa20b448223484314d3300e05)) -* **table:** projectedRowLength ([f9740b7](https://github.com/IBM/carbon-components-angular/commit/f9740b76cb3194e8af2c32de7059df61e489bbd8)) -* **table:** projectedRowLength now does rowSpans ([0312581](https://github.com/IBM/carbon-components-angular/commit/031258157e03ec4a01ecf00a7b2168463cc3b703)) - - - - - -# [2.147.0-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.146.2-next.2...v2.147.0-next.0) (2021-09-27) - - -### Bug Fixes - -* **table:** body not rendering ([1351cb6](https://github.com/IBM/carbon-components-angular/commit/1351cb66836f93d77c79c9458967748688dab96c)) -* **table:** build ([8b3554f](https://github.com/IBM/carbon-components-angular/commit/8b3554ff36e343de78e768a4478da34464def7e0)) -* **table:** move body columns ([7518964](https://github.com/IBM/carbon-components-angular/commit/75189641acbea092bd7c20e85ec00092aea396da)) -* **table:** tests ([1e23521](https://github.com/IBM/carbon-components-angular/commit/1e23521102e7d5235565f7525f9375cd8e14716d)) - - -### Features - -* **table:** add multi-line header move column - draft ([1524e58](https://github.com/IBM/carbon-components-angular/commit/1524e5873330d1b2fcce44dee4414ad3d95ac666)) -* **table:** add multi-line header support for setData ([d22bcaf](https://github.com/IBM/carbon-components-angular/commit/d22bcafa3e82cc1ee5d84f1d5975d3590ef23c44)) - - - - - -## [2.146.1-next.5](https://github.com/IBM/carbon-components-angular/compare/v2.146.1-next.4...v2.146.1-next.5) (2021-09-22) - - -### Bug Fixes - -* **datetimepicker:** format code ([3cfde74](https://github.com/IBM/carbon-components-angular/commit/3cfde743e9849eec0f8801fe8a00725ab2029f66)) -* **datetimepicker:** support blocking dates ([7429abe](https://github.com/IBM/carbon-components-angular/commit/7429abebdf5f7217c50bcb0edffc8ec349f17bbf)) -* **datetimepicker:** update format ([5240587](https://github.com/IBM/carbon-components-angular/commit/5240587eb746a502957dba31bb936e8147c8c97d)) - - - - - -## [2.146.1-next.4](https://github.com/IBM/carbon-components-angular/compare/v2.146.1-next.3...v2.146.1-next.4) (2021-09-22) - - -### Bug Fixes - -* **datetimepicker:** clear code ([3669d4a](https://github.com/IBM/carbon-components-angular/commit/3669d4a69cc1e7ddc2ac32d236d1b88672525892)) -* **datetimepicker:** format code ([cb63418](https://github.com/IBM/carbon-components-angular/commit/cb634186972af984af5e045426ff13e6c67ed565)) -* **datetimpicker:** customize range separator ([1e9f819](https://github.com/IBM/carbon-components-angular/commit/1e9f81932bab8da088d12bd6c75e7caf30ce8874)) - - - - - -## [2.146.1-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.146.0...v2.146.1-next.0) (2021-09-18) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.146.0](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.187...v2.146.0) (2021-09-17) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.146.0-next.152](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.151...v2.146.0-next.152) (2021-08-30) - - -### Bug Fixes - -* **datetimepicker:** fix absolute date picker format ([b5b44dd](https://github.com/IBM/carbon-components-angular/commit/b5b44ddaf24fc8f593e6a520dba1cd8844dffbac)) -* **datetimepicker:** format code ([ae709ba](https://github.com/IBM/carbon-components-angular/commit/ae709ba57ca6934125e10d5012831d71399aa68a)) -* **datetimepicker:** format code ([2194a15](https://github.com/IBM/carbon-components-angular/commit/2194a154e8786a0cd38ea8d7be4215ce467f834e)) -* **datetimepicker:** remove console.log ([9da1832](https://github.com/IBM/carbon-components-angular/commit/9da1832f6d283dbef42863557e9ce257b063b7eb)) -* **datetimepicker:** rename ([e435cf6](https://github.com/IBM/carbon-components-angular/commit/e435cf6b49fe2d24d525b7cc544c3112ac47ba46)) - - - - - -# [2.146.0-next.109](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.108...v2.146.0-next.109) (2021-08-20) - - -### Bug Fixes - -* **table:** cell text position ([2921530](https://github.com/IBM/carbon-components-angular/commit/292153048aaad63f6ccc5b66c6400d9031b6dfec)) -* **table:** styling on firefox ([d7b810c](https://github.com/IBM/carbon-components-angular/commit/d7b810c34941e210721a99a4899920718b45bc1f)) - - -### Features - -* **table:** add new table model and multi-line headre implementation ([89819da](https://github.com/IBM/carbon-components-angular/commit/89819dab59872b0c46ed9123aa36e09ac018dc5e)) - - - - - -# [2.146.0-next.108](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.107...v2.146.0-next.108) (2021-08-20) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.146.0-next.107](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.106...v2.146.0-next.107) (2021-08-20) - - -### Bug Fixes - -* **datetimepicker:** add placeholder ([ba291ce](https://github.com/IBM/carbon-components-angular/commit/ba291ce2c4f68e06454788384770e5b4d5868cf6)) -* **datetimepicker:** handle null select ([dc9f64c](https://github.com/IBM/carbon-components-angular/commit/dc9f64cf67d771e9fef6217ad5eb38d36ee69534)) -* **datetimepicker:** rename disabled ([80f94d2](https://github.com/IBM/carbon-components-angular/commit/80f94d2025c8872f1ca232866d5ac9bb3d730199)) - - - - - -# [2.146.0-next.105](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.104...v2.146.0-next.105) (2021-08-19) - - -### Bug Fixes - -* **datetimepicker:** add customized date format ([9b52103](https://github.com/IBM/carbon-components-angular/commit/9b52103a74c09760c128f301352c69d59b6b65e7)) -* **datetimepicker:** format code ([664ac95](https://github.com/IBM/carbon-components-angular/commit/664ac950bc77dd3b47d184f4e9ea66676f09dc6e)) -* **datetimepicker:** format code ([da493b4](https://github.com/IBM/carbon-components-angular/commit/da493b425d2839eecc26aeee3bad8d5f51e42d2a)) -* **datetimepicker:** remove type ([0a63ecb](https://github.com/IBM/carbon-components-angular/commit/0a63ecb49d6100d3a7726b371ad4e25c1ae1626d)) -* **datetimepicker:** update formatString ([6862f7b](https://github.com/IBM/carbon-components-angular/commit/6862f7b50dd8530cb0717ab9cb314d346572c2f0)) - - - - - -# [2.146.0-next.84](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.83...v2.146.0-next.84) (2021-08-12) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.146.0-next.83](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.82...v2.146.0-next.83) (2021-08-12) - - -### Bug Fixes - -* **list:** fix build ([9c2c97a](https://github.com/IBM/carbon-components-angular/commit/9c2c97a29b4bf80e10bb48f5b73a9d2f3d54f9e4)) -* **list:** initialize list states in set items ([f014e2e](https://github.com/IBM/carbon-components-angular/commit/f014e2e24bc3392270c603f268a430a6a0b78a71)) -* **list:** prevent unselectable items from being selected ([1683664](https://github.com/IBM/carbon-components-angular/commit/16836645f366573342a48ca0dfabf76cbffe3a17)) -* **list:** remove unnecessary lifecycle hooks ([7492bf8](https://github.com/IBM/carbon-components-angular/commit/7492bf8ced44046f27e63782d5b2c90823674188)) -* **sortable-list:** revert offset to original ([f7d078f](https://github.com/IBM/carbon-components-angular/commit/f7d078fff49f0594d366e3540dd2c12a29aa9db1)) - - -### Features - -* **list:** add drag and drop support ([875302c](https://github.com/IBM/carbon-components-angular/commit/875302cbe529e3540a6427f23e1ce9de2172914d)) -* **list:** add empty state ([77ce99f](https://github.com/IBM/carbon-components-angular/commit/77ce99fc8ac04a4bdd41408c7e91b31470bfc873)) -* **list:** add header ([473c833](https://github.com/IBM/carbon-components-angular/commit/473c83358120fe2c34a312067d6e3a74f782ed78)) -* **list:** add large items ([cb67c7c](https://github.com/IBM/carbon-components-angular/commit/cb67c7c03cc68425445dbbb73e92cb2ffa0c821f)) -* **list:** add package.json to root ([3b26f81](https://github.com/IBM/carbon-components-angular/commit/3b26f81894a7d80a09b08145eaaed31fef9aee06)) -* **list:** add support for adding and removing items ([a4c70d1](https://github.com/IBM/carbon-components-angular/commit/a4c70d1ce4377bbc135109047189b7136ab496f7)) -* **list:** add support for disabled items ([e7abfa9](https://github.com/IBM/carbon-components-angular/commit/e7abfa9eeb04ea040b69541a850c6a84a9fc7780)) -* **list:** add support for row actions ([57ad775](https://github.com/IBM/carbon-components-angular/commit/57ad7753145739b8cd716bd35565bc9ea2c31128)) -* **list:** add template context for rowActions ([aec82a2](https://github.com/IBM/carbon-components-angular/commit/aec82a2aa412acfea49724ebb59dffdbc20fbe9e)) -* **list:** change selectedIds expandedIds and indeterminateIds to sets ([4d71656](https://github.com/IBM/carbon-components-angular/commit/4d7165630a8cc632c4f1674b5d329b419a93f44e)) -* **list:** start working on angular list component ([923143c](https://github.com/IBM/carbon-components-angular/commit/923143c9e9c615737b17f05045bcfa031a1fa8eb)) -* **list:** update to latest specs ([fc82b50](https://github.com/IBM/carbon-components-angular/commit/fc82b50a2af4e452a2cb23d2bc629da4a0f960ec)) -* **list:** update to latest specs ([d791682](https://github.com/IBM/carbon-components-angular/commit/d791682bcc160469d100d09721d2f211d4010f51)) - - - - - -# [2.146.0-next.82](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.81...v2.146.0-next.82) (2021-08-12) - - -### Bug Fixes - -* **sc-table-model:** fix sterling model throwing errors ([50d780e](https://github.com/IBM/carbon-components-angular/commit/50d780e1fd3f84674e052eac6fe76414f280f136)) - - - - - -# [2.146.0-next.74](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.73...v2.146.0-next.74) (2021-08-09) - - -### Bug Fixes - -* **side-panel:** import typography ([71c89bc](https://github.com/IBM/carbon-components-angular/commit/71c89bc3cad6cbdea5f8958e55fd15b607222998)) -* **side-panel:** panel height ([1bd4d5d](https://github.com/IBM/carbon-components-angular/commit/1bd4d5d7bae50ec0151aaf9607d2173d50424a5e)) -* **side-panel:** updated design specs ([2e7bc2c](https://github.com/IBM/carbon-components-angular/commit/2e7bc2ccedde832aedaf92268c35814ab662ae59)) - - -### Features - -* **side-panel:** add custom icon support ([2a73944](https://github.com/IBM/carbon-components-angular/commit/2a739440a02866dc1c422ac8ad7020c50f93f3e7)) -* **side-panel:** initial ([df9072e](https://github.com/IBM/carbon-components-angular/commit/df9072eb9188b0f15a0342438f90c7c338f149f6)) - - - - - -# [2.146.0-next.70](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.69...v2.146.0-next.70) (2021-07-30) - - -### Features - -* **tabs:** add tab actions ([030df06](https://github.com/IBM/carbon-components-angular/commit/030df060d9629d2835e0ffb7248aa2a326ccef20)) - - - - - -# [2.146.0-next.59](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.58...v2.146.0-next.59) (2021-07-14) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.146.0-next.58](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.57...v2.146.0-next.58) (2021-07-14) - - -### Features - -* **datetimepicker:** add angular datetime picker ([6b2b7b0](https://github.com/IBM/carbon-components-angular/commit/6b2b7b00073a7ee7cfb73747ac36965fc25cc49e)) - - - - - -# [2.146.0-next.27](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.26...v2.146.0-next.27) (2021-06-11) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.146.0-next.25](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.24...v2.146.0-next.25) (2021-06-08) - - -### Bug Fixes - -* **filter-menu:** bad import ([92e9c3a](https://github.com/IBM/carbon-components-angular/commit/92e9c3a2858b8eac0733b5da270f2b568a65eebc)) -* **flyout-menu:** add role property ([051dd86](https://github.com/IBM/carbon-components-angular/commit/051dd86f91f259edb28bc38ee584f40666b1fb63)) -* **flyout-menu:** build ([37e010f](https://github.com/IBM/carbon-components-angular/commit/37e010f9c6c87526b0f6a2f0ccb2e7f99a68aeea)) -* **flyout-menu:** fix focus styles ([7a4eeba](https://github.com/IBM/carbon-components-angular/commit/7a4eeba57605f4fb87bf344758b33c8331e43015)) -* **flyout-menu:** format ([ce9a046](https://github.com/IBM/carbon-components-angular/commit/ce9a046158c0cc4b923fa5db5e522d6b33f4c828)) -* **flyout-menu:** lint a little ([46c1443](https://github.com/IBM/carbon-components-angular/commit/46c14430f1541f631d48a2a2ec77e206236c049c)) -* **flyout-menu:** positioning ([3ffd6c5](https://github.com/IBM/carbon-components-angular/commit/3ffd6c5be4db6124787847d5cffc824c7e7e4f6b)) -* **flyout-menu:** that one px ([c482566](https://github.com/IBM/carbon-components-angular/commit/c48256626edcba2421c1749c9518d8376b275e1e)) - - -### Features - -* **filter-menu:** add actions ([9756956](https://github.com/IBM/carbon-components-angular/commit/9756956107ba975e423db3ce2cb47f26cde41486)) -* **filter-menu:** add css class prefix ([ebe6780](https://github.com/IBM/carbon-components-angular/commit/ebe6780eeb36ed274122a8ef99a19ba9dcc7d746)) -* **filter-menu:** add filter menu ([8217c37](https://github.com/IBM/carbon-components-angular/commit/8217c376cf6a924c9c5c72d30b3410b50ecd03b2)) -* **flyout-menu:** add footer component ([77c003e](https://github.com/IBM/carbon-components-angular/commit/77c003e6463667b72100b8d50511b5a6b574afa9)) -* **flyout-menu:** use react styles for ng flyout ([74bf195](https://github.com/IBM/carbon-components-angular/commit/74bf195df67743d7c14df2d86c910c69bab819c1)) - - - - - -# [2.146.0-next.23](https://github.com/IBM/carbon-components-angular/compare/v2.146.0-next.22...v2.146.0-next.23) (2021-06-04) - - -### Features - -* **tabs:** add initial implementation of Angular tabs components ([bf1c632](https://github.com/IBM/carbon-components-angular/commit/bf1c632c93e7ac6ab8870143df7e5069d7108710)) - - - - - -## [2.145.1-next.1](https://github.com/IBM/carbon-components-angular/compare/v2.145.1-next.0...v2.145.1-next.1) (2021-05-15) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -## [2.145.1-next.0](https://github.com/IBM/carbon-components-angular/compare/v2.145.0...v2.145.1-next.0) (2021-05-13) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.145.0](https://github.com/IBM/carbon-components-angular/compare/v2.145.0-next.82...v2.145.0) (2021-05-13) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.145.0-next.44](https://github.com/IBM/carbon-components-angular/compare/v2.145.0-next.43...v2.145.0-next.44) (2021-04-16) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.145.0-next.43](https://github.com/IBM/carbon-components-angular/compare/v2.145.0-next.42...v2.145.0-next.43) (2021-04-15) - - -### Features - -* **card:** add card implementation for Angular ([cd4667c](https://github.com/IBM/carbon-components-angular/commit/cd4667c844c07dd1e6e4102181df5dd9c4684be3)) - - - - - -# [2.145.0-next.40](https://github.com/IBM/carbon-components-angular/compare/v2.145.0-next.39...v2.145.0-next.40) (2021-04-15) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.145.0-next.35](https://github.com/IBM/carbon-components-angular/compare/v2.145.0-next.34...v2.145.0-next.35) (2021-04-07) - - -### Bug Fixes - -* **repo:** un-scope monorepo-utils to prevent npm from trying to publish it ([0390827](https://github.com/IBM/carbon-components-angular/commit/03908279d7b2a5f4b69ee38cfe7f27c9ac515150)) - - - - - -# [2.145.0-next.33](https://github.com/IBM/carbon-components-angular/compare/v2.145.0-next.32...v2.145.0-next.33) (2021-04-02) - -**Note:** Version bump only for package @ai-apps/angular - - - - - -# [2.145.0-next.16](https://github.com/IBM/carbon-components-angular/compare/v2.145.0-next.15...v2.145.0-next.16) (2021-03-24) - -**Note:** Version bump only for package @ai-apps/angular diff --git a/packages/angular/LICENSE.md b/packages/angular/LICENSE.md deleted file mode 100644 index 8e8a91efe4..0000000000 --- a/packages/angular/LICENSE.md +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - -TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - -1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - -2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - -3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - -4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - -5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - -6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - -7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - -8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - -9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - -END OF TERMS AND CONDITIONS - -APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "{}" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - -Copyright 2018 IBM - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. diff --git a/packages/angular/README.md b/packages/angular/README.md deleted file mode 100644 index 5f1541528c..0000000000 --- a/packages/angular/README.md +++ /dev/null @@ -1,120 +0,0 @@ -

-

Carbon Components Angular

-

- An Angular implementation of the Carbon Design System -

- - - - - - - semantic-release - - - -

-

- -### Getting started - -Assuming we're starting with a new @angular/cli project: - -```shell -$ npx @angular/cli new my-project --style=scss -$ cd my-project -$ npm i --save carbon-components-angular carbon-components @carbon/icons-angular -``` - -Then we need to include carbon-components in `src/styles.scss`: - -```scss -@import '~carbon-components/scss/globals/scss/styles.scss'; -``` - -> _Note:_ For offline usage we'll need to set `$font-path: '~carbon-components/src/globals/fonts';` at the very top of our `src/styles.scss`. This will copy the fonts to our `dist` folder upon successful build. If you like the fonts to be a part of your `assets` folder and not pollute the `dist` folder then copy the fonts from `node_modules/carbon-components/src/globals/fonts` into our app's `src/assets/fonts` folder and add `$font-path: '/assets/fonts/';` at the very top of our `src/styles.scss`. - -That's it! Now we can run `npm start` and start building out our application! - -> _Note:_ This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` scss is our recommended setup. - -[![Edit Carbon Components Angular](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0129r494ql) - -### Contributing - -#### Quickstart - -- fork IBM/carbon-components-angular and clone it locally -- run `npm install` to grab all the dependencies, then `npm run storybook` to start storybook -- **if you are adding a component**: - - add a folder with your component code, styles, tests and story under `src` - - export your module from `index.ts` -- **if you are contributing a fix**: - - add your fix, update the documentation as needed - - consider adding or modifying a test case to cover the fix -- follow the [Angular style guide](https://angular.io/styleguide) -- be sure to run `npm test` and `npm run lint` to make sure the tests and linter pass -- submit a PR - -#### Pull request guidelines - -- **Keep changes small and focused.** -- If you create a pull request and then realize it is not ready to be merged, prepend "WIP: " (For example, WIP: Fixed text overflow in accordion headers.) and assign a WIP label. -- Include a description of changes - - attach a screenshot (or a gif!) for design reference if needed - - reference the related issue - "closes #123" or "fixes #123" will close issue #123 once the PR is merged - "issue #123" just references the issue. Only use this if you definitely need the issue to remain open. - - @mention any specific other developers that need to be aware of the changes -- add the "needs review" label along with any other relevant labels -- [link to code review checklist goes here](#) - -#### Issues submission guidelines - -- **One issue per defect** - do not open an issue that spans multiple defects -- provide a descriptive title that mentions the component and version the issue covers -- provide - - version(s) affected - - a description of the issue - - steps taken to produce the issue - - expected behaviour - - current behaviour - - screenshots if needed - - relevant code snippets - - links to application source code or running demo ([Codesandbox is awesome for this!](https://codesandbox.io/s/angular)) (including connection/authentication information) -- add relevant labels (bug, accessibility, design, discussion, feature, etc) -- if you have a fix to contribute, assign yourself, otherwise leave unassigned - -#### npm commands - -To keep our build dependencies local we use npm scripts to run our webpack, gulp, and general build tasks. You should never install webpack or gulp globally as that will likely conflict with our version. You should never need to modify the build process to add a component or story. - -- `npm run storybook` to run storybook (port 6006) -- `npm run build` to generate the dist -- `docs:build` to build documentation -- `docs:server` to build and run the documentation server -- `npm run lint` to run tslint -- `npm test` to run tests - -### Resources - -- [Style guide (WIP)](https://github.com/IBM/carbon-components-angular/wiki/Style-guide) -- [General component API guidelines (WIP)](https://github.com/IBM/carbon-components-angular/wiki/Component-API-guidelines) -- [Angular style guide](https://angular.io/styleguide) -- I18N tooling - [I18N guide](https://angular.io/guide/i18n) - [ngx-translate](https://github.com/ngx-translate/core) -- (Angular 2+ doesn't have anything like ngAria, instead here's [The A11Y Project](http://a11yproject.com/), [WAI-ARIA specs](https://www.w3.org/TR/wai-aria/), and [WAI-ARIA Authoring Practices](https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/)) -- [TypeScript docs](https://www.typescriptlang.org/docs/tutorial.html) - -### Philosophy - -- Components should be the smallest unit of computation - - Think in terms of pages and applications composed from a multitude of components rather than pages or applications as a single unit of computation -- Components should delegate to the consumer whenever possible - - The individual applications should be the single source of truth, and be able to create any UI from our building blocks -- Components should do one thing, and do it well - - This does not mean they should be over specialized, but rather focus on providing a single, core experience -- Components should NOT maintain more state than absolutely necessary - - Likewise, stateless components should be favored whenever possible -- Components should NOT _necessarily_ implement the style guide point-for-point, the guide simply provides guidance on overarching functionality, components should enable that and product specific designs **without** baking in extra functionality - -## Code of Conduct - -Read our code of conduct [here](./.github/CODE_OF_CONDUCT.md) diff --git a/packages/angular/angular.json b/packages/angular/angular.json deleted file mode 100644 index 31349991c7..0000000000 --- a/packages/angular/angular.json +++ /dev/null @@ -1,79 +0,0 @@ -{ - "$schema": "../../node_modules/@angular/cli/lib/config/schema.json", - "cli": { - "analytics": false - }, - "version": 1, - "newProjectRoot": "projects", - "projects": { - "@ai-apps/angular": { - "root": "src", - "sourceRoot": "src", - "projectType": "library", - "prefix": "ai", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:ng-packagr", - "options": { - "tsConfig": "./src/tsconfig.lib.json", - "project": "./src/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "./src/tsconfig.lib.json" - } - } - }, - "test": { - "builder": "@angular-builders/custom-webpack:karma", - "options": { - "main": "src/test.ts", - "karmaConfig": "./karma.conf.js", - "tsConfig": "./tsconfig.spec.json", - "customWebpackConfig": { - "path": "./custom-webpack.config.js" - } - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": ["./tsconfig.json", "./tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] - } - } - } - }, - "@ai-apps/angular-e2e": { - "root": "e2e", - "sourceRoot": "e2e", - "projectType": "application", - "architect": { - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "./protractor.conf.js", - "devServerTarget": "@ai-apps/angular:serve" - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": ["e2e/tsconfig.e2e.json"], - "exclude": ["**/node_modules/**/*"] - } - } - } - } - }, - "defaultProject": "@ai-apps/angular", - "schematics": { - "@schematics/angular:component": { - "prefix": "ai", - "style": "scss" - }, - "@schematics/angular:directive": { - "prefix": "ai" - } - } -} diff --git a/packages/angular/carbon-angular-typedoc-theme/helpers/helpers.js b/packages/angular/carbon-angular-typedoc-theme/helpers/helpers.js deleted file mode 100644 index ce84120b08..0000000000 --- a/packages/angular/carbon-angular-typedoc-theme/helpers/helpers.js +++ /dev/null @@ -1,73 +0,0 @@ -const getMembersByDecoratorName = (groups, name) => { - let members = []; - if (Array.isArray(groups)) { - for (const group of groups) { - for (const child of group.children) { - if (child.decorators) { - if (child.decorators.some((value) => value.name === name)) { - members.push(child); - } - } - } - } - } - return members; -}; - -module.exports = { - toJSON: function (object) { - return JSON.stringify( - object, - (key, value) => { - if (typeof value === 'string') { - return value.replace(/"/g, ''); - } - return value; - }, - '' - ); - }, - isEmpty: function (object, options) { - if (Object.entries(object).length === 0) { - return options.fn(this); - } - return options.inverse(this); - }, - info: function (groups) { - if (Array.isArray(groups)) { - for (const group of groups) { - for (const child of group.children) { - if (child.decorators) { - const clone = Object.assign({}, child); - delete clone.parent; - delete clone.children; - delete clone.groups; - console.log(clone); - } - } - } - } - }, - withInputs: function (groups, options) { - const members = getMembersByDecoratorName(groups, 'Input'); - return options.fn({ members }); - }, - withOutputs: function (groups, options) { - const members = getMembersByDecoratorName(groups, 'Output'); - return options.fn({ members }); - }, - hasInputs: function (groups, options) { - const members = getMembersByDecoratorName(groups, 'Input'); - if (members.length > 0) { - return options.fn(this); - } - return options.inverse(this); - }, - hasOutputs: function (groups, options) { - const members = getMembersByDecoratorName(groups, 'Output'); - if (members.length > 0) { - return options.fn(this); - } - return options.inverse(this); - }, -}; diff --git a/packages/angular/carbon-angular-typedoc-theme/partials/analytics.hbs b/packages/angular/carbon-angular-typedoc-theme/partials/analytics.hbs deleted file mode 100644 index 85dc14e016..0000000000 --- a/packages/angular/carbon-angular-typedoc-theme/partials/analytics.hbs +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/packages/angular/carbon-angular-typedoc-theme/partials/index.hbs b/packages/angular/carbon-angular-typedoc-theme/partials/index.hbs deleted file mode 100644 index e753e29d6b..0000000000 --- a/packages/angular/carbon-angular-typedoc-theme/partials/index.hbs +++ /dev/null @@ -1,64 +0,0 @@ -{{#if groups}} -
-

Index

-
-
- {{#hasInputs groups}} -
-

Inputs

- {{#withInputs groups}} -
    - {{#each members}} -
  • - {{name}} -
  • - {{/each}} -
- {{/withInputs}} -
- {{/hasInputs}} - {{#hasOutputs groups}} -
-

Outputs

- {{#withOutputs groups}} -
    - {{#each members}} -
  • - {{name}} -
  • - {{/each}} -
- {{/withOutputs}} -
- {{/hasOutputs}} - {{#each groups}} -
- {{#if categories}} - {{#each categories}} -

{{#if title}}{{title}} {{/if}}{{../title}}

- - {{/each}} - {{else}} -

{{title}}

- - {{/if}} -
- {{/each}} -
-
-
-{{/if}} - -{{!-- {{info groups}} --}} diff --git a/packages/angular/carbon-angular-typedoc-theme/partials/member.hbs b/packages/angular/carbon-angular-typedoc-theme/partials/member.hbs deleted file mode 100644 index 363b2f59dc..0000000000 --- a/packages/angular/carbon-angular-typedoc-theme/partials/member.hbs +++ /dev/null @@ -1,39 +0,0 @@ -
- - {{#if name}} -

{{#each flags}}{{this}} {{/each}}{{{wbr name}}}

- {{/if}} - - {{#if decorators}} -
- {{#each decorators}} - - {{#isEmpty arguments}} - @{{name}}() - {{else}} - @{{name}}({{toJSON arguments}}) - {{/isEmpty}} - -
- {{/each}} -
- {{/if}} - - {{#if signatures}} - {{> member.signatures}} - {{else}}{{#if hasGetterOrSetter}} - {{> member.getterSetter}} - {{else}}{{#if isReference}} - {{> member.reference}} - {{else}} - {{> member.declaration}} - {{/if}}{{/if}}{{/if}} - - {{#each groups}} - {{#each children}} - {{#unless hasOwnDocument}} - {{> member}} - {{/unless}} - {{/each}} - {{/each}} -
diff --git a/packages/angular/custom-webpack.config.js b/packages/angular/custom-webpack.config.js deleted file mode 100644 index 65fc26c502..0000000000 --- a/packages/angular/custom-webpack.config.js +++ /dev/null @@ -1,7 +0,0 @@ -const path = require('path'); - -module.exports = { - resolve: { - modules: [path.resolve(__dirname, './node_modules'), 'node_modules'], - }, -}; diff --git a/packages/angular/gulpfile.js b/packages/angular/gulpfile.js deleted file mode 100644 index 5cb49eebd0..0000000000 --- a/packages/angular/gulpfile.js +++ /dev/null @@ -1,93 +0,0 @@ -//////////////////////////////////// -// Gulp all the things -//////////////////////////////////// -'use strict'; - -// -// Requires -// ================================= -const gulp = require('gulp'); -const sass = require('gulp-sass')(require('sass')); -const tap = require('gulp-tap'); -const path = require('path'); - -// -// Variables -// ================================= -const dirs = { - DIST: 'dist', - SRC: 'src', -}; - -const globs = { - scss: `${dirs.SRC}/**/*.scss`, -}; - -const licenseTemplate = `/** - * - * @ai-apps/angular v@PACKAGE_VERSION@ | @FILE_NAME@ - * - * Copyright 2014, @THIS_YEAR@ IBM - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -\n -`; - -// -// Build tasks -// ================================= -const moveLicense = () => gulp.src('LICENSE.md').pipe(gulp.dest(dirs.DIST)); - -const buildLicense = () => - gulp - .src([ - `${dirs.DIST}/**/*.scss`, - `${dirs.DIST}/**/*.css`, - `${dirs.DIST}/**/*.ts`, - `${dirs.DIST}/**/*.js`, - ]) - .pipe(licenseHeaders()) - .pipe(gulp.dest(dirs.DIST)); - -const buildReadme = () => gulp.src('README.md').pipe(gulp.dest(dirs.DIST)); - -const copyStyles = () => gulp.src(globs.scss).pipe(gulp.dest(`${dirs.DIST}/esm2015`)); - -// -// Running tasks -// ================================= -const buildMeta = gulp.parallel(moveLicense, buildLicense, buildReadme); - -module.exports = { - buildLicense, - buildReadme, - moveLicense, - buildMeta, - copyStyles, - default: buildMeta, -}; - -// -// Functions -// ================================= -function licenseHeaders() { - return tap(function (file) { - const packageJSON = require('./package.json'); - const updatedTemplate = licenseTemplate - .replace('@PACKAGE_VERSION@', packageJSON.version) - .replace('@FILE_NAME@', path.basename(file.path)) - .replace('@THIS_YEAR@', new Date().getFullYear()); - file.contents = Buffer.concat([new Buffer(updatedTemplate), file.contents]); - }); -} diff --git a/packages/angular/integration/ng10/.browserslistrc b/packages/angular/integration/ng10/.browserslistrc deleted file mode 100644 index 0ccadaf32f..0000000000 --- a/packages/angular/integration/ng10/.browserslistrc +++ /dev/null @@ -1,18 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. -not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/packages/angular/integration/ng10/.editorconfig b/packages/angular/integration/ng10/.editorconfig deleted file mode 100644 index f2b32d9f28..0000000000 --- a/packages/angular/integration/ng10/.editorconfig +++ /dev/null @@ -1,17 +0,0 @@ -# Editor configuration, see https://editorconfig.org -root = true - -[*] -charset = utf-8 -end_of_file = lf -indent_style = tab -indent_size = 4 -trim_trailing_whitespace = true -insert_final_newline = true - -[*.ts] -quote_type = single - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/packages/angular/integration/ng10/.gitignore b/packages/angular/integration/ng10/.gitignore deleted file mode 100644 index 86d943a9b2..0000000000 --- a/packages/angular/integration/ng10/.gitignore +++ /dev/null @@ -1,46 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# compiled output -/dist -/tmp -/out-tsc -# Only exists if Bazel was run -/bazel-out - -# dependencies -/node_modules - -# profiling files -chrome-profiler-events*.json -speed-measure-plugin*.json - -# IDEs and editors -/.idea -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# IDE - VSCode -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# misc -/.sass-cache -/connect.lock -/coverage -/libpeerconnection.log -npm-debug.log -yarn-error.log -testem.log -/typings - -# System Files -.DS_Store -Thumbs.db diff --git a/packages/angular/integration/ng10/README.md b/packages/angular/integration/ng10/README.md deleted file mode 100644 index 047b5782ef..0000000000 --- a/packages/angular/integration/ng10/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# Ng10 - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.2.0. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/packages/angular/integration/ng10/angular.json b/packages/angular/integration/ng10/angular.json deleted file mode 100644 index f7ea4b7e86..0000000000 --- a/packages/angular/integration/ng10/angular.json +++ /dev/null @@ -1,132 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "ng10": { - "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/ng10", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "aot": true, - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - }, - "configurations": { - "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "5mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "6kb", - "maximumError": "10kb" - } - ] - } - } - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "ng10:build" - }, - "configurations": { - "production": { - "browserTarget": "ng10:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "ng10:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "ng10:serve" - }, - "configurations": { - "production": { - "devServerTarget": "ng10:serve:production" - } - } - } - } - } - }, - "defaultProject": "ng10", - "cli": { - "analytics": false - } -} diff --git a/packages/angular/integration/ng10/e2e/protractor.conf.js b/packages/angular/integration/ng10/e2e/protractor.conf.js deleted file mode 100644 index acfb39cbde..0000000000 --- a/packages/angular/integration/ng10/e2e/protractor.conf.js +++ /dev/null @@ -1,36 +0,0 @@ -// @ts-check -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); - -/** - * @type { import("protractor").Config } - */ -exports.config = { - allScriptsTimeout: 11000, - specs: ['./src/**/*.e2e-spec.ts'], - capabilities: { - browserName: 'chrome', - }, - directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function () {}, - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json'), - }); - jasmine.getEnv().addReporter( - new SpecReporter({ - spec: { - displayStacktrace: StacktraceOption.PRETTY, - }, - }) - ); - }, -}; diff --git a/packages/angular/integration/ng10/e2e/src/app.e2e-spec.ts b/packages/angular/integration/ng10/e2e/src/app.e2e-spec.ts deleted file mode 100644 index da92750f81..0000000000 --- a/packages/angular/integration/ng10/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; - -describe('workspace-project App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('ng10 app is running!'); - }); - - afterEach(async () => { - // Assert that there are no errors emitted from the browser - const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain( - jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry) - ); - }); -}); diff --git a/packages/angular/integration/ng10/e2e/src/app.po.ts b/packages/angular/integration/ng10/e2e/src/app.po.ts deleted file mode 100644 index 19f0476681..0000000000 --- a/packages/angular/integration/ng10/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - navigateTo(): Promise { - return browser.get(browser.baseUrl) as Promise; - } - - getTitleText(): Promise { - return element(by.css('app-root .content span')).getText() as Promise; - } -} diff --git a/packages/angular/integration/ng10/e2e/tsconfig.json b/packages/angular/integration/ng10/e2e/tsconfig.json deleted file mode 100644 index 9a563c1495..0000000000 --- a/packages/angular/integration/ng10/e2e/tsconfig.json +++ /dev/null @@ -1,14 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../out-tsc/e2e", - "module": "commonjs", - "target": "es2018", - "types": [ - "jasmine", - "jasminewd2", - "node" - ] - } -} diff --git a/packages/angular/integration/ng10/karma.conf.js b/packages/angular/integration/ng10/karma.conf.js deleted file mode 100644 index 74d880db1b..0000000000 --- a/packages/angular/integration/ng10/karma.conf.js +++ /dev/null @@ -1,32 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma'), - ], - client: { - clearContext: false, // leave Jasmine Spec Runner output visible in browser - }, - coverageIstanbulReporter: { - dir: require('path').join(__dirname, './coverage/ng10'), - reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true, - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true, - }); -}; diff --git a/packages/angular/integration/ng10/package.json b/packages/angular/integration/ng10/package.json deleted file mode 100644 index 8603622417..0000000000 --- a/packages/angular/integration/ng10/package.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "name": "ng10", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" - }, - "private": true, - "dependencies": { - "@ai-apps/angular": "latest", - "@angular/animations": "~10.2.0", - "@angular/common": "~10.2.0", - "@angular/compiler": "~10.2.0", - "@angular/core": "~10.2.0", - "@angular/forms": "~10.2.0", - "@angular/platform-browser": "~10.2.0", - "@angular/platform-browser-dynamic": "~10.2.0", - "@angular/router": "~10.2.0", - "rxjs": "~6.6.0", - "tslib": "^2.0.0", - "zone.js": "~0.10.2", - "carbon-components": "^10.0.0", - "@carbon/icons-angular": "11.2.1", - "carbon-components-angular": "latest" - }, - "devDependencies": { - "@angular-devkit/build-angular": "~0.1002.0", - "@angular/cli": "~10.2.0", - "@angular/compiler-cli": "~10.2.0", - "@types/node": "^12.11.1", - "@types/jasmine": "~3.5.0", - "@types/jasminewd2": "~2.0.3", - "codelyzer": "^6.0.0", - "jasmine-core": "~3.6.0", - "jasmine-spec-reporter": "~5.0.0", - "karma": "~5.0.0", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage-istanbul-reporter": "~3.0.2", - "karma-jasmine": "~4.0.0", - "karma-jasmine-html-reporter": "^1.5.0", - "protractor": "~7.0.0", - "ts-node": "~8.3.0", - "tslint": "~6.1.0", - "typescript": "~4.0.2" - } -} diff --git a/packages/angular/integration/ng10/src/app/app-routing.module.ts b/packages/angular/integration/ng10/src/app/app-routing.module.ts deleted file mode 100644 index f9101eaf2e..0000000000 --- a/packages/angular/integration/ng10/src/app/app-routing.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -const routes: Routes = []; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/packages/angular/integration/ng10/src/app/app.component.html b/packages/angular/integration/ng10/src/app/app.component.html deleted file mode 100644 index 08f6ff5f3a..0000000000 --- a/packages/angular/integration/ng10/src/app/app.component.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/angular/integration/ng10/src/app/app.component.scss b/packages/angular/integration/ng10/src/app/app.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng10/src/app/app.component.spec.ts b/packages/angular/integration/ng10/src/app/app.component.spec.ts deleted file mode 100644 index 077fab0dc4..0000000000 --- a/packages/angular/integration/ng10/src/app/app.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; - -import { Dropdown, DropdownModule } from 'carbon-components-angular/dropdown'; -import { Button, ButtonModule } from 'carbon-components-angular'; -import { By } from '@angular/platform-browser'; - -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [RouterTestingModule, ButtonModule, DropdownModule], - declarations: [AppComponent], - }).compileComponents(); - })); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should render an ibmButton`, () => { - const fixture = TestBed.createComponent(AppComponent); - const button = fixture.debugElement.query(By.directive(Button)); - expect((button.nativeElement as HTMLButtonElement).textContent).toEqual('Hello world!'); - }); - - it('should render a dropdown', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const dropdown = fixture.debugElement.query(By.directive(Dropdown)); - expect(dropdown).toBeTruthy(); - }); -}); diff --git a/packages/angular/integration/ng10/src/app/app.component.ts b/packages/angular/integration/ng10/src/app/app.component.ts deleted file mode 100644 index 1c3cebbbdd..0000000000 --- a/packages/angular/integration/ng10/src/app/app.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { AIListItem } from '@ai-apps/angular'; -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], -}) -export class AppComponent { - items = [ - new AIListItem({ value: 'Canada', isSelectable: true }), - new AIListItem({ value: 'Brazil', isSelectable: true }), - new AIListItem({ value: 'Columbia', isSelectable: true }), - new AIListItem({ value: 'United States of America', isSelectable: true }), - new AIListItem({ value: 'Uruguay', isSelectable: true }), - new AIListItem({ value: 'Spain', isSelectable: true }), - ]; -} diff --git a/packages/angular/integration/ng10/src/app/app.module.ts b/packages/angular/integration/ng10/src/app/app.module.ts deleted file mode 100644 index 5a6380d689..0000000000 --- a/packages/angular/integration/ng10/src/app/app.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; - -import { ContextMenuModule, DialogModule, IconModule } from 'carbon-components-angular'; -import { ButtonMenuModule, ListModule } from '@ai-apps/angular'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - AppRoutingModule, - ButtonMenuModule, - ListModule, - ContextMenuModule, - DialogModule, - IconModule, - ], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/packages/angular/integration/ng10/src/assets/.gitkeep b/packages/angular/integration/ng10/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng10/src/environments/environment.prod.ts b/packages/angular/integration/ng10/src/environments/environment.prod.ts deleted file mode 100644 index d65fc9d9b2..0000000000 --- a/packages/angular/integration/ng10/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true, -}; diff --git a/packages/angular/integration/ng10/src/environments/environment.ts b/packages/angular/integration/ng10/src/environments/environment.ts deleted file mode 100644 index 05425a705a..0000000000 --- a/packages/angular/integration/ng10/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/packages/angular/integration/ng10/src/favicon.ico b/packages/angular/integration/ng10/src/favicon.ico deleted file mode 100644 index 997406ad22..0000000000 Binary files a/packages/angular/integration/ng10/src/favicon.ico and /dev/null differ diff --git a/packages/angular/integration/ng10/src/index.html b/packages/angular/integration/ng10/src/index.html deleted file mode 100644 index b80c2631d0..0000000000 --- a/packages/angular/integration/ng10/src/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - Ng10 - - - - - - - - - - diff --git a/packages/angular/integration/ng10/src/main.ts b/packages/angular/integration/ng10/src/main.ts deleted file mode 100644 index 9bd6fb69f4..0000000000 --- a/packages/angular/integration/ng10/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); diff --git a/packages/angular/integration/ng10/src/polyfills.ts b/packages/angular/integration/ng10/src/polyfills.ts deleted file mode 100644 index e49856ec90..0000000000 --- a/packages/angular/integration/ng10/src/polyfills.ts +++ /dev/null @@ -1,62 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/packages/angular/integration/ng10/src/styles.scss b/packages/angular/integration/ng10/src/styles.scss deleted file mode 100644 index fb4e763e1d..0000000000 --- a/packages/angular/integration/ng10/src/styles.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ -@import '../node_modules/@ai-apps/styles/css/ai-apps-pal.css'; diff --git a/packages/angular/integration/ng10/src/test.ts b/packages/angular/integration/ng10/src/test.ts deleted file mode 100644 index 28b358a5cb..0000000000 --- a/packages/angular/integration/ng10/src/test.ts +++ /dev/null @@ -1,26 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: { - context( - path: string, - deep?: boolean, - filter?: RegExp - ): { - keys(): string[]; - (id: string): T; - }; -}; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/packages/angular/integration/ng10/tsconfig.app.json b/packages/angular/integration/ng10/tsconfig.app.json deleted file mode 100644 index 90880d5708..0000000000 --- a/packages/angular/integration/ng10/tsconfig.app.json +++ /dev/null @@ -1,15 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/app", - "types": [] - }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng10/tsconfig.json b/packages/angular/integration/ng10/tsconfig.json deleted file mode 100644 index b5c033d0ad..0000000000 --- a/packages/angular/integration/ng10/tsconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "compileOnSave": false, - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "moduleResolution": "node", - "importHelpers": true, - "target": "es2015", - "module": "es2020", - "lib": [ - "es2018", - "dom" - ] - } -} diff --git a/packages/angular/integration/ng10/tsconfig.spec.json b/packages/angular/integration/ng10/tsconfig.spec.json deleted file mode 100644 index c1fdd7e6c9..0000000000 --- a/packages/angular/integration/ng10/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": [ - "jasmine" - ] - }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng10/tslint.json b/packages/angular/integration/ng10/tslint.json deleted file mode 100644 index b4ed449b77..0000000000 --- a/packages/angular/integration/ng10/tslint.json +++ /dev/null @@ -1,152 +0,0 @@ -{ - "extends": "tslint:recommended", - "rulesDirectory": [ - "codelyzer" - ], - "rules": { - "align": { - "options": [ - "parameters", - "statements" - ] - }, - "array-type": false, - "arrow-return-shorthand": true, - "curly": true, - "deprecation": { - "severity": "warning" - }, - "eofline": true, - "import-blacklist": [ - true, - "rxjs/Rx" - ], - "import-spacing": true, - "indent": { - "options": [ - "spaces" - ] - }, - "max-classes-per-file": false, - "max-line-length": [ - true, - 140 - ], - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-empty": false, - "no-inferrable-types": [ - true, - "ignore-params" - ], - "no-non-null-assertion": true, - "no-redundant-jsdoc": true, - "no-switch-case-fall-through": true, - "no-var-requires": false, - "object-literal-key-quotes": [ - true, - "as-needed" - ], - "quotemark": [ - true, - "single" - ], - "semicolon": { - "options": [ - "always" - ] - }, - "space-before-function-paren": { - "options": { - "anonymous": "never", - "asyncArrow": "always", - "constructor": "never", - "method": "never", - "named": "never" - } - }, - "typedef": [ - true, - "call-signature" - ], - "typedef-whitespace": { - "options": [ - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - }, - { - "call-signature": "onespace", - "index-signature": "onespace", - "parameter": "onespace", - "property-declaration": "onespace", - "variable-declaration": "onespace" - } - ] - }, - "variable-name": { - "options": [ - "ban-keywords", - "check-format", - "allow-pascal-case" - ] - }, - "whitespace": { - "options": [ - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type", - "check-typecast" - ] - }, - "component-class-suffix": true, - "contextual-lifecycle": true, - "directive-class-suffix": true, - "no-conflicting-lifecycle": true, - "no-host-metadata-property": true, - "no-input-rename": true, - "no-inputs-metadata-property": true, - "no-output-native": true, - "no-output-on-prefix": true, - "no-output-rename": true, - "no-outputs-metadata-property": true, - "template-banana-in-box": true, - "template-no-negated-async": true, - "use-lifecycle-interface": true, - "use-pipe-transform-interface": true, - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ] - } -} diff --git a/packages/angular/integration/ng11/.browserslistrc b/packages/angular/integration/ng11/.browserslistrc deleted file mode 100644 index 427441dc93..0000000000 --- a/packages/angular/integration/ng11/.browserslistrc +++ /dev/null @@ -1,17 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/packages/angular/integration/ng11/.editorconfig b/packages/angular/integration/ng11/.editorconfig deleted file mode 100644 index f2b32d9f28..0000000000 --- a/packages/angular/integration/ng11/.editorconfig +++ /dev/null @@ -1,17 +0,0 @@ -# Editor configuration, see https://editorconfig.org -root = true - -[*] -charset = utf-8 -end_of_file = lf -indent_style = tab -indent_size = 4 -trim_trailing_whitespace = true -insert_final_newline = true - -[*.ts] -quote_type = single - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/packages/angular/integration/ng11/.gitignore b/packages/angular/integration/ng11/.gitignore deleted file mode 100644 index 86d943a9b2..0000000000 --- a/packages/angular/integration/ng11/.gitignore +++ /dev/null @@ -1,46 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# compiled output -/dist -/tmp -/out-tsc -# Only exists if Bazel was run -/bazel-out - -# dependencies -/node_modules - -# profiling files -chrome-profiler-events*.json -speed-measure-plugin*.json - -# IDEs and editors -/.idea -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# IDE - VSCode -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# misc -/.sass-cache -/connect.lock -/coverage -/libpeerconnection.log -npm-debug.log -yarn-error.log -testem.log -/typings - -# System Files -.DS_Store -Thumbs.db diff --git a/packages/angular/integration/ng11/README.md b/packages/angular/integration/ng11/README.md deleted file mode 100644 index e6e1afcf3a..0000000000 --- a/packages/angular/integration/ng11/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# Ng11 - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.3. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/packages/angular/integration/ng11/angular.json b/packages/angular/integration/ng11/angular.json deleted file mode 100644 index 3bf47d6729..0000000000 --- a/packages/angular/integration/ng11/angular.json +++ /dev/null @@ -1,134 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "ng11": { - "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - }, - "@schematics/angular:application": { - "strict": true - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/ng11", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "aot": true, - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - }, - "configurations": { - "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" - } - ] - } - } - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "ng11:build" - }, - "configurations": { - "production": { - "browserTarget": "ng11:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "ng11:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "ng11:serve" - }, - "configurations": { - "production": { - "devServerTarget": "ng11:serve:production" - } - } - } - } - } - }, - "defaultProject": "ng11", - "cli": { - "analytics": false - } -} diff --git a/packages/angular/integration/ng11/e2e/protractor.conf.js b/packages/angular/integration/ng11/e2e/protractor.conf.js deleted file mode 100644 index 4f53978ed3..0000000000 --- a/packages/angular/integration/ng11/e2e/protractor.conf.js +++ /dev/null @@ -1,37 +0,0 @@ -// @ts-check -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); - -/** - * @type { import("protractor").Config } - */ -exports.config = { - allScriptsTimeout: 11000, - specs: ['./src/**/*.e2e-spec.ts'], - capabilities: { - browserName: 'chrome', - }, - directConnect: true, - SELENIUM_PROMISE_MANAGER: false, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function () {}, - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json'), - }); - jasmine.getEnv().addReporter( - new SpecReporter({ - spec: { - displayStacktrace: StacktraceOption.PRETTY, - }, - }) - ); - }, -}; diff --git a/packages/angular/integration/ng11/e2e/src/app.e2e-spec.ts b/packages/angular/integration/ng11/e2e/src/app.e2e-spec.ts deleted file mode 100644 index 94a95b8a34..0000000000 --- a/packages/angular/integration/ng11/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; - -describe('workspace-project App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', async () => { - await page.navigateTo(); - expect(await page.getTitleText()).toEqual('ng11 app is running!'); - }); - - afterEach(async () => { - // Assert that there are no errors emitted from the browser - const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain( - jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry) - ); - }); -}); diff --git a/packages/angular/integration/ng11/e2e/src/app.po.ts b/packages/angular/integration/ng11/e2e/src/app.po.ts deleted file mode 100644 index 2543cee66e..0000000000 --- a/packages/angular/integration/ng11/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - async navigateTo(): Promise { - return browser.get(browser.baseUrl); - } - - async getTitleText(): Promise { - return element(by.css('app-root .content span')).getText(); - } -} diff --git a/packages/angular/integration/ng11/e2e/tsconfig.json b/packages/angular/integration/ng11/e2e/tsconfig.json deleted file mode 100644 index d83a74a5e6..0000000000 --- a/packages/angular/integration/ng11/e2e/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../out-tsc/e2e", - "module": "commonjs", - "target": "es2018", - "types": [ - "jasmine", - "node" - ] - } -} diff --git a/packages/angular/integration/ng11/karma.conf.js b/packages/angular/integration/ng11/karma.conf.js deleted file mode 100644 index ff96d0d4c7..0000000000 --- a/packages/angular/integration/ng11/karma.conf.js +++ /dev/null @@ -1,41 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma'), - ], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false, // leave Jasmine Spec Runner output visible in browser - }, - jasmineHtmlReporter: { - suppressAll: true, // removes the duplicated traces - }, - coverageReporter: { - dir: require('path').join(__dirname, './coverage/ng11'), - subdir: '.', - reporters: [{ type: 'html' }, { type: 'text-summary' }], - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true, - }); -}; diff --git a/packages/angular/integration/ng11/package.json b/packages/angular/integration/ng11/package.json deleted file mode 100644 index da8597d829..0000000000 --- a/packages/angular/integration/ng11/package.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "name": "ng11", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" - }, - "private": true, - "dependencies": { - "@ai-apps/angular": "latest", - "@angular/animations": "~11.0.3", - "@angular/common": "~11.0.3", - "@angular/compiler": "~11.0.3", - "@angular/core": "~11.0.3", - "@angular/forms": "~11.0.3", - "@angular/platform-browser": "~11.0.3", - "@angular/platform-browser-dynamic": "~11.0.3", - "@angular/router": "~11.0.3", - "@carbon/icons-angular": "11.2.1", - "carbon-components": "^10.0.0", - "carbon-components-angular": "latest", - "rxjs": "~6.6.0", - "tslib": "^2.0.0", - "zone.js": "~0.10.2" - }, - "devDependencies": { - "@angular-devkit/build-angular": "~0.1100.3", - "@angular/cli": "~11.0.3", - "@angular/compiler-cli": "~11.0.3", - "@types/jasmine": "~3.6.0", - "@types/node": "^12.11.1", - "codelyzer": "^6.0.0", - "jasmine-core": "~3.6.0", - "jasmine-spec-reporter": "~5.0.0", - "karma": "~5.1.0", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage": "~2.0.3", - "karma-jasmine": "~4.0.0", - "karma-jasmine-html-reporter": "^1.5.0", - "protractor": "~7.0.0", - "ts-node": "~8.3.0", - "tslint": "~6.1.0", - "typescript": "~4.0.2" - } -} diff --git a/packages/angular/integration/ng11/src/app/app-routing.module.ts b/packages/angular/integration/ng11/src/app/app-routing.module.ts deleted file mode 100644 index f9101eaf2e..0000000000 --- a/packages/angular/integration/ng11/src/app/app-routing.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -const routes: Routes = []; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/packages/angular/integration/ng11/src/app/app.component.html b/packages/angular/integration/ng11/src/app/app.component.html deleted file mode 100644 index 08f6ff5f3a..0000000000 --- a/packages/angular/integration/ng11/src/app/app.component.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/angular/integration/ng11/src/app/app.component.scss b/packages/angular/integration/ng11/src/app/app.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng11/src/app/app.component.spec.ts b/packages/angular/integration/ng11/src/app/app.component.spec.ts deleted file mode 100644 index 077fab0dc4..0000000000 --- a/packages/angular/integration/ng11/src/app/app.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; - -import { Dropdown, DropdownModule } from 'carbon-components-angular/dropdown'; -import { Button, ButtonModule } from 'carbon-components-angular'; -import { By } from '@angular/platform-browser'; - -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [RouterTestingModule, ButtonModule, DropdownModule], - declarations: [AppComponent], - }).compileComponents(); - })); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should render an ibmButton`, () => { - const fixture = TestBed.createComponent(AppComponent); - const button = fixture.debugElement.query(By.directive(Button)); - expect((button.nativeElement as HTMLButtonElement).textContent).toEqual('Hello world!'); - }); - - it('should render a dropdown', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const dropdown = fixture.debugElement.query(By.directive(Dropdown)); - expect(dropdown).toBeTruthy(); - }); -}); diff --git a/packages/angular/integration/ng11/src/app/app.component.ts b/packages/angular/integration/ng11/src/app/app.component.ts deleted file mode 100644 index 1c3cebbbdd..0000000000 --- a/packages/angular/integration/ng11/src/app/app.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { AIListItem } from '@ai-apps/angular'; -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], -}) -export class AppComponent { - items = [ - new AIListItem({ value: 'Canada', isSelectable: true }), - new AIListItem({ value: 'Brazil', isSelectable: true }), - new AIListItem({ value: 'Columbia', isSelectable: true }), - new AIListItem({ value: 'United States of America', isSelectable: true }), - new AIListItem({ value: 'Uruguay', isSelectable: true }), - new AIListItem({ value: 'Spain', isSelectable: true }), - ]; -} diff --git a/packages/angular/integration/ng11/src/app/app.module.ts b/packages/angular/integration/ng11/src/app/app.module.ts deleted file mode 100644 index 5a6380d689..0000000000 --- a/packages/angular/integration/ng11/src/app/app.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; - -import { ContextMenuModule, DialogModule, IconModule } from 'carbon-components-angular'; -import { ButtonMenuModule, ListModule } from '@ai-apps/angular'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - AppRoutingModule, - ButtonMenuModule, - ListModule, - ContextMenuModule, - DialogModule, - IconModule, - ], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/packages/angular/integration/ng11/src/assets/.gitkeep b/packages/angular/integration/ng11/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng11/src/environments/environment.prod.ts b/packages/angular/integration/ng11/src/environments/environment.prod.ts deleted file mode 100644 index d65fc9d9b2..0000000000 --- a/packages/angular/integration/ng11/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true, -}; diff --git a/packages/angular/integration/ng11/src/environments/environment.ts b/packages/angular/integration/ng11/src/environments/environment.ts deleted file mode 100644 index 05425a705a..0000000000 --- a/packages/angular/integration/ng11/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/packages/angular/integration/ng11/src/favicon.ico b/packages/angular/integration/ng11/src/favicon.ico deleted file mode 100644 index 997406ad22..0000000000 Binary files a/packages/angular/integration/ng11/src/favicon.ico and /dev/null differ diff --git a/packages/angular/integration/ng11/src/index.html b/packages/angular/integration/ng11/src/index.html deleted file mode 100644 index 6e5ec76407..0000000000 --- a/packages/angular/integration/ng11/src/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - Ng11 - - - - - - - - - - diff --git a/packages/angular/integration/ng11/src/main.ts b/packages/angular/integration/ng11/src/main.ts deleted file mode 100644 index 9bd6fb69f4..0000000000 --- a/packages/angular/integration/ng11/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); diff --git a/packages/angular/integration/ng11/src/polyfills.ts b/packages/angular/integration/ng11/src/polyfills.ts deleted file mode 100644 index c5f27446d3..0000000000 --- a/packages/angular/integration/ng11/src/polyfills.ts +++ /dev/null @@ -1,62 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/packages/angular/integration/ng11/src/styles.scss b/packages/angular/integration/ng11/src/styles.scss deleted file mode 100644 index fb4e763e1d..0000000000 --- a/packages/angular/integration/ng11/src/styles.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ -@import '../node_modules/@ai-apps/styles/css/ai-apps-pal.css'; diff --git a/packages/angular/integration/ng11/src/test.ts b/packages/angular/integration/ng11/src/test.ts deleted file mode 100644 index 28b358a5cb..0000000000 --- a/packages/angular/integration/ng11/src/test.ts +++ /dev/null @@ -1,26 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: { - context( - path: string, - deep?: boolean, - filter?: RegExp - ): { - keys(): string[]; - (id: string): T; - }; -}; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/packages/angular/integration/ng11/tsconfig.app.json b/packages/angular/integration/ng11/tsconfig.app.json deleted file mode 100644 index 90880d5708..0000000000 --- a/packages/angular/integration/ng11/tsconfig.app.json +++ /dev/null @@ -1,15 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/app", - "types": [] - }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng11/tsconfig.json b/packages/angular/integration/ng11/tsconfig.json deleted file mode 100644 index 4c0f27fc8b..0000000000 --- a/packages/angular/integration/ng11/tsconfig.json +++ /dev/null @@ -1,29 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "compileOnSave": false, - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "moduleResolution": "node", - "importHelpers": true, - "target": "es2015", - "module": "es2020", - "lib": [ - "es2018", - "dom" - ] - }, - "angularCompilerOptions": { - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } -} diff --git a/packages/angular/integration/ng11/tsconfig.spec.json b/packages/angular/integration/ng11/tsconfig.spec.json deleted file mode 100644 index c1fdd7e6c9..0000000000 --- a/packages/angular/integration/ng11/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": [ - "jasmine" - ] - }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng11/tslint.json b/packages/angular/integration/ng11/tslint.json deleted file mode 100644 index b4ed449b77..0000000000 --- a/packages/angular/integration/ng11/tslint.json +++ /dev/null @@ -1,152 +0,0 @@ -{ - "extends": "tslint:recommended", - "rulesDirectory": [ - "codelyzer" - ], - "rules": { - "align": { - "options": [ - "parameters", - "statements" - ] - }, - "array-type": false, - "arrow-return-shorthand": true, - "curly": true, - "deprecation": { - "severity": "warning" - }, - "eofline": true, - "import-blacklist": [ - true, - "rxjs/Rx" - ], - "import-spacing": true, - "indent": { - "options": [ - "spaces" - ] - }, - "max-classes-per-file": false, - "max-line-length": [ - true, - 140 - ], - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-empty": false, - "no-inferrable-types": [ - true, - "ignore-params" - ], - "no-non-null-assertion": true, - "no-redundant-jsdoc": true, - "no-switch-case-fall-through": true, - "no-var-requires": false, - "object-literal-key-quotes": [ - true, - "as-needed" - ], - "quotemark": [ - true, - "single" - ], - "semicolon": { - "options": [ - "always" - ] - }, - "space-before-function-paren": { - "options": { - "anonymous": "never", - "asyncArrow": "always", - "constructor": "never", - "method": "never", - "named": "never" - } - }, - "typedef": [ - true, - "call-signature" - ], - "typedef-whitespace": { - "options": [ - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - }, - { - "call-signature": "onespace", - "index-signature": "onespace", - "parameter": "onespace", - "property-declaration": "onespace", - "variable-declaration": "onespace" - } - ] - }, - "variable-name": { - "options": [ - "ban-keywords", - "check-format", - "allow-pascal-case" - ] - }, - "whitespace": { - "options": [ - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type", - "check-typecast" - ] - }, - "component-class-suffix": true, - "contextual-lifecycle": true, - "directive-class-suffix": true, - "no-conflicting-lifecycle": true, - "no-host-metadata-property": true, - "no-input-rename": true, - "no-inputs-metadata-property": true, - "no-output-native": true, - "no-output-on-prefix": true, - "no-output-rename": true, - "no-outputs-metadata-property": true, - "template-banana-in-box": true, - "template-no-negated-async": true, - "use-lifecycle-interface": true, - "use-pipe-transform-interface": true, - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ] - } -} diff --git a/packages/angular/integration/ng12/.browserslistrc b/packages/angular/integration/ng12/.browserslistrc deleted file mode 100644 index 427441dc93..0000000000 --- a/packages/angular/integration/ng12/.browserslistrc +++ /dev/null @@ -1,17 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/packages/angular/integration/ng12/.editorconfig b/packages/angular/integration/ng12/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/packages/angular/integration/ng12/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# Editor configuration, see https://editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -insert_final_newline = true -trim_trailing_whitespace = true - -[*.ts] -quote_type = single - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/packages/angular/integration/ng12/.gitignore b/packages/angular/integration/ng12/.gitignore deleted file mode 100644 index de51f68a2c..0000000000 --- a/packages/angular/integration/ng12/.gitignore +++ /dev/null @@ -1,45 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# compiled output -/dist -/tmp -/out-tsc -# Only exists if Bazel was run -/bazel-out - -# dependencies -/node_modules - -# profiling files -chrome-profiler-events*.json - -# IDEs and editors -/.idea -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# IDE - VSCode -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# misc -/.sass-cache -/connect.lock -/coverage -/libpeerconnection.log -npm-debug.log -yarn-error.log -testem.log -/typings - -# System Files -.DS_Store -Thumbs.db diff --git a/packages/angular/integration/ng12/README.md b/packages/angular/integration/ng12/README.md deleted file mode 100644 index 0a292d6c10..0000000000 --- a/packages/angular/integration/ng12/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# Ng12 - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.18. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/packages/angular/integration/ng12/angular.json b/packages/angular/integration/ng12/angular.json deleted file mode 100644 index 02d80846e2..0000000000 --- a/packages/angular/integration/ng12/angular.json +++ /dev/null @@ -1,111 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "ng12": { - "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - }, - "@schematics/angular:application": { - "strict": true - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/ng12", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" - } - ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "outputHashing": "all" - }, - "development": { - "buildOptimizer": false, - "optimization": false, - "vendorChunk": true, - "extractLicenses": false, - "sourceMap": true, - "namedChunks": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "configurations": { - "production": { - "browserTarget": "ng12:build:production" - }, - "development": { - "browserTarget": "ng12:build:development" - } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "ng12:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - } - } - } - } - }, - "defaultProject": "ng12" -} diff --git a/packages/angular/integration/ng12/karma.conf.js b/packages/angular/integration/ng12/karma.conf.js deleted file mode 100644 index aeeb138e4c..0000000000 --- a/packages/angular/integration/ng12/karma.conf.js +++ /dev/null @@ -1,41 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma'), - ], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false, // leave Jasmine Spec Runner output visible in browser - }, - jasmineHtmlReporter: { - suppressAll: true, // removes the duplicated traces - }, - coverageReporter: { - dir: require('path').join(__dirname, './coverage/ng12'), - subdir: '.', - reporters: [{ type: 'html' }, { type: 'text-summary' }], - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true, - }); -}; diff --git a/packages/angular/integration/ng12/package.json b/packages/angular/integration/ng12/package.json deleted file mode 100644 index 951a8a4abc..0000000000 --- a/packages/angular/integration/ng12/package.json +++ /dev/null @@ -1,43 +0,0 @@ -{ - "name": "ng12", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test" - }, - "private": true, - "dependencies": { - "@ai-apps/angular": "latest", - "@angular/animations": "~12.2.0", - "@angular/common": "~12.2.0", - "@angular/compiler": "~12.2.0", - "@angular/core": "~12.2.0", - "@angular/forms": "~12.2.0", - "@angular/platform-browser": "~12.2.0", - "@angular/platform-browser-dynamic": "~12.2.0", - "@angular/router": "~12.2.0", - "rxjs": "~6.6.0", - "tslib": "^2.3.0", - "zone.js": "~0.11.4", - "carbon-components": "^10.0.0", - "@carbon/icons-angular": "11.2.1", - "carbon-components-angular": "latest" - }, - "devDependencies": { - "@angular-devkit/build-angular": "~12.2.18", - "@angular/cli": "~12.2.18", - "@angular/compiler-cli": "~12.2.0", - "@types/jasmine": "~3.8.0", - "@types/node": "^12.11.1", - "jasmine-core": "~3.8.0", - "karma": "~6.3.0", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage": "~2.0.3", - "karma-jasmine": "~4.0.0", - "karma-jasmine-html-reporter": "~1.7.0", - "typescript": "~4.3.5" - } -} diff --git a/packages/angular/integration/ng12/src/app/app-routing.module.ts b/packages/angular/integration/ng12/src/app/app-routing.module.ts deleted file mode 100644 index f3daf250ad..0000000000 --- a/packages/angular/integration/ng12/src/app/app-routing.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -const routes: Routes = []; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/packages/angular/integration/ng12/src/app/app.component.html b/packages/angular/integration/ng12/src/app/app.component.html deleted file mode 100644 index 08f6ff5f3a..0000000000 --- a/packages/angular/integration/ng12/src/app/app.component.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/angular/integration/ng12/src/app/app.component.scss b/packages/angular/integration/ng12/src/app/app.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng12/src/app/app.component.spec.ts b/packages/angular/integration/ng12/src/app/app.component.spec.ts deleted file mode 100644 index e26cbb5486..0000000000 --- a/packages/angular/integration/ng12/src/app/app.component.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [RouterTestingModule], - declarations: [AppComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'ng12'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('ng12'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('ng12 app is running!'); - }); -}); diff --git a/packages/angular/integration/ng12/src/app/app.component.ts b/packages/angular/integration/ng12/src/app/app.component.ts deleted file mode 100644 index bfcd24082b..0000000000 --- a/packages/angular/integration/ng12/src/app/app.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { AIListItem } from '@ai-apps/angular'; -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], -}) -export class AppComponent { - items = [ - new AIListItem({ value: 'Canada', isSelectable: true }), - new AIListItem({ value: 'Brazil', isSelectable: true }), - new AIListItem({ value: 'Columbia', isSelectable: true }), - new AIListItem({ value: 'United States of America', isSelectable: true }), - new AIListItem({ value: 'Uruguay', isSelectable: true }), - new AIListItem({ value: 'Spain', isSelectable: true }), - ]; -} diff --git a/packages/angular/integration/ng12/src/app/app.module.ts b/packages/angular/integration/ng12/src/app/app.module.ts deleted file mode 100644 index 522fb3341d..0000000000 --- a/packages/angular/integration/ng12/src/app/app.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; - -import { ContextMenuModule, DialogModule, IconModule } from 'carbon-components-angular'; -import { ButtonMenuModule, ListModule } from '@ai-apps/angular'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - AppRoutingModule, - ButtonMenuModule, - ListModule, - ContextMenuModule, - DialogModule, - IconModule, - ], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/packages/angular/integration/ng12/src/assets/.gitkeep b/packages/angular/integration/ng12/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng12/src/environments/environment.prod.ts b/packages/angular/integration/ng12/src/environments/environment.prod.ts deleted file mode 100644 index c9669790be..0000000000 --- a/packages/angular/integration/ng12/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true, -}; diff --git a/packages/angular/integration/ng12/src/environments/environment.ts b/packages/angular/integration/ng12/src/environments/environment.ts deleted file mode 100644 index 66998ae9a7..0000000000 --- a/packages/angular/integration/ng12/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/packages/angular/integration/ng12/src/favicon.ico b/packages/angular/integration/ng12/src/favicon.ico deleted file mode 100644 index 997406ad22..0000000000 Binary files a/packages/angular/integration/ng12/src/favicon.ico and /dev/null differ diff --git a/packages/angular/integration/ng12/src/index.html b/packages/angular/integration/ng12/src/index.html deleted file mode 100644 index 1df4c602bb..0000000000 --- a/packages/angular/integration/ng12/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Ng12 - - - - - - - - diff --git a/packages/angular/integration/ng12/src/main.ts b/packages/angular/integration/ng12/src/main.ts deleted file mode 100644 index d9a2e7e4a5..0000000000 --- a/packages/angular/integration/ng12/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); diff --git a/packages/angular/integration/ng12/src/polyfills.ts b/packages/angular/integration/ng12/src/polyfills.ts deleted file mode 100644 index 8a120c374d..0000000000 --- a/packages/angular/integration/ng12/src/polyfills.ts +++ /dev/null @@ -1,64 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** - * IE11 requires the following for NgClass support on SVG elements - */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/packages/angular/integration/ng12/src/styles.scss b/packages/angular/integration/ng12/src/styles.scss deleted file mode 100644 index fb4e763e1d..0000000000 --- a/packages/angular/integration/ng12/src/styles.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ -@import '../node_modules/@ai-apps/styles/css/ai-apps-pal.css'; diff --git a/packages/angular/integration/ng12/src/test.ts b/packages/angular/integration/ng12/src/test.ts deleted file mode 100644 index cd677a111d..0000000000 --- a/packages/angular/integration/ng12/src/test.ts +++ /dev/null @@ -1,29 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: { - context( - path: string, - deep?: boolean, - filter?: RegExp - ): { - keys(): string[]; - (id: string): T; - }; -}; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { - teardown: { destroyAfterEach: true }, -}); - -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/packages/angular/integration/ng12/tsconfig.app.json b/packages/angular/integration/ng12/tsconfig.app.json deleted file mode 100644 index 82d91dc4a4..0000000000 --- a/packages/angular/integration/ng12/tsconfig.app.json +++ /dev/null @@ -1,15 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/app", - "types": [] - }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng12/tsconfig.json b/packages/angular/integration/ng12/tsconfig.json deleted file mode 100644 index 6df828326e..0000000000 --- a/packages/angular/integration/ng12/tsconfig.json +++ /dev/null @@ -1,30 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "compileOnSave": false, - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "moduleResolution": "node", - "importHelpers": true, - "target": "es2017", - "module": "es2020", - "lib": [ - "es2018", - "dom" - ] - }, - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } -} diff --git a/packages/angular/integration/ng12/tsconfig.spec.json b/packages/angular/integration/ng12/tsconfig.spec.json deleted file mode 100644 index 092345b02e..0000000000 --- a/packages/angular/integration/ng12/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": [ - "jasmine" - ] - }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng13/.browserslistrc b/packages/angular/integration/ng13/.browserslistrc deleted file mode 100644 index 4f9ac26980..0000000000 --- a/packages/angular/integration/ng13/.browserslistrc +++ /dev/null @@ -1,16 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR diff --git a/packages/angular/integration/ng13/.editorconfig b/packages/angular/integration/ng13/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/packages/angular/integration/ng13/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# Editor configuration, see https://editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -insert_final_newline = true -trim_trailing_whitespace = true - -[*.ts] -quote_type = single - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/packages/angular/integration/ng13/.gitignore b/packages/angular/integration/ng13/.gitignore deleted file mode 100644 index 0711527ef9..0000000000 --- a/packages/angular/integration/ng13/.gitignore +++ /dev/null @@ -1,42 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# Compiled output -/dist -/tmp -/out-tsc -/bazel-out - -# Node -/node_modules -npm-debug.log -yarn-error.log - -# IDEs and editors -.idea/ -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# Visual Studio Code -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# Miscellaneous -/.angular/cache -.sass-cache/ -/connect.lock -/coverage -/libpeerconnection.log -testem.log -/typings - -# System files -.DS_Store -Thumbs.db diff --git a/packages/angular/integration/ng13/README.md b/packages/angular/integration/ng13/README.md deleted file mode 100644 index 57a11dbadd..0000000000 --- a/packages/angular/integration/ng13/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# Ng13 - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.3. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/packages/angular/integration/ng13/angular.json b/packages/angular/integration/ng13/angular.json deleted file mode 100644 index 3953fc8a9f..0000000000 --- a/packages/angular/integration/ng13/angular.json +++ /dev/null @@ -1,107 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "ng13": { - "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/ng13", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" - } - ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "outputHashing": "all" - }, - "development": { - "buildOptimizer": false, - "optimization": false, - "vendorChunk": true, - "extractLicenses": false, - "sourceMap": true, - "namedChunks": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "configurations": { - "production": { - "browserTarget": "ng13:build:production" - }, - "development": { - "browserTarget": "ng13:build:development" - } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "ng13:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - } - } - } - } - } -} diff --git a/packages/angular/integration/ng13/karma.conf.js b/packages/angular/integration/ng13/karma.conf.js deleted file mode 100644 index afba8c8dc7..0000000000 --- a/packages/angular/integration/ng13/karma.conf.js +++ /dev/null @@ -1,41 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma'), - ], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false, // leave Jasmine Spec Runner output visible in browser - }, - jasmineHtmlReporter: { - suppressAll: true, // removes the duplicated traces - }, - coverageReporter: { - dir: require('path').join(__dirname, './coverage/ng13'), - subdir: '.', - reporters: [{ type: 'html' }, { type: 'text-summary' }], - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true, - }); -}; diff --git a/packages/angular/integration/ng13/package.json b/packages/angular/integration/ng13/package.json deleted file mode 100644 index 353d87dfa3..0000000000 --- a/packages/angular/integration/ng13/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "ng13", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test" - }, - "private": true, - "dependencies": { - "@ai-apps/angular": "latest", - "@angular/animations": "^14.1.0", - "@angular/common": "^14.1.0", - "@angular/compiler": "^14.1.0", - "@angular/core": "^14.1.0", - "@angular/forms": "^14.1.0", - "@angular/platform-browser": "^14.1.0", - "@angular/platform-browser-dynamic": "^14.1.0", - "@angular/router": "^14.1.0", - "rxjs": "~7.5.0", - "tslib": "^2.3.0", - "zone.js": "~0.11.4", - "carbon-components": "^10.0.0", - "@carbon/icons-angular": "11.2.1", - "carbon-components-angular": "latest" - }, - "devDependencies": { - "@angular-devkit/build-angular": "^14.1.3", - "@angular/cli": "~14.1.3", - "@angular/compiler-cli": "^14.1.0", - "@types/jasmine": "~4.0.0", - "jasmine-core": "~4.2.0", - "karma": "~6.4.0", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage": "~2.2.0", - "karma-jasmine": "~5.1.0", - "karma-jasmine-html-reporter": "~2.0.0", - "typescript": "~4.7.2" - } -} diff --git a/packages/angular/integration/ng13/src/app/app-routing.module.ts b/packages/angular/integration/ng13/src/app/app-routing.module.ts deleted file mode 100644 index f3daf250ad..0000000000 --- a/packages/angular/integration/ng13/src/app/app-routing.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -const routes: Routes = []; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/packages/angular/integration/ng13/src/app/app.component.html b/packages/angular/integration/ng13/src/app/app.component.html deleted file mode 100644 index 08f6ff5f3a..0000000000 --- a/packages/angular/integration/ng13/src/app/app.component.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/angular/integration/ng13/src/app/app.component.scss b/packages/angular/integration/ng13/src/app/app.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng13/src/app/app.component.spec.ts b/packages/angular/integration/ng13/src/app/app.component.spec.ts deleted file mode 100644 index 6ab89f484b..0000000000 --- a/packages/angular/integration/ng13/src/app/app.component.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [RouterTestingModule], - declarations: [AppComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'ng13'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('ng13'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('ng13 app is running!'); - }); -}); diff --git a/packages/angular/integration/ng13/src/app/app.component.ts b/packages/angular/integration/ng13/src/app/app.component.ts deleted file mode 100644 index bfcd24082b..0000000000 --- a/packages/angular/integration/ng13/src/app/app.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { AIListItem } from '@ai-apps/angular'; -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], -}) -export class AppComponent { - items = [ - new AIListItem({ value: 'Canada', isSelectable: true }), - new AIListItem({ value: 'Brazil', isSelectable: true }), - new AIListItem({ value: 'Columbia', isSelectable: true }), - new AIListItem({ value: 'United States of America', isSelectable: true }), - new AIListItem({ value: 'Uruguay', isSelectable: true }), - new AIListItem({ value: 'Spain', isSelectable: true }), - ]; -} diff --git a/packages/angular/integration/ng13/src/app/app.module.ts b/packages/angular/integration/ng13/src/app/app.module.ts deleted file mode 100644 index 522fb3341d..0000000000 --- a/packages/angular/integration/ng13/src/app/app.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; - -import { ContextMenuModule, DialogModule, IconModule } from 'carbon-components-angular'; -import { ButtonMenuModule, ListModule } from '@ai-apps/angular'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - AppRoutingModule, - ButtonMenuModule, - ListModule, - ContextMenuModule, - DialogModule, - IconModule, - ], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/packages/angular/integration/ng13/src/assets/.gitkeep b/packages/angular/integration/ng13/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng13/src/environments/environment.prod.ts b/packages/angular/integration/ng13/src/environments/environment.prod.ts deleted file mode 100644 index c9669790be..0000000000 --- a/packages/angular/integration/ng13/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true, -}; diff --git a/packages/angular/integration/ng13/src/environments/environment.ts b/packages/angular/integration/ng13/src/environments/environment.ts deleted file mode 100644 index 66998ae9a7..0000000000 --- a/packages/angular/integration/ng13/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/packages/angular/integration/ng13/src/favicon.ico b/packages/angular/integration/ng13/src/favicon.ico deleted file mode 100644 index 997406ad22..0000000000 Binary files a/packages/angular/integration/ng13/src/favicon.ico and /dev/null differ diff --git a/packages/angular/integration/ng13/src/index.html b/packages/angular/integration/ng13/src/index.html deleted file mode 100644 index 26ab9f964d..0000000000 --- a/packages/angular/integration/ng13/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Ng13 - - - - - - - - diff --git a/packages/angular/integration/ng13/src/main.ts b/packages/angular/integration/ng13/src/main.ts deleted file mode 100644 index d9a2e7e4a5..0000000000 --- a/packages/angular/integration/ng13/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); diff --git a/packages/angular/integration/ng13/src/polyfills.ts b/packages/angular/integration/ng13/src/polyfills.ts deleted file mode 100644 index e4555ed11f..0000000000 --- a/packages/angular/integration/ng13/src/polyfills.ts +++ /dev/null @@ -1,52 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes recent versions of Safari, Chrome (including - * Opera), Edge on the desktop, and iOS and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/packages/angular/integration/ng13/src/styles.scss b/packages/angular/integration/ng13/src/styles.scss deleted file mode 100644 index fb4e763e1d..0000000000 --- a/packages/angular/integration/ng13/src/styles.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ -@import '../node_modules/@ai-apps/styles/css/ai-apps-pal.css'; diff --git a/packages/angular/integration/ng13/src/test.ts b/packages/angular/integration/ng13/src/test.ts deleted file mode 100644 index d3ddc29a97..0000000000 --- a/packages/angular/integration/ng13/src/test.ts +++ /dev/null @@ -1,27 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: { - context( - path: string, - deep?: boolean, - filter?: RegExp - ): { - (id: string): T; - keys(): string[]; - }; -}; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); - -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().forEach(context); diff --git a/packages/angular/integration/ng13/tsconfig.app.json b/packages/angular/integration/ng13/tsconfig.app.json deleted file mode 100644 index 82d91dc4a4..0000000000 --- a/packages/angular/integration/ng13/tsconfig.app.json +++ /dev/null @@ -1,15 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/app", - "types": [] - }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng13/tsconfig.json b/packages/angular/integration/ng13/tsconfig.json deleted file mode 100644 index ff06eae10c..0000000000 --- a/packages/angular/integration/ng13/tsconfig.json +++ /dev/null @@ -1,32 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "compileOnSave": false, - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "moduleResolution": "node", - "importHelpers": true, - "target": "es2020", - "module": "es2020", - "lib": [ - "es2020", - "dom" - ] - }, - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } -} diff --git a/packages/angular/integration/ng13/tsconfig.spec.json b/packages/angular/integration/ng13/tsconfig.spec.json deleted file mode 100644 index 092345b02e..0000000000 --- a/packages/angular/integration/ng13/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": [ - "jasmine" - ] - }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng9/.editorconfig b/packages/angular/integration/ng9/.editorconfig deleted file mode 100644 index f2b32d9f28..0000000000 --- a/packages/angular/integration/ng9/.editorconfig +++ /dev/null @@ -1,17 +0,0 @@ -# Editor configuration, see https://editorconfig.org -root = true - -[*] -charset = utf-8 -end_of_file = lf -indent_style = tab -indent_size = 4 -trim_trailing_whitespace = true -insert_final_newline = true - -[*.ts] -quote_type = single - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/packages/angular/integration/ng9/.gitignore b/packages/angular/integration/ng9/.gitignore deleted file mode 100644 index 86d943a9b2..0000000000 --- a/packages/angular/integration/ng9/.gitignore +++ /dev/null @@ -1,46 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# compiled output -/dist -/tmp -/out-tsc -# Only exists if Bazel was run -/bazel-out - -# dependencies -/node_modules - -# profiling files -chrome-profiler-events*.json -speed-measure-plugin*.json - -# IDEs and editors -/.idea -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# IDE - VSCode -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# misc -/.sass-cache -/connect.lock -/coverage -/libpeerconnection.log -npm-debug.log -yarn-error.log -testem.log -/typings - -# System Files -.DS_Store -Thumbs.db diff --git a/packages/angular/integration/ng9/README.md b/packages/angular/integration/ng9/README.md deleted file mode 100644 index 3ccb2005ba..0000000000 --- a/packages/angular/integration/ng9/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# Ng9 - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.12. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/packages/angular/integration/ng9/angular.json b/packages/angular/integration/ng9/angular.json deleted file mode 100644 index 72d9fd7399..0000000000 --- a/packages/angular/integration/ng9/angular.json +++ /dev/null @@ -1,132 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "ng9": { - "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/ng9", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "aot": true, - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - }, - "configurations": { - "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "5mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "6kb", - "maximumError": "10kb" - } - ] - } - } - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "ng9:build" - }, - "configurations": { - "production": { - "browserTarget": "ng9:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "ng9:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "ng9:serve" - }, - "configurations": { - "production": { - "devServerTarget": "ng9:serve:production" - } - } - } - } - } - }, - "defaultProject": "ng9", - "cli": { - "analytics": false - } -} diff --git a/packages/angular/integration/ng9/browserslist b/packages/angular/integration/ng9/browserslist deleted file mode 100644 index 80848532e4..0000000000 --- a/packages/angular/integration/ng9/browserslist +++ /dev/null @@ -1,12 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -> 0.5% -last 2 versions -Firefox ESR -not dead -not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/packages/angular/integration/ng9/e2e/protractor.conf.js b/packages/angular/integration/ng9/e2e/protractor.conf.js deleted file mode 100644 index ebe1da4c13..0000000000 --- a/packages/angular/integration/ng9/e2e/protractor.conf.js +++ /dev/null @@ -1,30 +0,0 @@ -// @ts-check -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter } = require('jasmine-spec-reporter'); - -/** - * @type { import("protractor").Config } - */ -exports.config = { - allScriptsTimeout: 11000, - specs: ['./src/**/*.e2e-spec.ts'], - capabilities: { - browserName: 'chrome', - }, - directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function () {}, - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json'), - }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); - }, -}; diff --git a/packages/angular/integration/ng9/e2e/src/app.e2e-spec.ts b/packages/angular/integration/ng9/e2e/src/app.e2e-spec.ts deleted file mode 100644 index a50e0cdd7e..0000000000 --- a/packages/angular/integration/ng9/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; - -describe('workspace-project App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('ng9 app is running!'); - }); - - afterEach(async () => { - // Assert that there are no errors emitted from the browser - const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain( - jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry) - ); - }); -}); diff --git a/packages/angular/integration/ng9/e2e/src/app.po.ts b/packages/angular/integration/ng9/e2e/src/app.po.ts deleted file mode 100644 index 19f0476681..0000000000 --- a/packages/angular/integration/ng9/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - navigateTo(): Promise { - return browser.get(browser.baseUrl) as Promise; - } - - getTitleText(): Promise { - return element(by.css('app-root .content span')).getText() as Promise; - } -} diff --git a/packages/angular/integration/ng9/e2e/tsconfig.json b/packages/angular/integration/ng9/e2e/tsconfig.json deleted file mode 100644 index f5e711ae28..0000000000 --- a/packages/angular/integration/ng9/e2e/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../out-tsc/e2e", - "module": "commonjs", - "target": "es5", - "types": [ - "jasmine", - "jasminewd2", - "node" - ] - } -} diff --git a/packages/angular/integration/ng9/karma.conf.js b/packages/angular/integration/ng9/karma.conf.js deleted file mode 100644 index a53f5beb56..0000000000 --- a/packages/angular/integration/ng9/karma.conf.js +++ /dev/null @@ -1,32 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma'), - ], - client: { - clearContext: false, // leave Jasmine Spec Runner output visible in browser - }, - coverageIstanbulReporter: { - dir: require('path').join(__dirname, './coverage/ng9'), - reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true, - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true, - }); -}; diff --git a/packages/angular/integration/ng9/package.json b/packages/angular/integration/ng9/package.json deleted file mode 100644 index 6abd68f859..0000000000 --- a/packages/angular/integration/ng9/package.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "name": "ng9", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" - }, - "private": true, - "dependencies": { - "@ai-apps/angular": "latest", - "@angular/animations": "~9.1.12", - "@angular/common": "~9.1.12", - "@angular/compiler": "~9.1.12", - "@angular/core": "~9.1.12", - "@angular/forms": "~9.1.12", - "@angular/platform-browser": "~9.1.12", - "@angular/platform-browser-dynamic": "~9.1.12", - "@angular/router": "~9.1.12", - "rxjs": "~6.5.4", - "tslib": "^1.10.0", - "zone.js": "~0.10.2", - "carbon-components": "^10.0.0", - "@carbon/icons-angular": "11.2.1", - "carbon-components-angular": "latest" - }, - "devDependencies": { - "@angular-devkit/build-angular": "~0.901.12", - "@angular/cli": "~9.1.12", - "@angular/compiler-cli": "~9.1.12", - "@types/node": "^12.11.1", - "@types/jasmine": "~3.5.0", - "@types/jasminewd2": "~2.0.3", - "codelyzer": "^5.1.2", - "jasmine-core": "~3.5.0", - "jasmine-spec-reporter": "~4.2.1", - "karma": "~5.0.0", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage-istanbul-reporter": "~2.1.0", - "karma-jasmine": "~3.0.1", - "karma-jasmine-html-reporter": "^1.4.2", - "protractor": "~7.0.0", - "ts-node": "~8.3.0", - "tslint": "~6.1.0", - "typescript": "~3.8.3" - } -} diff --git a/packages/angular/integration/ng9/src/app/app-routing.module.ts b/packages/angular/integration/ng9/src/app/app-routing.module.ts deleted file mode 100644 index f9101eaf2e..0000000000 --- a/packages/angular/integration/ng9/src/app/app-routing.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -const routes: Routes = []; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/packages/angular/integration/ng9/src/app/app.component.html b/packages/angular/integration/ng9/src/app/app.component.html deleted file mode 100644 index 08f6ff5f3a..0000000000 --- a/packages/angular/integration/ng9/src/app/app.component.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/angular/integration/ng9/src/app/app.component.scss b/packages/angular/integration/ng9/src/app/app.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng9/src/app/app.component.spec.ts b/packages/angular/integration/ng9/src/app/app.component.spec.ts deleted file mode 100644 index 077fab0dc4..0000000000 --- a/packages/angular/integration/ng9/src/app/app.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; - -import { Dropdown, DropdownModule } from 'carbon-components-angular/dropdown'; -import { Button, ButtonModule } from 'carbon-components-angular'; -import { By } from '@angular/platform-browser'; - -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [RouterTestingModule, ButtonModule, DropdownModule], - declarations: [AppComponent], - }).compileComponents(); - })); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should render an ibmButton`, () => { - const fixture = TestBed.createComponent(AppComponent); - const button = fixture.debugElement.query(By.directive(Button)); - expect((button.nativeElement as HTMLButtonElement).textContent).toEqual('Hello world!'); - }); - - it('should render a dropdown', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const dropdown = fixture.debugElement.query(By.directive(Dropdown)); - expect(dropdown).toBeTruthy(); - }); -}); diff --git a/packages/angular/integration/ng9/src/app/app.component.ts b/packages/angular/integration/ng9/src/app/app.component.ts deleted file mode 100644 index 1c3cebbbdd..0000000000 --- a/packages/angular/integration/ng9/src/app/app.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { AIListItem } from '@ai-apps/angular'; -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], -}) -export class AppComponent { - items = [ - new AIListItem({ value: 'Canada', isSelectable: true }), - new AIListItem({ value: 'Brazil', isSelectable: true }), - new AIListItem({ value: 'Columbia', isSelectable: true }), - new AIListItem({ value: 'United States of America', isSelectable: true }), - new AIListItem({ value: 'Uruguay', isSelectable: true }), - new AIListItem({ value: 'Spain', isSelectable: true }), - ]; -} diff --git a/packages/angular/integration/ng9/src/app/app.module.ts b/packages/angular/integration/ng9/src/app/app.module.ts deleted file mode 100644 index 5a6380d689..0000000000 --- a/packages/angular/integration/ng9/src/app/app.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; - -import { ContextMenuModule, DialogModule, IconModule } from 'carbon-components-angular'; -import { ButtonMenuModule, ListModule } from '@ai-apps/angular'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - AppRoutingModule, - ButtonMenuModule, - ListModule, - ContextMenuModule, - DialogModule, - IconModule, - ], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/packages/angular/integration/ng9/src/assets/.gitkeep b/packages/angular/integration/ng9/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/angular/integration/ng9/src/environments/environment.prod.ts b/packages/angular/integration/ng9/src/environments/environment.prod.ts deleted file mode 100644 index d65fc9d9b2..0000000000 --- a/packages/angular/integration/ng9/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true, -}; diff --git a/packages/angular/integration/ng9/src/environments/environment.ts b/packages/angular/integration/ng9/src/environments/environment.ts deleted file mode 100644 index 05425a705a..0000000000 --- a/packages/angular/integration/ng9/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/packages/angular/integration/ng9/src/favicon.ico b/packages/angular/integration/ng9/src/favicon.ico deleted file mode 100644 index 997406ad22..0000000000 Binary files a/packages/angular/integration/ng9/src/favicon.ico and /dev/null differ diff --git a/packages/angular/integration/ng9/src/index.html b/packages/angular/integration/ng9/src/index.html deleted file mode 100644 index 919f8e40d3..0000000000 --- a/packages/angular/integration/ng9/src/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - Ng9 - - - - - - - - - - diff --git a/packages/angular/integration/ng9/src/main.ts b/packages/angular/integration/ng9/src/main.ts deleted file mode 100644 index 9bd6fb69f4..0000000000 --- a/packages/angular/integration/ng9/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); diff --git a/packages/angular/integration/ng9/src/polyfills.ts b/packages/angular/integration/ng9/src/polyfills.ts deleted file mode 100644 index e49856ec90..0000000000 --- a/packages/angular/integration/ng9/src/polyfills.ts +++ /dev/null @@ -1,62 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/packages/angular/integration/ng9/src/styles.scss b/packages/angular/integration/ng9/src/styles.scss deleted file mode 100644 index fb4e763e1d..0000000000 --- a/packages/angular/integration/ng9/src/styles.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ -@import '../node_modules/@ai-apps/styles/css/ai-apps-pal.css'; diff --git a/packages/angular/integration/ng9/src/test.ts b/packages/angular/integration/ng9/src/test.ts deleted file mode 100644 index 28b358a5cb..0000000000 --- a/packages/angular/integration/ng9/src/test.ts +++ /dev/null @@ -1,26 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: { - context( - path: string, - deep?: boolean, - filter?: RegExp - ): { - keys(): string[]; - (id: string): T; - }; -}; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/packages/angular/integration/ng9/tsconfig.app.json b/packages/angular/integration/ng9/tsconfig.app.json deleted file mode 100644 index d5f4fee60b..0000000000 --- a/packages/angular/integration/ng9/tsconfig.app.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/app", - "types": [] - }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng9/tsconfig.json b/packages/angular/integration/ng9/tsconfig.json deleted file mode 100644 index 378e93e5d2..0000000000 --- a/packages/angular/integration/ng9/tsconfig.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "compileOnSave": false, - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "module": "esnext", - "moduleResolution": "node", - "importHelpers": true, - "target": "es2015", - "lib": [ - "es2018", - "dom" - ] - }, - "angularCompilerOptions": { - "fullTemplateTypeCheck": true, - "strictInjectionParameters": true - } -} diff --git a/packages/angular/integration/ng9/tsconfig.spec.json b/packages/angular/integration/ng9/tsconfig.spec.json deleted file mode 100644 index e51a7a7e07..0000000000 --- a/packages/angular/integration/ng9/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": [ - "jasmine", - "node" - ] - }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] -} diff --git a/packages/angular/integration/ng9/tslint.json b/packages/angular/integration/ng9/tslint.json deleted file mode 100644 index 953de23686..0000000000 --- a/packages/angular/integration/ng9/tslint.json +++ /dev/null @@ -1,148 +0,0 @@ -{ - "extends": "tslint:recommended", - "rules": { - "align": { - "options": [ - "parameters", - "statements" - ] - }, - "array-type": false, - "arrow-return-shorthand": true, - "curly": true, - "deprecation": { - "severity": "warning" - }, - "component-class-suffix": true, - "contextual-lifecycle": true, - "directive-class-suffix": true, - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ], - "eofline": true, - "import-blacklist": [ - true, - "rxjs/Rx" - ], - "import-spacing": true, - "indent": { - "options": [ - "spaces" - ] - }, - "max-classes-per-file": false, - "max-line-length": [ - true, - 140 - ], - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-empty": false, - "no-inferrable-types": [ - true, - "ignore-params" - ], - "no-non-null-assertion": true, - "no-redundant-jsdoc": true, - "no-switch-case-fall-through": true, - "no-var-requires": false, - "object-literal-key-quotes": [ - true, - "as-needed" - ], - "quotemark": [ - true, - "single" - ], - "semicolon": { - "options": [ - "always" - ] - }, - "space-before-function-paren": { - "options": { - "anonymous": "never", - "asyncArrow": "always", - "constructor": "never", - "method": "never", - "named": "never" - } - }, - "typedef-whitespace": { - "options": [ - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - }, - { - "call-signature": "onespace", - "index-signature": "onespace", - "parameter": "onespace", - "property-declaration": "onespace", - "variable-declaration": "onespace" - } - ] - }, - "variable-name": { - "options": [ - "ban-keywords", - "check-format", - "allow-pascal-case" - ] - }, - "whitespace": { - "options": [ - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type", - "check-typecast" - ] - }, - "no-conflicting-lifecycle": true, - "no-host-metadata-property": true, - "no-input-rename": true, - "no-inputs-metadata-property": true, - "no-output-native": true, - "no-output-on-prefix": true, - "no-output-rename": true, - "no-outputs-metadata-property": true, - "template-banana-in-box": true, - "template-no-negated-async": true, - "use-lifecycle-interface": true, - "use-pipe-transform-interface": true - }, - "rulesDirectory": [ - "codelyzer" - ] -} diff --git a/packages/angular/karma-test-shim.js b/packages/angular/karma-test-shim.js deleted file mode 100644 index 5deeacf0e9..0000000000 --- a/packages/angular/karma-test-shim.js +++ /dev/null @@ -1,23 +0,0 @@ -Error.stackTraceLimit = Infinity; - -require('core-js'); - -require('zone.js/dist/zone'); -require('zone.js/dist/long-stack-trace-zone'); -require('zone.js/dist/proxy'); -require('zone.js/dist/sync-test'); -require('zone.js/dist/jasmine-patch'); -require('zone.js/dist/async-test'); -require('zone.js/dist/fake-async-test'); - -var appContext = require.context('./src', true, /\.spec\.ts/); - -appContext.keys().forEach(appContext); - -var testing = require('@angular/core/testing'); -var browser = require('@angular/platform-browser-dynamic/testing'); - -testing.TestBed.initTestEnvironment( - browser.BrowserDynamicTestingModule, - browser.platformBrowserDynamicTesting() -); diff --git a/packages/angular/karma.conf.js b/packages/angular/karma.conf.js deleted file mode 100644 index a441619e09..0000000000 --- a/packages/angular/karma.conf.js +++ /dev/null @@ -1,29 +0,0 @@ -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma'), - ], - autoWatch: true, - browsers: ['ChromeHeadless'], - client: { - clearContext: false, // leave Jasmine Spec Runner output visible in browser - }, - coverageIstanbulReporter: { - dir: require('path').join(__dirname, 'coverage'), - reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true, - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - logLevel: config.LOG_INFO, - colors: true, - singleRun: false, - restartOnFileChange: true, - }); -}; diff --git a/packages/angular/package.json b/packages/angular/package.json deleted file mode 100644 index 155473f828..0000000000 --- a/packages/angular/package.json +++ /dev/null @@ -1,108 +0,0 @@ -{ - "name": "@ai-apps/angular", - "version": "2.154.0-next.30", - "description": "AI Applications PAL in Angular", - "main": "index.js", - "scripts": { - "build": "bash scripts/build.sh", - "storybook": "start-storybook -s .storybook/public -p 6006", - "docs:build": "typedoc", - "lint": "tslint 'src/**/*.ts'", - "lint:fix": "tslint --fix 'src/**/*.ts'", - "test": "ng test --no-watch", - "test:watch": "ng test --watch", - "test:ci": "yarn test", - "build:storybook": "build-storybook -c .storybook -s .storybook/public -o dist/docs/storybook", - "ng": "ng", - "ng:build": "ngcc && ngcc -s ../../node_modules && ng build", - "clean": "rm -rf dist", - "start": "echo 'script not defined' && exit 0", - "format": "echo 'script not defined' && exit 0", - "format:check": "echo 'script not defined' && exit 0", - "postinstall": "node scripts/vendor.js", - "prepublishOnly": "node scripts/sync-version.js" - }, - "repository": { - "type": "git", - "url": "git@github.com:IBM/carbon-components-angular.git" - }, - "publishConfig": { - "directory": "dist", - "access": "public" - }, - "license": "Apache-2.0", - "author": "IBM", - "peerDependencies": { - "@angular/common": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0", - "@angular/core": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0", - "@angular/forms": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0", - "carbon-components": "^10.0.0", - "carbon-components-angular": "^4.0.0", - "rxjs": "^6.0.0", - "zone.js": "^0.8.26 || ^0.9.0 || ^0.10.0" - }, - "devDependencies": { - "@angular-builders/custom-webpack": "11.1.1", - "@angular-devkit/build-angular": "0.1101.1", - "@angular-devkit/build-ng-packagr": "0.1002.1", - "@angular-devkit/core": "11.1.1", - "@angular/animations": "11.1.1", - "@angular/cli": "11.1.1", - "@angular/common": "11.1.1", - "@angular/compiler": "11.1.1", - "@angular/compiler-cli": "11.1.1", - "@angular/core": "11.1.1", - "@angular/forms": "11.1.1", - "@angular/platform-browser": "11.1.1", - "@angular/platform-browser-dynamic": "11.1.1", - "@angular/router": "11.1.1", - "@babel/core": "^7.13.16", - "@storybook/addon-actions": "^6.2.3", - "@storybook/addon-knobs": "^6.2.3", - "@storybook/addon-links": "^6.2.3", - "@storybook/addon-storysource": "^6.2.3", - "@storybook/addons": "^6.2.3", - "@storybook/angular": "^6.2.3", - "@storybook/theming": "^6.2.3", - "@types/jasmine": "2.8.2", - "@types/node": "11.13.0", - "ai-apps-monorepo-utils": "^2.154.0-next.20", - "babel-loader": "^8.2.2", - "carbon-components-angular": "4.56.2", - "codelyzer": "5.0.0", - "core-js": "2.6.11", - "element-closest-polyfill": "1.0.0", - "file-type": "12.4.0", - "gulp": "4.0.0", - "gulp-concat": "2.6.1", - "gulp-tap": "1.0.1", - "jasmine-core": "3.4.0", - "jasmine-spec-reporter": "4.2.1", - "karma": "6.3.16", - "karma-chrome-launcher": "2.2.0", - "karma-cli": "2.0.0", - "karma-coverage-istanbul-reporter": "2.0.5", - "karma-jasmine": "2.0.1", - "karma-jasmine-html-reporter": "1.4.2", - "lodash-es": "4.17.21", - "ng-packagr": "11.1.4", - "rxjs": "6.5.3", - "sass": "^1.42.1", - "ts-helpers": "1.1.2", - "tsickle": "0.35.0", - "tslib": "1.9.3", - "tslint": "5.15.0", - "typedoc": "0.20.28", - "typescript": "4.1.3", - "whatwg-fetch": "3.0.0", - "zone.js": "0.11.3" - }, - "dependencies": { - "@ai-apps/styles": "^2.154.0-next.30", - "@carbon/icons": "10.20.0", - "@carbon/telemetry": "0.1.0", - "date-fns": "^2.22.1", - "flatpickr": "4.6.1", - "gulp-sass": "^5.0.0" - } -} diff --git a/packages/angular/scripts/add-package-scripts.js b/packages/angular/scripts/add-package-scripts.js deleted file mode 100644 index 23550fdf10..0000000000 --- a/packages/angular/scripts/add-package-scripts.js +++ /dev/null @@ -1,12 +0,0 @@ -const { readFileSync, writeFileSync } = require('fs'); -const { resolve } = require('path'); - -const srcPath = resolve('src/package.json'); -const distPath = resolve('dist/package.json'); - -const srcPackageJson = JSON.parse(readFileSync(srcPath)); -const distPackageJson = JSON.parse(readFileSync(distPath)); - -distPackageJson['scripts'] = srcPackageJson['scripts']; - -writeFileSync(distPath, JSON.stringify(distPackageJson, null, 2)); diff --git a/packages/angular/scripts/build.sh b/packages/angular/scripts/build.sh deleted file mode 100755 index 2685054669..0000000000 --- a/packages/angular/scripts/build.sh +++ /dev/null @@ -1,24 +0,0 @@ -#!/usr/bin/env bash - -set -e # exit with nonzero exit code if anything fails - -rm -rf dist - -# run the angular/ng-packagr build -yarn ng:build - -# copy vendor files to dist -cp -R src/vendor dist/ -cp -R src/toolkit/vendor dist/toolkit/ -gulp copyStyles - -# restore the scripts to the dist package.json -node scripts/add-package-scripts.js - -# move/generate/update meta files into dist -gulp buildMeta - -# generate ALL the documentation -mkdir dist/docs -yarn build:storybook -yarn docs:build && mv documentation dist/docs/ diff --git a/packages/angular/scripts/prepush.sh b/packages/angular/scripts/prepush.sh deleted file mode 100644 index 634abce65a..0000000000 --- a/packages/angular/scripts/prepush.sh +++ /dev/null @@ -1,5 +0,0 @@ -#!/usr/bin/env bash - -set -e - -yarn lint diff --git a/packages/angular/scripts/sync-version.js b/packages/angular/scripts/sync-version.js deleted file mode 100644 index 2da49bed4b..0000000000 --- a/packages/angular/scripts/sync-version.js +++ /dev/null @@ -1,12 +0,0 @@ -const { readFileSync, writeFileSync } = require('fs'); -const { resolve } = require('path'); - -const srcPath = resolve('package.json'); -const distPath = resolve('dist/package.json'); - -const srcPackageJson = JSON.parse(readFileSync(srcPath)); -const distPackageJson = JSON.parse(readFileSync(distPath)); - -distPackageJson['version'] = srcPackageJson['version']; - -writeFileSync(distPath, JSON.stringify(distPackageJson, null, 2)); diff --git a/packages/angular/scripts/vendor.js b/packages/angular/scripts/vendor.js deleted file mode 100644 index ac79507349..0000000000 --- a/packages/angular/scripts/vendor.js +++ /dev/null @@ -1,5 +0,0 @@ -const { vendor } = require('ai-apps-monorepo-utils'); - -vendor({ - packages: ['@ai-apps/styles'], -}); diff --git a/packages/angular/src/button-menu-index.ts b/packages/angular/src/button-menu-index.ts deleted file mode 100644 index 6469285b5d..0000000000 --- a/packages/angular/src/button-menu-index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { ButtonMenuComponent } from './button-menu/button-menu.component'; -export { ButtonMenuModule } from './button-menu/button-menu.module'; diff --git a/packages/angular/src/button-menu/button-menu.component.ts b/packages/angular/src/button-menu/button-menu.component.ts deleted file mode 100644 index 7b3080cc0e..0000000000 --- a/packages/angular/src/button-menu/button-menu.component.ts +++ /dev/null @@ -1,149 +0,0 @@ -import { - AfterViewInit, - Component, - ElementRef, - EventEmitter, - HostListener, - Input, - Output, -} from '@angular/core'; -import { DocumentService } from 'carbon-components-angular'; - -@Component({ - selector: 'ai-button-menu', - template: ` -
- - - - - - - - - - - - - -
- `, - styles: [ - ` - :host { - display: inline-block; - } - - .iot--menu-button { - display: inline-block; - } - - .bx--btn__icon { - pointer-events: none; - } - `, - ], -}) -export class ButtonMenuComponent implements AfterViewInit { - @Input() label = ''; - @Input() open = false; - @Input() openIcon = 'chevron--down'; - @Input() closeIcon = 'chevron--up'; - @Input() iconOnly = false; - @Input() split = false; - @Input() alignMenu: 'left' | 'right' = 'left'; - @Input() placeMenu: 'top' | 'bottom' = 'bottom'; - @Output() openChange = new EventEmitter(); - @Output() primaryClick = new EventEmitter(); - - public position = { - top: 0, - left: 0, - }; - - constructor(protected elementRef: ElementRef, protected documentService: DocumentService) {} - - ngAfterViewInit() { - const { nativeElement }: { nativeElement: HTMLElement } = this.elementRef; - const menuElement: HTMLElement = nativeElement.querySelector('.bx--context-menu, .bx--menu'); - const dimensions = nativeElement.getBoundingClientRect(); - const menuDimensions = menuElement.getBoundingClientRect(); - // default placement (align left, place bottom) - let left = dimensions.left; - let top = dimensions.top + dimensions.height; - - if (this.alignMenu === 'right') { - left = dimensions.right - menuDimensions.width; - } - - if (this.placeMenu === 'top') { - top = dimensions.top - menuDimensions.height; - } - - this.position = { top, left }; - - this.documentService.handleClick((event) => { - const { nativeElement }: { nativeElement: HTMLElement } = this.elementRef; - if (this.open && !nativeElement.contains(event.target as HTMLElement)) { - this.toggleMenu(); - } - }); - } - - toggleMenu() { - this.open = !this.open; - this.openChange.emit(this.open); - } - - @HostListener('keyup', ['$event']) - handleKeys(event: KeyboardEvent) { - if (event.key === 'Escape' && this.open) { - this.toggleMenu(); - const element = this.elementRef.nativeElement as HTMLElement; - let button: HTMLElement = element.querySelector('.iot--menu-button__primary'); - if (this.split || this.iconOnly) { - button = element.querySelector('.iot--menu-button__secondary'); - } - button.focus(); - } - } -} diff --git a/packages/angular/src/button-menu/button-menu.module.ts b/packages/angular/src/button-menu/button-menu.module.ts deleted file mode 100644 index 312f8ff5b4..0000000000 --- a/packages/angular/src/button-menu/button-menu.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { ButtonModule, IconModule, IconService, UtilsModule } from 'carbon-components-angular'; -import { ButtonMenuComponent } from './button-menu.component'; -import { ContextMenuModule } from 'carbon-components-angular/context-menu'; - -import ChevronUp16 from '@carbon/icons/es/chevron--up/16'; - -@NgModule({ - declarations: [ButtonMenuComponent], - exports: [ButtonMenuComponent], - imports: [CommonModule, ButtonModule, IconModule, ContextMenuModule, UtilsModule], -}) -export class ButtonMenuModule { - constructor(private iconService: IconService) { - this.iconService.register(ChevronUp16); - } -} diff --git a/packages/angular/src/button-menu/button-menu.stories.ts b/packages/angular/src/button-menu/button-menu.stories.ts deleted file mode 100644 index b8d7fb4567..0000000000 --- a/packages/angular/src/button-menu/button-menu.stories.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; -import { withKnobs } from '@storybook/addon-knobs'; -import { ContextMenuModule } from 'carbon-components-angular/context-menu'; - -import { ButtonMenuModule } from './button-menu.module'; - -storiesOf('Components/Button menu', module) - .addDecorator( - moduleMetadata({ - imports: [ButtonMenuModule, ContextMenuModule], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` - - - - - - - - `, - })) - .add('Complex', () => ({ - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - props: {}, - })) - .add('Split button', () => ({ - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - props: {}, - })) - .add('Icon only', () => ({ - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - props: {}, - })); diff --git a/packages/angular/src/button-menu/package.json b/packages/angular/src/button-menu/package.json deleted file mode 100644 index f5e321b599..0000000000 --- a/packages/angular/src/button-menu/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../button-menu-index.ts" - } - } -} diff --git a/packages/angular/src/card-index.ts b/packages/angular/src/card-index.ts deleted file mode 100644 index 190dd499ac..0000000000 --- a/packages/angular/src/card-index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export { CardContentComponent } from './card/card-content.component'; -export { CardHeaderComponent } from './card/card-header.component'; -export { CardTitleComponent } from './card/card-title.component'; -export { CardToolbarActionDirective } from './card/card-toolbar-action.directive'; -export { CardToolbarComponent } from './card/card-toolbar.component'; -export { CardDateRangeComponent } from './card/card-date-range.component'; -export { CardComponent } from './card/card.component'; -export { CardModule } from './card/card.module'; diff --git a/packages/angular/src/card/card-content.component.ts b/packages/angular/src/card/card-content.component.ts deleted file mode 100644 index c2a8363e25..0000000000 --- a/packages/angular/src/card/card-content.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { - AfterViewInit, - Component, - ElementRef, - HostBinding, - Input, - OnInit, - TemplateRef, -} from '@angular/core'; -import { CardService } from './card.service'; - -@Component({ - selector: 'ai-card-content', - template: ` - -
- {{ emptyText }} - -
- `, -}) -export class CardContentComponent implements OnInit, AfterViewInit { - @HostBinding('class.iot--card--content') contentClass = true; - @HostBinding('class.iot--card--content--expanded') expandedClass = false; - /** - * expects string | TemplateRef - */ - @Input() emptyText: any; - @Input() isEmpty = false; - - constructor(protected cardService: CardService, protected elementRef: ElementRef) {} - - ngOnInit() { - this.cardService.onExpand((value) => { - this.expandedClass = value; - }); - } - - ngAfterViewInit() { - const hostElement: HTMLElement = this.elementRef.nativeElement; - hostElement.style.setProperty('--card-content-height', this.cardService.getContentHeight()); - } - - public isTemplate(value) { - return value instanceof TemplateRef; - } -} diff --git a/packages/angular/src/card/card-date-range.component.ts b/packages/angular/src/card/card-date-range.component.ts deleted file mode 100644 index 242ff10221..0000000000 --- a/packages/angular/src/card/card-date-range.component.ts +++ /dev/null @@ -1,161 +0,0 @@ -import { - Component, - EventEmitter, - HostBinding, - Input, - OnChanges, - Output, - SimpleChanges, -} from '@angular/core'; -import { ControlValueAccessor } from '@angular/forms'; -import { ListItem } from 'carbon-components-angular'; - -@Component({ - selector: 'ai-card-date-range', - template: ` -
{{ selectedRangeContent }}
- - - {{ range.content }} - - - - - - `, -}) -export class CardDateRangeComponent implements ControlValueAccessor, OnChanges { - @HostBinding('class.iot--card--toolbar-date-range-wrapper') wrapperClass = true; - - /** - * List of date/time ranges to display in the overflow menu. - * - * Uses a modified `ListItem` array. `id` keys **must** be provided. - * - * If a null is passed to the ngModel or `value` Input the item with - * the `id` of `"default"` will be selected. - */ - @Input() ranges: ListItem[] = [ - { - id: 'default', - content: 'Default', - selected: true, - }, - { - id: 'last-24-hours', - content: 'Last 24 hours', - selected: false, - }, - { - id: 'last-7-days', - content: 'Last 7 days', - selected: false, - }, - { - id: 'last-month', - content: 'Last month', - selected: false, - }, - { - id: 'last-quarter', - content: 'Last quarter', - selected: false, - }, - { - id: 'last-year', - content: 'Last year', - selected: false, - }, - { - id: 'this-week', - content: 'This week', - selected: false, - divider: true, - }, - { - id: 'this-month', - content: 'This month', - selected: false, - }, - { - id: 'this-quarter', - content: 'This quarter', - selected: false, - }, - { - id: 'this-year', - content: 'This year', - selected: false, - }, - ]; - - /** - * Set to the id of a range item to select it - */ - @Input() value = 'default'; - - /** - * Emits the id of the currently selected range item - */ - @Output() valueChange = new EventEmitter(); - - /** - * Contains the content of the currently selected range item - */ - public selectedRangeContent = this.getSelectedRange().content; - - ngOnChanges(changes: SimpleChanges) { - if (changes.value) { - this.selectRange(changes.value.currentValue); - } - } - - onRangeSelected(range: string) { - this.selectRange(range); - this.onChange(range); - this.valueChange.emit(range); - } - - writeValue(rangeId: string): void { - this.selectRange(rangeId); - } - - registerOnChange(fn: any): void { - this.onChange = fn; - } - - registerOnTouched(fn: any): void { - this.onTouched = fn; - } - - protected onChange = (obj: any) => {}; - protected onTouched = () => {}; - - /** - * Updates the `ranges` list to only select the provided id. - * - * Also updates `selectedRangeContent` - * - * falsy/null values will select the `default` option - * - * @param rangeId id of the range item to select - */ - protected selectRange(rangeId: string) { - if (!rangeId) { - rangeId = 'default'; - } - this.ranges = this.ranges.map((range) => { - if (range.id === rangeId) { - range.selected = true; - } else { - range.selected = false; - } - return range; - }); - this.selectedRangeContent = this.getSelectedRange().content; - } - - protected getSelectedRange() { - return this.ranges.find((range) => range.selected); - } -} diff --git a/packages/angular/src/card/card-header.component.ts b/packages/angular/src/card/card-header.component.ts deleted file mode 100644 index 6753797fcd..0000000000 --- a/packages/angular/src/card/card-header.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component, HostBinding } from '@angular/core'; - -@Component({ - selector: 'ai-card-header', - template: ` `, -}) -export class CardHeaderComponent { - @HostBinding('class.iot--card--header') hostClass = 'true'; -} diff --git a/packages/angular/src/card/card-title.component.ts b/packages/angular/src/card/card-title.component.ts deleted file mode 100644 index bff3a0a162..0000000000 --- a/packages/angular/src/card/card-title.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, HostBinding, Input } from '@angular/core'; - -@Component({ - selector: 'ai-card-title', - template: ` -
- {{ text }} -
- - `, -}) -export class CardTitleComponent { - @Input() text = ''; - @HostBinding('class.iot--card--title') hostClass = true; -} diff --git a/packages/angular/src/card/card-toolbar-action.directive.ts b/packages/angular/src/card/card-toolbar-action.directive.ts deleted file mode 100644 index e74fdf4486..0000000000 --- a/packages/angular/src/card/card-toolbar-action.directive.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { Directive, HostBinding, OnInit, Optional } from '@angular/core'; -import { OverflowMenu } from 'carbon-components-angular'; - -/** - * Directive to apply toolbar specific styles and behavior. - * - * May be applied to a button, or other simple element: - * ``` - * - * ``` - * - * It will also apply the correct styles to an `ibm-overflow-menu`. For example: - * ``` - * - * First option - * Second option - * Third option - * Fourth option - * - * ``` - * - * For the overflow-menu it will override the `flip`, `offset`, and `triggerClass` to toolbar specific values. - */ -@Directive({ - selector: '[aiCardToolbarAction]', -}) -export class CardToolbarActionDirective implements OnInit { - @HostBinding('class') classList = - 'iot--card--toolbar-action iot--card--toolbar-svg-wrapper bx--btn--icon-only bx--btn bx--btn--ghost'; - - /** - * - * @param overflowMenuRef optional ref to the OverflowMenu instance this directive may be attached to - */ - constructor(@Optional() protected overflowMenuRef: OverflowMenu) {} - - ngOnInit() { - if (this.overflowMenuRef) { - this.overflowMenuRef.triggerClass = this.classList; - this.overflowMenuRef.flip = true; - this.overflowMenuRef.offset = { x: 4, y: 0 }; - this.classList = ''; - } - } -} diff --git a/packages/angular/src/card/card-toolbar.component.ts b/packages/angular/src/card/card-toolbar.component.ts deleted file mode 100644 index 164889179d..0000000000 --- a/packages/angular/src/card/card-toolbar.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component, HostBinding } from '@angular/core'; - -@Component({ - selector: 'ai-card-toolbar', - template: ` `, -}) -export class CardToolbarComponent { - @HostBinding('class.iot--card--toolbar') toolbarClass = true; -} diff --git a/packages/angular/src/card/card.component.spec.ts b/packages/angular/src/card/card.component.spec.ts deleted file mode 100644 index 09dc3e2001..0000000000 --- a/packages/angular/src/card/card.component.spec.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { Component, DebugElement } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { CardModule } from './card.module'; - -@Component({ - selector: 'app-card-test', - template: ` - - - - - Demo Card content - - `, -}) -class AppCardTest {} - -describe('Card', () => { - let fixture: ComponentFixture; - let component: AppCardTest; - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [AppCardTest], - imports: [CardModule], - }); - - fixture = TestBed.createComponent(AppCardTest); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should work', () => { - expect(component).toBeDefined(); - }); - - it('should have an overall height of 200px', () => { - const card: DebugElement = fixture.debugElement.query(By.css('ai-card')); - const cardElement: HTMLElement = card.nativeElement; - const height = cardElement.style.getPropertyValue('--card-default-height'); - expect(height).toBe('200px'); - }); - - it('should have an content height of 152px', () => { - const cardContent: DebugElement = fixture.debugElement.query(By.css('ai-card-content')); - const cardContentElement: HTMLElement = cardContent.nativeElement; - const height = cardContentElement.style.getPropertyValue('--card-content-height'); - expect(height).toBe('152px'); - }); - - it('should have a title of `Card Title`', () => { - const cardTitle: DebugElement = fixture.debugElement.query(By.css('ai-card-title *[title]')); - const cardTitleElement: HTMLElement = cardTitle.nativeElement; - expect(cardTitleElement.textContent.trim()).toBe('Card Title'); - expect(cardTitleElement.getAttribute('title')).toBe('Card Title'); - }); - - it('should have some demo content', () => { - const cardContent: DebugElement = fixture.debugElement.query(By.css('ai-card-content')); - const cardContentElement: HTMLElement = cardContent.nativeElement; - expect(cardContentElement.textContent.trim()).toBe('Demo Card content'); - }); -}); diff --git a/packages/angular/src/card/card.component.ts b/packages/angular/src/card/card.component.ts deleted file mode 100644 index 65070aceb7..0000000000 --- a/packages/angular/src/card/card.component.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { - AfterViewInit, - Component, - ElementRef, - HostBinding, - Input, - OnChanges, - OnInit, - Optional, - SimpleChanges, - SkipSelf, -} from '@angular/core'; -import { CardService } from './card.service'; - -/** - * Provider for `CardService` that lets us either use a service provided to us - * by the parent injector, or fall back to a new instance for this component tree. - */ -const CARD_SERVICE_PROVIDER = { - provide: CardService, - deps: [[new Optional(), new SkipSelf(), CardService]], - useFactory: (parentCardService: CardService) => { - return parentCardService || new CardService(); - }, -}; - -@Component({ - selector: 'ai-card', - template: ` - - - - -
-
- -
-
- `, - providers: [CARD_SERVICE_PROVIDER], - styles: [ - ` - .expanded { - height: calc(100% - 50px); - width: calc(100% - 50px); - } - `, - ], -}) -export class CardComponent implements OnChanges, OnInit, AfterViewInit { - @Input() defaultHeight: number = null; - @Input() expanded = false; - @HostBinding('class.iot--card') cardClass = true; - @HostBinding('class.iot--card--wrapper') wrapperClass = true; - @HostBinding('class.iot--card--wrapper__selected') @Input() selected = false; - @HostBinding('attr.role') role = 'presentation'; - - constructor(protected cardService: CardService, protected elementRef: ElementRef) {} - - ngOnChanges(changes: SimpleChanges) { - if (changes.expanded) { - this.cardService.setExpanded(changes.expanded.currentValue); - } - } - - ngOnInit() { - if (this.defaultHeight) { - this.cardService.setCardHeight(this.defaultHeight); - } - } - - ngAfterViewInit() { - const hostElement: HTMLElement = this.elementRef.nativeElement; - hostElement.style.setProperty('--card-default-height', this.cardService.getCardHeight()); - } -} diff --git a/packages/angular/src/card/card.module.ts b/packages/angular/src/card/card.module.ts deleted file mode 100644 index 64df3bf84a..0000000000 --- a/packages/angular/src/card/card.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { CardContentComponent } from './card-content.component'; -import { CardHeaderComponent } from './card-header.component'; -import { CardTitleComponent } from './card-title.component'; -import { CardToolbarActionDirective } from './card-toolbar-action.directive'; -import { CardToolbarComponent } from './card-toolbar.component'; -import { CardDateRangeComponent } from './card-date-range.component'; -import { CardComponent } from './card.component'; -import { DialogModule, IconModule } from 'carbon-components-angular'; - -@NgModule({ - declarations: [ - CardContentComponent, - CardHeaderComponent, - CardTitleComponent, - CardToolbarActionDirective, - CardToolbarComponent, - CardDateRangeComponent, - CardComponent, - ], - exports: [ - CardContentComponent, - CardHeaderComponent, - CardTitleComponent, - CardToolbarActionDirective, - CardToolbarComponent, - CardDateRangeComponent, - CardComponent, - ], - imports: [CommonModule, IconModule, DialogModule], -}) -export class CardModule {} diff --git a/packages/angular/src/card/card.service.spec.ts b/packages/angular/src/card/card.service.spec.ts deleted file mode 100644 index d260a814aa..0000000000 --- a/packages/angular/src/card/card.service.spec.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { CardService } from './card.service'; - -describe('CardService', () => { - let service: CardService; - - beforeEach(() => { - service = new CardService(); - }); - - it('should return a formatted height string for a given card height', () => { - service.setCardHeight(400); - expect(service.getCardHeight()).toBe('400px'); - service.setCardHeight(200); - expect(service.getCardHeight()).toBe('200px'); - }); - - it('should return a formatted height string for the content of a card', () => { - service.setCardHeight(400); - expect(service.getContentHeight()).toBe('352px'); - service.setCardHeight(200); - expect(service.getContentHeight()).toBe('152px'); - }); - - it('should broadcast the expanded state', (done) => { - // skip the first value. - // It's a behaviour subject so the first value is the initial value (false in this case) - let isInitialValue = true; - service.onExpand((value) => { - if (!isInitialValue) { - expect(value).toBeTruthy(); - done(); - } - isInitialValue = false; - }); - service.setExpanded(true); - }); -}); diff --git a/packages/angular/src/card/card.service.ts b/packages/angular/src/card/card.service.ts deleted file mode 100644 index b0983d63c5..0000000000 --- a/packages/angular/src/card/card.service.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { Injectable, OnDestroy } from '@angular/core'; -import { BehaviorSubject, Subscription } from 'rxjs'; - -/** - * Service for data and config shared between card components - */ -@Injectable() -export class CardService implements OnDestroy { - /** - * Overall height of the card - */ - private height: number = null; - - private headerHeight = 48; - - private expandedSubject = new BehaviorSubject(false); - - private subscriptions = new Subscription(); - - /** - * Set the overall height of the card in pixels - * - * @param height height specified in pixels - */ - setCardHeight(height: number) { - this.height = height; - } - - /** - * Get the overall height of the card as a formatted string - * - * @returns the height as a string ex. `'200px'` - */ - getCardHeight() { - if (!this.height) { - return ''; - } - return `${this.height}px`; - } - - /** - * Get the height of just the content area as a formatted string - * - * @returns the height as a string ex. `'200px'` - */ - getContentHeight() { - if (!this.height) { - return ''; - } - return `${this.height - this.headerHeight}px`; - } - - setExpanded(isExpanded: boolean) { - this.expandedSubject.next(isExpanded); - } - - getExpanded() { - return this.expandedSubject.value; - } - - onExpand(listener: (isExpanded: boolean) => void) { - const subscription = this.expandedSubject.subscribe(listener); - this.subscriptions.add(subscription); - } - - ngOnDestroy() { - this.subscriptions.unsubscribe(); - } -} diff --git a/packages/angular/src/card/card.stories.ts b/packages/angular/src/card/card.stories.ts deleted file mode 100644 index 5a77cb03a7..0000000000 --- a/packages/angular/src/card/card.stories.ts +++ /dev/null @@ -1,202 +0,0 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; -import { boolean, withKnobs } from '@storybook/addon-knobs'; - -import { CardModule } from './card.module'; -import { Component, OnInit } from '@angular/core'; -import { CardService } from './card.service'; -import { DialogModule, IconModule, IconService } from 'carbon-components-angular'; -import Popup16 from '@carbon/icons/lib/popup/16'; -import Close16 from '@carbon/icons/lib/close/16'; - -@Component({ - selector: 'app-demo', - template: ` -

These cards share a CardService

-
- - - - - Demo Card content - - - - - - Demo Card content - -
- `, - providers: [CardService], - styles: [ - ` - .cards { - display: flex; - } - - ai-card { - margin: 10px; - flex-grow: 1; - } - `, - ], -}) -class AppDemo implements OnInit { - constructor(protected cardService: CardService) {} - - ngOnInit() { - this.cardService.setCardHeight(800); - } -} - -@Component({ - selector: 'app-demo-icons', - template: '', -}) -class AppDemoIcons { - constructor(protected iconService: IconService) { - iconService.registerAll([Popup16, Close16]); - } -} - -storiesOf('Components/Card', module) - .addDecorator( - moduleMetadata({ - imports: [CardModule, DialogModule, IconModule], - declarations: [AppDemo, AppDemoIcons], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` -
- - - - - - - - - Card content - - - - - - - - First option - Second option - Third option - Fourth option - - - - - - Card content - - -
- - - `, - props: {}, - })) - /* tslint:disable:max-line-length */ - .add('With a long title', () => ({ - template: ` -
- - - - -
- -
-
-
- - - -
- - Card content - -
-
- - `, - })) - /* tslint:enable:max-line-length */ - .add('Without content', () => ({ - template: ` - - - - - - - - - - - `, - })) - .add('With date range selector', () => ({ - template: ` -
- - - - - - - - - - Card Content - - -
- - `, - })) - .add('Expanded', () => ({ - template: ` -
- - - - - - - - - - -
- - `, - props: { - expanded: boolean('Expanded', true), - }, - })); diff --git a/packages/angular/src/card/package.json b/packages/angular/src/card/package.json deleted file mode 100644 index 4c74f42613..0000000000 --- a/packages/angular/src/card/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../card-index.ts" - } - } -} diff --git a/packages/angular/src/date-time-picker-index.ts b/packages/angular/src/date-time-picker-index.ts deleted file mode 100644 index 71e7413858..0000000000 --- a/packages/angular/src/date-time-picker-index.ts +++ /dev/null @@ -1,15 +0,0 @@ -export { DateTimePickerModule } from './date-time-picker/date-time-picker.module'; -export { - AbsoluteDateTimeSelection, - CustomDateTimeSelection, - DateRange, - DateTimePickerComponent, - DateTimeRange, - DateTimeSelection, - PresetDateTimeSelection, - RelativeDateTimeSelection, - RelativeRange, -} from './date-time-picker/date-time-picker.component'; -export { CustomDateTimeComponent } from './date-time-picker/custom-date-time.component'; -export { DateTimeAbsoluteComponent } from './date-time-picker/date-time-absolute.component'; -export { DateTimeRelativeComponent } from './date-time-picker/date-time-relative.component'; diff --git a/packages/angular/src/date-time-picker/custom-date-time.component.ts b/packages/angular/src/date-time-picker/custom-date-time.component.ts deleted file mode 100644 index 3604accedb..0000000000 --- a/packages/angular/src/date-time-picker/custom-date-time.component.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { - Component, - EventEmitter, - HostBinding, - Input, - OnChanges, - Output, - SimpleChanges, -} from '@angular/core'; -import { - DateRange, - DateTimeSelection, - RelativeRange, - RelativeToOption, -} from './date-time-picker.component'; - -@Component({ - selector: 'ai-custom-date-time', - template: ` -
-
- {{ batchText.CUSTOM_RANGE }} - - {{ batchText.RELATIVE }} - {{ batchText.ABSOLUTE }} - -
-
- - - - - - `, - styles: [ - ` - :host { - display: block; - } - `, - ], -}) -export class CustomDateTimeComponent implements OnChanges { - mode: 'relative' | 'absolute' = 'relative'; - value = []; - @Input() range: DateTimeSelection = null; - @Input() hasRelative = true; - @Input() hasAbsolute = true; - @Input() batchText: any; - /** - * Format of date - * - * For reference: https://flatpickr.js.org/formatting/ - */ - @Input() dateFormat = 'yyyy-MM-dd'; - @Input() datePickerFormat = 'Y-m-d'; - @Input() placeholder = 'yyyy-mm-dd'; - @Input() relativeToOptions: RelativeToOption[]; - @Input() flatpickrOptions; - @Output() rangeChange: EventEmitter = new EventEmitter(); - - @HostBinding('class.iot--date-time-picker__custom-wrapper') wrapperClass = true; - - ngOnChanges(changes: SimpleChanges) { - if (changes?.range?.currentValue) { - const [type, start, end, relativeConfig] = changes.range.currentValue; - if (type === 'RELATIVE') { - this.mode = 'relative'; - this.value = [start, end, relativeConfig]; - } - if (type === 'ABSOLUTE') { - this.mode = 'absolute'; - this.value = [start, end]; - } - } - - if (changes?.hasRelative?.currentValue === false) { - this.mode = 'absolute'; - } - - if (changes?.hasAbsolute?.currentValue === false) { - this.mode = 'relative'; - } - } - - relativeChange(change: [Date, Date, RelativeRange]) { - this.rangeChange.emit(['RELATIVE', ...change]); - } - - absoluteChange(change: DateRange) { - this.rangeChange.emit(['ABSOLUTE', ...change]); - } -} diff --git a/packages/angular/src/date-time-picker/date-time-absolute.component.ts b/packages/angular/src/date-time-picker/date-time-absolute.component.ts deleted file mode 100644 index 8bc9ab7145..0000000000 --- a/packages/angular/src/date-time-picker/date-time-absolute.component.ts +++ /dev/null @@ -1,144 +0,0 @@ -import { - Component, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges, -} from '@angular/core'; -import { format, setHours, setMinutes } from 'date-fns'; - -@Component({ - selector: 'ai-date-time-absolute', - template: ` -
-
- - -
-
-
-
- -
- - -
- -
- - -
-
-
- `, - styles: [ - ` - /* - all of this is a bunch of gross styling hacks until we can settle on a reasonable - UX decision for the range picker. By default react forces the picker open, which - totally breaks the interaction for re-selecting dates. We also need to fix the HTML - structure upstream as we can't apply the right spacing (easily) due to the duplication - of classes at multiple levels of the underlying datepicker. - */ - ::ng-deep .iot--date-time-picker__wrapper .bx--date-picker-container { - opacity: 1; - } - - ::ng-deep - .iot--date-time-picker__wrapper - .bx--date-picker--range - > .bx--date-picker-container:first-child { - margin-right: 0; - } - - ::ng-deep .iot--date-time-picker__wrapper .bx--date-picker--range { - position: initial; - } - - ::ng-deep .iot--date-time-picker__wrapper .bx--date-picker-input__wrapper { - max-width: 137px; - } - - ::ng-deep .iot--date-time-picker__wrapper .bx--date-picker__input { - width: 100%; - } - - /* we do this since there's only one level of ibm-date-picker-input. the other wrapper classes are duplicated */ - ::ng-deep - .iot--date-time-picker__wrapper - .bx--date-picker--range - .bx--date-picker-container:first-child - ibm-date-picker-input { - margin-right: 16px; - width: 137px; - } - `, - ], -}) -export class DateTimeAbsoluteComponent implements OnInit, OnChanges { - startTime = '00:00'; - endTime = '23:59'; - dateRange = null; - - @Input() value = []; - @Input() batchText: any; - @Input() dateFormat = 'yyyy-MM-dd'; - @Input() datePickerFormat = 'Y-m-d'; - @Input() placeholder = 'yyyy-mm-dd'; - @Input() flatpickrOptions; - @Output() valueChange: EventEmitter<[Date, Date]> = new EventEmitter(); - - ngOnInit() { - // if dateRange is not null (e.g. switch from relative range) - if (this.dateRange) { - let [startDate, endDate] = this.dateRange; - startDate = format(startDate, this.dateFormat); - endDate = format(endDate, this.dateFormat); - this.dateRange = [startDate, endDate]; - } - } - - ngOnChanges(changes: SimpleChanges) { - if (changes?.value?.currentValue) { - const [start, end] = changes.value.currentValue; - if (!start || !end) { - return; - } - this.dateRange = [start, end]; - const formatString = 'HH:mm'; - this.startTime = format(start, formatString); - this.endTime = format(end, formatString); - } - } - - onChange() { - if (!this.dateRange) { - return; - } - - const [startHourStr, startMinStr] = this.startTime.split(':'); - const [endHourStr, endMinStr] = this.endTime.split(':'); - const startHour = parseInt(startHourStr, 10); - const startMin = parseInt(startMinStr, 10); - const endHour = parseInt(endHourStr, 10); - const endMin = parseInt(endMinStr, 10); - - const [startDate, endDate] = this.dateRange; - const startDateTime = setMinutes(setHours(startDate, startHour), startMin); - const endDateTime = setMinutes(setHours(endDate, endHour), endMin); - - this.valueChange.emit([startDateTime, endDateTime]); - } -} diff --git a/packages/angular/src/date-time-picker/date-time-picker.component.ts b/packages/angular/src/date-time-picker/date-time-picker.component.ts deleted file mode 100644 index 6fd6d01268..0000000000 --- a/packages/angular/src/date-time-picker/date-time-picker.component.ts +++ /dev/null @@ -1,473 +0,0 @@ -import { - Component, - ElementRef, - EventEmitter, - HostBinding, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges, -} from '@angular/core'; -import { format, isThisMinute, subHours, subMinutes } from 'date-fns'; -import { getRangeFromRelative } from './date-time-relative.component'; -import * as languages from 'flatpickr/dist/l10n/index'; -import { I18n } from 'carbon-components-angular/i18n'; - -export interface DateTimeRange { - key: any; - description: string; - getRange: () => [Date, Date]; -} - -export interface RelativeRange { - last: [number, string]; - relativeTo: [string, string]; -} - -export interface BatchLabelText { - ABSOLUTE: string; - RELATIVE: string; - CUSTOM_RANGE: string; - RELATIVE_TO: string; - START_DATE: string; - END_DATE: string; - START_TIME: string; - END_TIME: string; - LAST: string; - CANCEL: string; - APPLY: string; - BACK: string; - NOW: string; - YESTERDAY: string; - YEARS: string; - MONTHS: string; - WEEKS: string; - DAYS: string; - HOURS: string; - MINUTES: string; - RANGE_SEPARATOR: string; -} - -export type RelativeDateTimeSelection = ['RELATIVE', ...DateRange, RelativeRange]; -export type AbsoluteDateTimeSelection = ['ABSOLUTE', ...DateRange]; -export type CustomDateTimeSelection = AbsoluteDateTimeSelection | RelativeDateTimeSelection; -export type PresetDateTimeSelection = [string]; - -export type DateTimeSelection = PresetDateTimeSelection | CustomDateTimeSelection; - -export type DateRange = [Date, Date]; - -/** - * @member key key for the RelativeTo item - * @member label label text in Relative to dropdown list - * @member value integer relative to today. e.g. -1 for yesterday, 0 for today, 1 for tomorrow - */ -export type RelativeToOption = { - key: string; - label: string; - value: number; -}; - -@Component({ - selector: 'ai-date-time-picker', - template: ` -
-
- {{ formatCurrentRangeTitle() }} - -
-
-
- -
    -
  1. - {{ formatCurrentRange() }} -
  2. -
  3. - {{ batchText.CUSTOM_RANGE }} -
  4. -
  5. - {{ range.description }} -
  6. -
- - -
-
- - - -
-
-
- `, - styles: [ - ` - :host { - display: block; - } - - /* fix for tooltip trigger styles forcing a 1rem font size (???) */ - .iot--date-time-picker__box { - font-size: inherit; - } - `, - ], -}) -export class DateTimePickerComponent implements OnChanges, OnInit { - @HostBinding('class.iot--date-time-picker__wrapper') wrapper = true; - - @Input() dateTimeRanges: DateTimeRange[] = [ - { - key: 'LAST_30_MINUTES', - description: 'Last 30 minutes', - getRange: () => { - const now = new Date(); - const previous = subMinutes(now, 30); - return [previous, now]; - }, - }, - { - key: 'LAST_1_HOUR', - description: 'Last 1 hour', - getRange: () => { - const now = new Date(); - const previous = subHours(now, 1); - return [previous, now]; - }, - }, - { - key: 'LAST_6_HOURS', - description: 'Last 6 hours', - getRange: () => { - const now = new Date(); - const previous = subHours(now, 6); - return [previous, now]; - }, - }, - { - key: 'LAST_12_HOURS', - description: 'Last 12 hours', - getRange: () => { - const now = new Date(); - const previous = subHours(now, 12); - return [previous, now]; - }, - }, - { - key: 'LAST_24_HOURS', - description: 'Last 24 hours', - getRange: () => { - const now = new Date(); - const previous = subHours(now, 24); - return [previous, now]; - }, - }, - ]; - /** - * Language of the flatpickr calendar. - * - * For reference of the possible locales: - * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts - */ - @Input() language = 'en'; - @Input() selected: DateTimeSelection = null; - @Input() hasRelative = true; - @Input() hasAbsolute = true; - @Input() theme: 'light' | null = null; - @Input() placeholder = 'yyyy-mm-dd HH:mm'; - @Input() dateFormat = 'yyyy-MM-dd'; - @Input() flatpickrOptions; - @Input() batchText: BatchLabelText = { - ABSOLUTE: 'Absolute', - RELATIVE: 'Relative', - CUSTOM_RANGE: 'Custom Range', - RELATIVE_TO: 'Relative to', - START_DATE: 'Start date', - END_DATE: 'End date', - START_TIME: 'Start time', - END_TIME: 'End time', - LAST: 'Last', - CANCEL: 'Cancel', - APPLY: 'Apply', - BACK: 'back', - NOW: 'Now', - YESTERDAY: 'Yesterday', - YEARS: 'years', - MONTHS: 'months', - WEEKS: 'weeks', - DAYS: 'days', - HOURS: 'hours', - MINUTES: 'minutes', - RANGE_SEPARATOR: 'to', - }; - @Input() relativeToOptions: RelativeToOption[] = [ - { - key: 'YESTERDAY', - label: 'Yesterday', - value: -1, - }, - { - key: 'TODAY', - label: 'Today', - value: 0, - }, - ]; - - @Output() selectedChange: EventEmitter = new EventEmitter(); - @Output() apply: EventEmitter = new EventEmitter(); - @Output() cancel: EventEmitter = new EventEmitter(); - - // contains the selection from before a custom selection was made (to handle the "back" case) - previousSelection: DateTimeSelection = null; - selectingCustomRange = false; - expanded = false; - disabled = false; - timeFormat = 'HH:mm'; - datePickerFormat = 'Y-m-d'; - - get tooltipOffset() { - return { x: 0, y: 4 }; - } - - constructor(protected elementRef: ElementRef, protected i18n: I18n) {} - - ngOnChanges(changes: SimpleChanges) { - if (changes?.selected?.currentValue) { - const [type] = changes.selected.currentValue; - if (type === 'RELATIVE' || type === 'ABSOLUTE') { - this.selectingCustomRange = true; - } - } - } - - ngOnInit() { - if (!this.selected) { - this.selected = [null]; - this.disabled = true; - } - this.previousSelection = this.selected; - this.updateI18nTranslationString(); - this.updateAbsoluteDateFormat(); - } - - updateAbsoluteDateFormat() { - // convert current dateFormat to proper format for absolute date picker - const formatCharacters = this.dateFormat.split(''); - const newDateFormat = formatCharacters - .filter((char, i) => i === 0 || formatCharacters[i] !== formatCharacters[i - 1]) - .join(''); - this.datePickerFormat = newDateFormat.replace('y', 'Y').replace('M', 'm'); - } - - updateI18nTranslationString() { - this.i18n.setLocale(this.language, languages.default[this.language]); - } - - formatCurrentRangeTitle() { - const [rangeOrType] = this.selected; - if (!rangeOrType) { - return this.placeholder; - } else if (rangeOrType === 'RELATIVE' || rangeOrType === 'ABSOLUTE') { - return this.formatCustomRange(); - } - const range = this.dateTimeRanges.find((range) => range.key === rangeOrType); - return range.description; - } - - formatCurrentRange() { - const [rangeOrType] = this.selected; - if (!rangeOrType) { - return this.placeholder; - } else if (rangeOrType === 'RELATIVE' || rangeOrType === 'ABSOLUTE') { - return this.formatCustomRange(); - } - const range = this.dateTimeRanges.find((range) => range.key === rangeOrType); - const [start, end] = range.getRange(); - // TODO: provide a way to customize this for g11n - const formatString = `${this.dateFormat} ${this.timeFormat}`; - let endFormatted = format(end, formatString); - if (isThisMinute(end)) { - endFormatted = this.batchText.NOW; - } - return `${format(start, formatString)} ${this.batchText.RANGE_SEPARATOR} ${endFormatted}`; - } - - formatCustomRange() { - // TODO: provide a way to customize this for g11n - const formatString = `${this.dateFormat} ${this.timeFormat}`; - const [type, start, end, relativeConfig] = this.selected; - if (type === 'ABSOLUTE') { - return `${format(start, formatString)} ${this.batchText.RANGE_SEPARATOR} ${format( - end, - formatString - )}`; - } else if (type === 'RELATIVE') { - const [start, end] = getRangeFromRelative(relativeConfig, this.relativeToOptions); - return `${format(start, formatString)} ${this.batchText.RANGE_SEPARATOR} ${format( - end, - formatString - )}`; - } - } - - selectPresetRange(range: DateTimeRange) { - // set the selected value so the view updates - this.selected = [range.key]; - } - - rangeChange(change: DateTimeSelection) { - // store the previous selection if we don't have one yet - if (!this.previousSelection) { - this.previousSelection = this.selected; - } - this.selected = change; - } - - onBack() { - this.selectingCustomRange = false; - } - - onApply() { - const [rangeOrType, start, end] = this.selected; - if (this.selectingCustomRange) { - this.apply.emit([start, end]); - this.selectedChange.emit(this.selected); - } else { - // emit the date range - const range = this.dateTimeRanges.find((range) => range.key === rangeOrType); - this.selected = [range.key, ...range.getRange()]; - this.selectedChange.emit(this.selected); - this.apply.emit(range.getRange()); - } - this.previousSelection = this.selected; - this.expanded = false; - this.disabled = false; - } - - onCancel() { - this.selected = this.previousSelection; - this.cancel.emit(); - this.expanded = false; - } - - navigateList(event: KeyboardEvent) { - const target = event.target as HTMLElement; - switch (event.key) { - case 'ArrowUp': { - const prev = target.previousElementSibling as HTMLElement; - if (prev?.hasAttribute('tabindex')) { - target.tabIndex = -1; - prev.tabIndex = 0; - prev.focus(); - } - break; - } - case 'ArrowDown': { - const next = target.nextElementSibling as HTMLElement; - if (next?.hasAttribute('tabindex')) { - target.tabIndex = -1; - next.tabIndex = 0; - next.focus(); - } - break; - } - } - } - - togglePicker() { - this.expanded = !this.expanded; - if (this.expanded) { - const nativeElement: HTMLElement = this.elementRef.nativeElement; - const selected: HTMLElement = nativeElement.querySelector( - '.iot--date-time-picker__listitem--preset-selected' - ); - if (selected) { - setTimeout(() => selected.focus()); - } - } - } -} diff --git a/packages/angular/src/date-time-picker/date-time-picker.module.ts b/packages/angular/src/date-time-picker/date-time-picker.module.ts deleted file mode 100644 index 6ccb602306..0000000000 --- a/packages/angular/src/date-time-picker/date-time-picker.module.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { - ButtonModule, - DatePickerModule, - DialogModule, - I18nModule, - IconModule, - InputModule, - NumberModule, - RadioModule, - SelectModule, - TimePickerModule, - TimePickerSelectModule, -} from 'carbon-components-angular'; -import { DateTimePickerComponent } from './date-time-picker.component'; -import { CustomDateTimeComponent } from './custom-date-time.component'; -import { DateTimeAbsoluteComponent } from './date-time-absolute.component'; -import { DateTimeRelativeComponent } from './date-time-relative.component'; -import { FormsModule } from '@angular/forms'; - -@NgModule({ - declarations: [ - DateTimePickerComponent, - CustomDateTimeComponent, - DateTimeAbsoluteComponent, - DateTimeRelativeComponent, - ], - exports: [ - DateTimePickerComponent, - CustomDateTimeComponent, - DateTimeAbsoluteComponent, - DateTimeRelativeComponent, - ], - imports: [ - CommonModule, - FormsModule, - ButtonModule, - RadioModule, - SelectModule, - NumberModule, - TimePickerModule, - TimePickerSelectModule, - InputModule, - DatePickerModule, - I18nModule, - IconModule, - DialogModule, - ], -}) -export class DateTimePickerModule {} diff --git a/packages/angular/src/date-time-picker/date-time-picker.stories.ts b/packages/angular/src/date-time-picker/date-time-picker.stories.ts deleted file mode 100644 index 69fa9c7ed4..0000000000 --- a/packages/angular/src/date-time-picker/date-time-picker.stories.ts +++ /dev/null @@ -1,245 +0,0 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; -import { withKnobs, boolean } from '@storybook/addon-knobs'; -import { action } from '@storybook/addon-actions'; - -import { DateTimePickerModule } from './date-time-picker.module'; -import { subDays, subHours, subMinutes, subMonths, subYears } from 'date-fns'; - -const getProps = (override = {}) => - Object.assign( - {}, - { - theme: boolean('Light theme', false), - selectedChange: action('selectionChange'), - apply: action('apply'), - cancel: action('cancel'), - }, - override - ); - -storiesOf('Components/DateTime Picker', module) - .addDecorator( - moduleMetadata({ - imports: [DateTimePickerModule], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` - - - `, - props: getProps(), - })) - .add('Basic in Chinese', () => ({ - template: ` - - - `, - props: getProps({ - zh: { - ABSOLUTE: '绝对', - RELATIVE: '相对', - CUSTOM_RANGE: '自定义范围', - RELATIVE_TO: '相对于', - START_DATE: '开始日期', - END_DATE: '结束日期', - START_TIME: '开始时间', - END_TIME: '结束时间', - LAST: '最后', - CANCEL: '取消', - APPLY: '提交', - BACK: '返回', - NOW: '现在', - YESTERDAY: '昨天', - YEARS: '年', - MONTHS: '月', - WEEKS: '周', - DAYS: '天', - HOURS: '小时', - MINUTES: '分钟', - RANGE_SEPARATOR: '至', - }, - }), - })) - .add('With blocked dates', () => ({ - template: ` - - - `, - props: getProps({ - flatpickrOptions: { - maxDate: 'today', - }, - }), - })) - .add('With preset range selected', () => ({ - template: ` - - - `, - props: getProps({ - selected: ['LAST_6_HOURS'], - }), - })) - .add('With absolute range set', () => ({ - template: ` - - - `, - props: getProps({ - selected: ['ABSOLUTE', new Date(2020, 6, 15, 8, 0), new Date(2020, 9, 19, 18, 30)], - }), - })) - .add('With relative range set', () => ({ - template: ` - - - `, - props: getProps({ - selected: [ - 'RELATIVE', - null, - null, - { - last: [5, 'WEEKS'], - relativeTo: ['YESTERDAY', '15:45'], - }, - ], - }), - })) - .add('Without relative', () => ({ - template: ` - - - `, - props: getProps({ - hasRelative: false, - }), - })) - .add('Without absolute', () => ({ - template: ` - - - `, - props: getProps({ - hasAbsolute: false, - }), - })) - .add('Without custom range selectors', () => ({ - template: ` - - - `, - props: getProps({ - hasRelative: false, - hasAbsolute: false, - }), - })) - .add('With custom preset ranges', () => ({ - template: ` - - - `, - props: getProps({ - dateTimeRanges: [ - { - key: 'LAST_5_MINUTES', - description: 'Last 5 minutes', - getRange: () => { - const now = new Date(); - const previous = subMinutes(now, 5); - return [previous, now]; - }, - }, - { - key: 'LAST_1_HOUR', - description: 'Last 1 hour', - getRange: () => { - const now = new Date(); - const previous = subHours(now, 1); - return [previous, now]; - }, - }, - { - key: 'LAST_5_DAYS', - description: 'Last 5 days', - getRange: () => { - const now = new Date(); - const previous = subDays(now, 5); - return [previous, now]; - }, - }, - { - key: 'LAST_MONTH', - description: 'Last month', - getRange: () => { - const now = new Date(); - const previous = subMonths(now, 1); - return [previous, now]; - }, - }, - { - key: 'LAST_YEAR', - description: 'Last year', - getRange: () => { - const now = new Date(); - const previous = subYears(now, 1); - return [previous, now]; - }, - }, - ], - }), - })); diff --git a/packages/angular/src/date-time-picker/date-time-relative.component.ts b/packages/angular/src/date-time-picker/date-time-relative.component.ts deleted file mode 100644 index 16aeea7e5a..0000000000 --- a/packages/angular/src/date-time-picker/date-time-relative.component.ts +++ /dev/null @@ -1,151 +0,0 @@ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; -import { setHours, setMinutes, sub, subDays, addDays } from 'date-fns'; -import { DateRange, RelativeRange, RelativeToOption } from './date-time-picker.component'; - -export type RelativeDateValue = [...DateRange, RelativeRange]; - -export const getEndDate = ( - relativeTo: [string, string], - relativeToOptions: RelativeToOption[] -): Date => { - const [relativeToLabel, relativeTime] = relativeTo; - const [hourStr, minStr] = relativeTime.split(':'); - const hour = parseInt(hourStr, 10); - const min = parseInt(minStr, 10); - const numOfDays = relativeToOptions.filter((option) => option.key === relativeToLabel)[0].value; - - // numOfDays < 0 for past, numOfDays == 0 for today, numOfDays > 0 for future - if (numOfDays < 0) { - const pastDays = Math.abs(numOfDays); - return setMinutes(setHours(subDays(new Date(), pastDays), hour), min); - } - - return setMinutes(setHours(addDays(new Date(), numOfDays), hour), min); -}; - -export const getRangeFromRelative = ( - relativeConfig: RelativeRange, - relativeToOptions: RelativeToOption[] -): DateRange => { - const [valueToSubtract, valueRange] = relativeConfig.last; - const endDate = getEndDate(relativeConfig.relativeTo, relativeToOptions); - const timeToSub = { - years: 0, - months: 0, - weeks: 0, - days: 0, - hours: 0, - minutes: 0, - seconds: 0, - }; - timeToSub[valueRange.toLowerCase()] = valueToSubtract; - const startDate = sub(endDate, timeToSub); - return [startDate, endDate]; -}; - -@Component({ - selector: 'ai-date-time-relative', - template: ` -
- {{ batchText.LAST }} -
- - - - - - - - - -
-
-
- {{ batchText.RELATIVE_TO }} -
- - - - -
- -
-
-
- `, - styles: [ - ` - /* tmp hack until carbon-components-angular has the updated number input */ - ::ng-deep .bx--number__input-wrapper input { - min-width: 0px !important; - padding-right: 0px !important; - } - `, - ], -}) -export class DateTimeRelativeComponent implements OnChanges { - @Input() value: any[] = null; - @Input() batchText: any; - @Input() relativeToOptions: RelativeToOption[]; - @Output() valueChange: EventEmitter = new EventEmitter(); - - timeToSubtract = 0; - timeRange = 'MINUTES'; - relativeTo = 'YESTERDAY'; - relativeTime = '00:00'; - - ngOnChanges(changes: SimpleChanges) { - if (changes?.value?.currentValue) { - const [start, end, relativeConfig] = changes.value.currentValue as RelativeDateValue; - if (!relativeConfig) { - return; - } - const [value, valueRange] = relativeConfig.last; - const [relativeTo, time] = relativeConfig.relativeTo; - this.timeRange = valueRange; - this.timeToSubtract = value; - this.relativeTo = relativeTo; - this.relativeTime = time; - } - } - - onChange() { - setTimeout(() => { - const relativeConfig: RelativeRange = { - last: [this.timeToSubtract, this.timeRange], - relativeTo: [this.relativeTo, this.relativeTime], - }; - const dates = getRangeFromRelative(relativeConfig, this.relativeToOptions); - const range: RelativeDateValue = [...dates, relativeConfig]; - this.valueChange.emit(range); - }); - } -} diff --git a/packages/angular/src/date-time-picker/package.json b/packages/angular/src/date-time-picker/package.json deleted file mode 100644 index b81cfb3a6c..0000000000 --- a/packages/angular/src/date-time-picker/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../date-time-picker-index.ts" - } - } -} diff --git a/packages/angular/src/empty-state-index.ts b/packages/angular/src/empty-state-index.ts deleted file mode 100644 index 8f6c3b6154..0000000000 --- a/packages/angular/src/empty-state-index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { EmptyStateModule } from './empty-state/empty-state.module'; -export { EmptyStateComponent } from './empty-state/empty-state.component'; -export { EmptyStateActionComponent } from './empty-state/empty-state-action-wrapper.component'; -export { EmptyStateBodyDirective } from './empty-state/empty-state-body.directive'; -export { EmptyStateSecondaryActionComponent } from './empty-state/empty-state-secondary-action-wrapper.component'; -export { EmptyStateTitleDirective } from './empty-state/empty-state-title.directive'; diff --git a/packages/angular/src/empty-state/empty-state-action-wrapper.component.ts b/packages/angular/src/empty-state/empty-state-action-wrapper.component.ts deleted file mode 100644 index 76b0a9312f..0000000000 --- a/packages/angular/src/empty-state/empty-state-action-wrapper.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ai-empty-state-action', - template: ` -
- -
- `, -}) -export class EmptyStateActionComponent {} diff --git a/packages/angular/src/empty-state/empty-state-body.directive.ts b/packages/angular/src/empty-state/empty-state-body.directive.ts deleted file mode 100644 index 0dbc1fbd34..0000000000 --- a/packages/angular/src/empty-state/empty-state-body.directive.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Directive, HostBinding } from '@angular/core'; - -@Directive({ - selector: '[aiEmptyStateBody]', -}) -export class EmptyStateBodyDirective { - @HostBinding('class') classList = 'iot--empty-state--text'; -} diff --git a/packages/angular/src/empty-state/empty-state-secondary-action-wrapper.component.ts b/packages/angular/src/empty-state/empty-state-secondary-action-wrapper.component.ts deleted file mode 100644 index 709e1f222d..0000000000 --- a/packages/angular/src/empty-state/empty-state-secondary-action-wrapper.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ai-empty-state-secondary-action', - template: ` - - `, -}) -export class EmptyStateSecondaryActionComponent {} diff --git a/packages/angular/src/empty-state/empty-state-title.directive.ts b/packages/angular/src/empty-state/empty-state-title.directive.ts deleted file mode 100644 index decd79b104..0000000000 --- a/packages/angular/src/empty-state/empty-state-title.directive.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Directive, HostBinding } from '@angular/core'; - -@Directive({ - selector: '[aiEmptyStateTitle]', -}) -export class EmptyStateTitleDirective { - @HostBinding('class') classList = 'iot--empty-state--title'; -} diff --git a/packages/angular/src/empty-state/empty-state.component.ts b/packages/angular/src/empty-state/empty-state.component.ts deleted file mode 100644 index 567d834df2..0000000000 --- a/packages/angular/src/empty-state/empty-state.component.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { Component, Input, TemplateRef } from '@angular/core'; - -@Component({ - selector: 'ai-empty-state', - template: ` -
-
- - - - - - - - - - - - - - - - - - - - - -
-
- `, -}) -export class EmptyStateComponent { - @Input() icon: - | 'default' - | 'error' - | 'error404' - | 'not-authorized' - | 'no-results' - | 'success' - | 'no-icon' - | TemplateRef; - - public isTemplate(value: any) { - return value instanceof TemplateRef; - } -} diff --git a/packages/angular/src/empty-state/empty-state.module.ts b/packages/angular/src/empty-state/empty-state.module.ts deleted file mode 100644 index 1defed7d72..0000000000 --- a/packages/angular/src/empty-state/empty-state.module.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { EmptyStateComponent } from './empty-state.component'; -import { EmptyStateActionComponent } from './empty-state-action-wrapper.component'; -import { EmptyStateBodyDirective } from './empty-state-body.directive'; -import { EmptyStateSecondaryActionComponent } from './empty-state-secondary-action-wrapper.component'; -import { EmptyStateTitleDirective } from './empty-state-title.directive'; -import { AIIconsModule } from '@ai-apps/angular/icons'; - -@NgModule({ - declarations: [ - EmptyStateComponent, - EmptyStateActionComponent, - EmptyStateBodyDirective, - EmptyStateSecondaryActionComponent, - EmptyStateTitleDirective, - ], - exports: [ - EmptyStateComponent, - EmptyStateActionComponent, - EmptyStateBodyDirective, - EmptyStateSecondaryActionComponent, - EmptyStateTitleDirective, - ], - imports: [CommonModule, AIIconsModule], -}) -export class EmptyStateModule {} diff --git a/packages/angular/src/empty-state/empty-state.stories.ts b/packages/angular/src/empty-state/empty-state.stories.ts deleted file mode 100644 index e881d7f229..0000000000 --- a/packages/angular/src/empty-state/empty-state.stories.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; -import { boolean, select, text, withKnobs } from '@storybook/addon-knobs'; - -import { EmptyStateModule } from './empty-state.module'; -import { Component } from '@angular/core'; -import { ButtonModule, IconModule, IconService, LinkModule } from 'carbon-components-angular'; -import Bee32 from '@carbon/icons/lib/bee/32'; - -@Component({ - selector: 'app-demo-icons', - template: '', -}) -class AppDemoIcons { - constructor(protected iconService: IconService) { - iconService.registerAll([Bee32]); - } -} - -storiesOf('Components/EmptyState', module) - .addDecorator( - moduleMetadata({ - declarations: [AppDemoIcons], - imports: [ButtonModule, EmptyStateModule, IconModule, LinkModule], - }) - ) - .addDecorator(withKnobs) - .add('Default', () => ({ - template: ` - -

{{ title }}

-

{{ body }}

- - - -
- `, - props: { - icon: select( - 'icon', - ['error', 'error404', 'not-authorized', 'no-results', 'success', 'default', 'no-icon'], - 'default' - ), - title: text('title', 'No data to display'), - body: text( - 'body', - 'Optional extra sentence or sentences to describe the resource and how to create it or the action a first-time user needs to take.' - ), - actionOnClick: () => { - console.log('Action button clicked'); - }, - }, - })) - .add('With actions and context', () => ({ - template: ` - -

{{ title }}

-

{{ body }}

- - - - - Secondary action - -
- `, - props: { - icon: select( - 'icon', - ['error', 'error404', 'not-authorized', 'no-results', 'success', 'default', 'no-icon'], - 'default' - ), - title: text('title', 'No data to display'), - body: text( - 'body', - 'Optional extra sentence or sentences to describe the resource and how to create it or the action a first-time user needs to take.' - ), - actionOnClick: () => { - console.log('Action button clicked'); - }, - secondaryActionClick: () => { - console.log('Secondary action clicked'); - }, - }, - })) - .add('With custom icon', () => ({ - template: ` - - - - -

{{ title }}

-

{{ body }}

-
- - `, - props: { - title: text('title', 'Empty state with custom icon'), - body: text('body', 'Custom icons can be used in addition to the preconfigured options.'), - }, - })); diff --git a/packages/angular/src/empty-state/package.json b/packages/angular/src/empty-state/package.json deleted file mode 100644 index 4cec97f429..0000000000 --- a/packages/angular/src/empty-state/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../empty-state-index.ts" - } - } -} diff --git a/packages/angular/src/flyout-menu-index.ts b/packages/angular/src/flyout-menu-index.ts deleted file mode 100644 index ea8b97dc24..0000000000 --- a/packages/angular/src/flyout-menu-index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { FlyoutMenu } from './flyout-menu/flyout-menu.component'; -export { FlyoutMenuPane } from './flyout-menu/flyout-menu-pane.component'; -export { FlyoutMenuDirective } from './flyout-menu/flyout-menu.directive'; -export { FlyoutMenuFooter } from './flyout-menu/flyout-menu-footer.component'; -export { FlyoutMenuModule } from './flyout-menu/flyout-menu.module'; diff --git a/packages/angular/src/flyout-menu/flyout-menu-footer.component.ts b/packages/angular/src/flyout-menu/flyout-menu-footer.component.ts deleted file mode 100644 index e1b2023696..0000000000 --- a/packages/angular/src/flyout-menu/flyout-menu-footer.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, HostBinding, ViewEncapsulation } from '@angular/core'; - -/** - * html: - * ``` - * - * - * - * - * ``` - */ -@Component({ - selector: 'ai-flyout-menu-footer', - template: ` `, - encapsulation: ViewEncapsulation.None, -}) -export class FlyoutMenuFooter { - @HostBinding('class.iot--flyout-menu__bottom-container') className = true; -} diff --git a/packages/angular/src/flyout-menu/flyout-menu-pane.component.ts b/packages/angular/src/flyout-menu/flyout-menu-pane.component.ts deleted file mode 100644 index 81ef1936ef..0000000000 --- a/packages/angular/src/flyout-menu/flyout-menu-pane.component.ts +++ /dev/null @@ -1,204 +0,0 @@ -import { - Component, - ElementRef, - EventEmitter, - Input, - Optional, - Output, - TemplateRef, - ViewEncapsulation, -} from '@angular/core'; -import { - AnimationFrameService, - CloseMeta, - closestAttr, - Dialog, - ElementService, - position, -} from 'carbon-components-angular'; -import { I18n } from 'carbon-components-angular/i18n'; - -/** - * The Filter menu component encapsulates the OverFlowMenu directive, and the flyout iconography - * into one convienent component - * - * [See demo](../../?path=/story/components-flyout-menu--basic) - * - * html: - * ``` - * - * options - * - * ``` - */ -@Component({ - selector: 'ai-flyout-menu-pane', - template: ` -
- - -

- {{ dialogConfig.content }} -

-
- `, - encapsulation: ViewEncapsulation.None, -}) -export class FlyoutMenuPane extends Dialog { - /** - * This specifies any vertical and horizontal offset for the position of the dialog - */ - @Input() set offset(os: { x: number; y: number }) { - this._offset = os; - } - get offset(): { x: number; y: number } { - if (!this._offset) { - return { x: (this.dialogConfig.flip ? -1 : 1) * 4, y: 0 }; - } - return this._offset; - } - public hasContentTemplate = true; - public get contentTemplate() { - return this.dialogConfig.content as TemplateRef; - } - /** - * Sets the role of the tooltip. If there's no focusable content we leave it as a `tooltip`, - * if there _is_ focusable content we switch to the interactive `dialog` role. - */ - public role = 'tooltip'; - @Input() buttonLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW; - - @Input() light = false; - - get position() { - return `${this.dialogConfig.placement}-${this.dialogConfig.flip ? 'end' : 'start'}`; - } - - @Input() open = true; - - @Output() openChange = new EventEmitter(); - - private _offset; - - constructor( - protected elementRef: ElementRef, - protected elementService: ElementService, - protected i18n: I18n, - @Optional() protected animationFrameService: AnimationFrameService = null - ) { - super(elementRef, elementService, animationFrameService); - } - - shouldClose = (meta: CloseMeta) => { - return !this.dialog.nativeElement.contains(meta.target); - }; - - handleOpenChange(event: boolean) { - this.open = event; - this.openChange.emit(event); - } - - onDialogInit() { - const chevronWidth = 16; - const chevronHeight = 14; - const borderWidth = 2; - - const positionOverflowMenuVertically = (pos) => { - let offset; - const closestRel = closestAttr( - 'position', - ['relative', 'fixed', 'absolute'], - this.elementRef.nativeElement - ); - let topFix = - (closestRel ? closestRel.getBoundingClientRect().top * -1 : 0) - - chevronHeight / 2 + - 1 * borderWidth; - const leftFix = closestRel ? closestRel.getBoundingClientRect().left * -1 : 0; - - if (this.dialogConfig.placement === 'top') { - topFix += chevronHeight / 2; - } - - /* - * 20 is half the width of the overflow menu trigger element. - * we also move the element by half of it's own width, since - * position service will try and center everything - */ - offset = Math.round(this.dialog.nativeElement.offsetWidth / 2) - 20 - chevronWidth / 2; - if (this.dialogConfig.flip) { - return position.addOffset(pos, topFix, -offset + leftFix); - } - return position.addOffset(pos, topFix, offset + leftFix); - }; - - this.addGap['bottom'] = positionOverflowMenuVertically; - this.addGap['top'] = positionOverflowMenuVertically; - - const positionOverflowMenuHorizontally = (pos) => { - const adjustedOffset = this.getAdjustOffset(); - const topFix = - (this.dialog.nativeElement.offsetHeight - - this.dialogConfig.parentRef.nativeElement.offsetHeight - - borderWidth) / - 2; - let leftFix = (this.dialogConfig.placement === 'right' ? 1 : -1) * borderWidth; - if (this.dialogConfig.placement === 'right') { - leftFix -= chevronWidth / 2; - } - if (this.dialogConfig.flip) { - return position.addOffset( - pos, - -5 + adjustedOffset.top - topFix, - adjustedOffset.left + leftFix + chevronWidth / 2 - ); - } - return position.addOffset( - pos, - -3 + adjustedOffset.top + topFix, - adjustedOffset.left + leftFix - ); - }; - - this.addGap['left'] = positionOverflowMenuHorizontally; - this.addGap['right'] = positionOverflowMenuHorizontally; - - if (!this.dialogConfig.menuLabel) { - this.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW; - } - } - - getAdjustOffset() { - const closestWithPos = closestAttr( - 'position', - ['relative', 'fixed', 'absolute'], - this.elementRef.nativeElement.parentElement - ); - const topPos = closestWithPos ? closestWithPos.getBoundingClientRect().top * -1 : 0; - const leftPos = closestWithPos ? closestWithPos.getBoundingClientRect().left * -1 : 0; - - return { top: topPos, left: leftPos }; - } -} diff --git a/packages/angular/src/flyout-menu/flyout-menu.component.ts b/packages/angular/src/flyout-menu/flyout-menu.component.ts deleted file mode 100644 index 41969ee79d..0000000000 --- a/packages/angular/src/flyout-menu/flyout-menu.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; -import { IconService } from 'carbon-components-angular'; -import { Filter16 } from '@carbon/icons'; - -/** - * [See demo](../../?path=/story/components-flyout-menu--basic) - * - * html: - * ``` - * - * options - * - * ``` - * - * ../../iframe.html?id=components-flyout-menu--basic - */ -@Component({ - selector: 'ai-flyout-menu', - template: ` - -
-
- -
- -
-
-
- -
- `, - encapsulation: ViewEncapsulation.None, -}) -export class FlyoutMenu implements OnInit { - /** - * This specifies any vertical and horizontal offset for the position of the dialog - */ - @Input() set offset(os: { x: number; y: number }) { - this._offset = os; - } - get offset(): { x: number; y: number } { - if (!this._offset) { - return { x: (this.flip ? -1 : 1) * 4, y: 0 }; - } - return this._offset; - } - - @Input() flip = false; - @Input() placement: 'bottom' | 'top' | 'left' | 'right' = 'bottom'; - @Input() isOpen: boolean; - @Output() isOpenChange = new EventEmitter(); - - private _offset; - - constructor(protected iconService: IconService) {} - - ngOnInit() { - this.iconService.register(Filter16); - } -} diff --git a/packages/angular/src/flyout-menu/flyout-menu.directive.ts b/packages/angular/src/flyout-menu/flyout-menu.directive.ts deleted file mode 100644 index 19de466386..0000000000 --- a/packages/angular/src/flyout-menu/flyout-menu.directive.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { - Directive, - Input, - TemplateRef, - ElementRef, - ViewContainerRef, - HostBinding, -} from '@angular/core'; -import { EventService } from 'carbon-components-angular/utils'; -import { TooltipDirective, DialogService } from 'carbon-components-angular'; -import { FlyoutMenuPane } from './flyout-menu-pane.component'; - -/** - * selector: `aiFlyoutMenu` - */ -@Directive({ - selector: '[aiFlyoutMenu]', - exportAs: 'aiFlyoutMenu', - providers: [DialogService], -}) -export class FlyoutMenuDirective extends TooltipDirective { - /** - * The string or template content to be exposed by the tooltip. - */ - @Input() aiFlyoutMenu: string | TemplateRef; - /** - * Controls wether the overflow menu is flipped - */ - @Input() flip = false; - - @HostBinding('class.iot--flyout-menu') menuClass = true; - /** - * bx--tooltip__trigger is inherited from TooltipDirective and it enables focus indication - */ - @HostBinding('class.bx--tooltip__trigger') className = false; - /** - * Override tabindex to make it not tabbable - */ - @HostBinding('tabindex') tabIndex = -1; - @HostBinding('class.iot--flyout-menu__open') get openClass() { - return this.isOpen; - } - @HostBinding('class.iot--flyout-menu__bottom') get menuBottomClass() { - return this.placement === 'bottom'; - } - @HostBinding('class.iot--flyout-menu__top') get menuTopClass() { - return this.placement === 'top'; - } - - /** - * Creates an instance of `TooltipDirective`. - */ - constructor( - protected elementRef: ElementRef, - protected viewContainerRef: ViewContainerRef, - protected dialogService: DialogService, - protected eventService: EventService - ) { - super(elementRef, viewContainerRef, dialogService, eventService); - dialogService.setContext({ component: FlyoutMenuPane }); - } - - updateConfig() { - this.dialogConfig.content = this.aiFlyoutMenu; - this.dialogConfig.flip = this.flip; - this.dialogConfig.offset = this.offset; - this.dialogConfig.wrapperClass = this.wrapperClass; - this.dialogConfig.placement = this.placement; - } -} diff --git a/packages/angular/src/flyout-menu/flyout-menu.module.ts b/packages/angular/src/flyout-menu/flyout-menu.module.ts deleted file mode 100644 index 93b93c37d8..0000000000 --- a/packages/angular/src/flyout-menu/flyout-menu.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -// modules -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -// imports -import { - ButtonModule, - PlaceholderModule, - DialogService, - DialogModule, - LinkModule, - IconModule, - I18nModule, -} from 'carbon-components-angular'; - -import { FlyoutMenu } from './flyout-menu.component'; -import { FlyoutMenuPane } from './flyout-menu-pane.component'; -import { FlyoutMenuDirective } from './flyout-menu.directive'; -import { FlyoutMenuFooter } from './flyout-menu-footer.component'; - -@NgModule({ - declarations: [FlyoutMenu, FlyoutMenuPane, FlyoutMenuDirective, FlyoutMenuFooter], - exports: [FlyoutMenu, FlyoutMenuPane, FlyoutMenuDirective, FlyoutMenuFooter], - providers: [DialogService], - entryComponents: [FlyoutMenuPane], - imports: [ - ButtonModule, - CommonModule, - I18nModule, - PlaceholderModule, - DialogModule, - IconModule, - LinkModule, - ], -}) -export class FlyoutMenuModule {} diff --git a/packages/angular/src/flyout-menu/flyout-menu.stories.ts b/packages/angular/src/flyout-menu/flyout-menu.stories.ts deleted file mode 100644 index 9a99c21c75..0000000000 --- a/packages/angular/src/flyout-menu/flyout-menu.stories.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { boolean, select, withKnobs } from '@storybook/addon-knobs'; -import { moduleMetadata, storiesOf } from '@storybook/angular'; -import { - ButtonModule, - DialogModule, - IconModule, - PlaceholderModule, -} from 'carbon-components-angular'; - -import { FlyoutMenuModule } from './flyout-menu.module'; - -storiesOf('Components/Filter menu', module) - .addDecorator( - moduleMetadata({ - imports: [ButtonModule, DialogModule, PlaceholderModule, FlyoutMenuModule, IconModule], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` -
- -
- Filter - Clear -
- Columns - - - - -
-
- - `, - props: { - flip: boolean('flip', false), - placement: select('Placement', ['bottom', 'top', 'left', 'right'], 'bottom'), - isOpen: boolean('isOpen', false), - handleOpenChange: (isOpen) => { - console.log(`Flyout has been ${isOpen ? 'opened' : 'closed'}`); - }, - }, - })); diff --git a/packages/angular/src/flyout-menu/package.json b/packages/angular/src/flyout-menu/package.json deleted file mode 100644 index dfcdda7208..0000000000 --- a/packages/angular/src/flyout-menu/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../flyout-menu-index.ts" - } - } -} diff --git a/packages/angular/src/icon-content-switcher/icon-content-switcher-option.directive.ts b/packages/angular/src/icon-content-switcher/icon-content-switcher-option.directive.ts deleted file mode 100644 index 876426bdd8..0000000000 --- a/packages/angular/src/icon-content-switcher/icon-content-switcher-option.directive.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { Directive, HostBinding, Input } from '@angular/core'; -import { ContentSwitcherOption } from 'carbon-components-angular'; - -/** - * selector: `aiIconContentOption` - */ -@Directive({ - selector: '[aiIconContentOption]', - exportAs: 'aiIconContentOption', -}) -export class IconContentSwitcherOption extends ContentSwitcherOption { - @HostBinding('class') mainClass = `iot--icon-switch - bx--btn - bx--btn--secondary - bx--tooltip--hidden - bx--btn--icon-only - bx--tooltip__trigger - bx--tooltip--a11y - bx--btn--icon-only--top - bx--tooltip--align-center`; - @HostBinding('class.iot--icon-switch--selected') - @HostBinding('class.bx--content-switcher--selected') - selectedClass = false; - @HostBinding('class.iot--icon-switch--unselected') get unselectedClass() { - return !this.selectedClass; - } - - @HostBinding('class.iot--icon-switch--default') get isDefaultSize() { - return this.size === 'md'; - } - - @HostBinding('class.iot--icon-switch--small') get isSmallSize() { - return this.size === 'sm'; - } - - @HostBinding('class.iot--icon-switch--large') get isLargeSize() { - return this.size === 'lg'; - } - - @HostBinding('class.iot--icon-switch--light') get isLight() { - return this.theme === 'light'; - } - - @HostBinding('class.iot--icon-switch--unselected--light') get isUnselectedLight() { - return this.isLight && !this.selectedClass; - } - - @Input() size: 'sm' | 'md' | 'lg' = 'md'; - @Input() theme: 'light' | 'dark' = 'dark'; -} diff --git a/packages/angular/src/icon-content-switcher/icon-content-switcher.component.ts b/packages/angular/src/icon-content-switcher/icon-content-switcher.component.ts deleted file mode 100644 index 059446fe9f..0000000000 --- a/packages/angular/src/icon-content-switcher/icon-content-switcher.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component, ContentChildren, QueryList } from '@angular/core'; -import { ContentSwitcher } from 'carbon-components-angular'; -import { IconContentSwitcherOption } from '.'; - -/** - * [See demo](../../?path=/story/components-icon-content-switcher--basic) - * - * ```html - * - * - * - * - * - * ``` - * - * ../../iframe.html?id=components-icon-content-switcher--basic - */ -@Component({ - selector: 'ai-content-switcher', - template: ` -
- -
- `, -}) -export class IconContentSwitcher extends ContentSwitcher { - @ContentChildren(IconContentSwitcherOption) options: QueryList; -} diff --git a/packages/angular/src/icon-content-switcher/icon-content-switcher.module.ts b/packages/angular/src/icon-content-switcher/icon-content-switcher.module.ts deleted file mode 100644 index d1b88cc4e6..0000000000 --- a/packages/angular/src/icon-content-switcher/icon-content-switcher.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -// modules -import { NgModule } from '@angular/core'; - -// imports -import { IconContentSwitcherOption } from '.'; -import { IconContentSwitcher } from '.'; - -@NgModule({ - declarations: [IconContentSwitcher, IconContentSwitcherOption], - exports: [IconContentSwitcher, IconContentSwitcherOption], -}) -export class IconContentSwitcherModule {} diff --git a/packages/angular/src/icon-content-switcher/icon-content-switcher.stories.ts b/packages/angular/src/icon-content-switcher/icon-content-switcher.stories.ts deleted file mode 100644 index e1403ede72..0000000000 --- a/packages/angular/src/icon-content-switcher/icon-content-switcher.stories.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { select, withKnobs } from '@storybook/addon-knobs'; -import { action } from '@storybook/addon-actions'; -import { moduleMetadata, storiesOf } from '@storybook/angular'; -import { Component } from '@angular/core'; -import { IconModule, IconService } from 'carbon-components-angular'; -import Popup16 from '@carbon/icons/lib/popup/16'; -import Document16 from '@carbon/icons/lib/document/16'; -import Bee16 from '@carbon/icons/lib/bee/16'; - -import { IconContentSwitcherModule } from './icon-content-switcher.module'; - -@Component({ - selector: 'app-demo-icons', - template: '', -}) -class AppDemoIcons { - constructor(protected iconService: IconService) { - iconService.registerAll([Popup16, Document16, Bee16]); - } -} - -storiesOf('Components/Icon content switcher', module) - .addDecorator( - moduleMetadata({ - imports: [IconContentSwitcherModule, IconModule], - declarations: [AppDemoIcons], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` - - - - - - - `, - props: { - selected: action('selection changed'), - theme: select('theme', ['dark', 'light'], 'dark'), - }, - })); diff --git a/packages/angular/src/icon-content-switcher/index.ts b/packages/angular/src/icon-content-switcher/index.ts deleted file mode 100644 index cd1de349f3..0000000000 --- a/packages/angular/src/icon-content-switcher/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { IconContentSwitcherOption } from './icon-content-switcher-option.directive'; -export { IconContentSwitcher } from './icon-content-switcher.component'; -export { IconContentSwitcherModule } from './icon-content-switcher.module'; diff --git a/packages/angular/src/icon-content-switcher/package.json b/packages/angular/src/icon-content-switcher/package.json deleted file mode 100644 index dedb72ce9c..0000000000 --- a/packages/angular/src/icon-content-switcher/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "index.ts" - } - } -} diff --git a/packages/angular/src/icons-index.ts b/packages/angular/src/icons-index.ts deleted file mode 100644 index 6801261678..0000000000 --- a/packages/angular/src/icons-index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { AIIconsModule } from './icons/icons.module'; -export { EmptyStateDefaultIcon } from './icons/empty-state-default-icon.component'; -export { EmptyStateNoResultsIcon } from './icons/empty-state-no-results-icon.component'; -export { EmptyState404Icon } from './icons/empty-state-404-icon.component'; -export { EmptyStateErrorIcon } from './icons/empty-state-error-icon.component'; -export { EmptyStateSuccessIcon } from './icons/empty-state-success-icon.component'; -export { EmptyStateNotAuthorizedIcon } from './icons/empty-state-not-authorized-icon.component'; diff --git a/packages/angular/src/icons/empty-state-404-icon.component.ts b/packages/angular/src/icons/empty-state-404-icon.component.ts deleted file mode 100644 index 899f028be1..0000000000 --- a/packages/angular/src/icons/empty-state-404-icon.component.ts +++ /dev/null @@ -1,172 +0,0 @@ -/* tslint:disable */ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'empty-state-404-icon', - template: ` - - 404 page(80px) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, -}) -export class EmptyState404Icon { - /** - * Classes to add to the icon - */ - @Input() iconClass: string; -} diff --git a/packages/angular/src/icons/empty-state-default-icon.component.ts b/packages/angular/src/icons/empty-state-default-icon.component.ts deleted file mode 100644 index 0f7d3caab6..0000000000 --- a/packages/angular/src/icons/empty-state-default-icon.component.ts +++ /dev/null @@ -1,285 +0,0 @@ -/* tslint:disable */ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'empty-state-default-icon', - template: ` - - No search results found-2(80px) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, -}) -export class EmptyStateDefaultIcon { - /** - * Classes to add to the icon - */ - @Input() iconClass: string; -} diff --git a/packages/angular/src/icons/empty-state-error-icon.component.ts b/packages/angular/src/icons/empty-state-error-icon.component.ts deleted file mode 100644 index 89140d3208..0000000000 --- a/packages/angular/src/icons/empty-state-error-icon.component.ts +++ /dev/null @@ -1,236 +0,0 @@ -/* tslint:disable */ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'empty-state-error-icon', - template: ` - - Error(80px) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, -}) -export class EmptyStateErrorIcon { - /** - * Classes to add to the icon - */ - @Input() iconClass: string; -} diff --git a/packages/angular/src/icons/empty-state-no-results-icon.component.ts b/packages/angular/src/icons/empty-state-no-results-icon.component.ts deleted file mode 100644 index 73e161b312..0000000000 --- a/packages/angular/src/icons/empty-state-no-results-icon.component.ts +++ /dev/null @@ -1,308 +0,0 @@ -/* tslint:disable */ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'empty-state-no-results-icon', - template: ` - - No search results found(80px) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, -}) -export class EmptyStateNoResultsIcon { - /** - * Classes to add to the icon - */ - @Input() iconClass: string; -} diff --git a/packages/angular/src/icons/empty-state-not-authorized-icon.component.ts b/packages/angular/src/icons/empty-state-not-authorized-icon.component.ts deleted file mode 100644 index f6fe4e2f1e..0000000000 --- a/packages/angular/src/icons/empty-state-not-authorized-icon.component.ts +++ /dev/null @@ -1,280 +0,0 @@ -/* tslint:disable */ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'empty-state-not-authorized-icon', - template: ` - - Not authorized(80px) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, -}) -export class EmptyStateNotAuthorizedIcon { - /** - * Classes to add to the icon - */ - @Input() iconClass: string; -} diff --git a/packages/angular/src/icons/empty-state-success-icon.component.ts b/packages/angular/src/icons/empty-state-success-icon.component.ts deleted file mode 100644 index 8564d0ad2d..0000000000 --- a/packages/angular/src/icons/empty-state-success-icon.component.ts +++ /dev/null @@ -1,105 +0,0 @@ -/* tslint:disable */ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'empty-state-success-icon', - template: ` - - Success-3(80px) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, -}) -export class EmptyStateSuccessIcon { - /** - * Classes to add to the icon - */ - @Input() iconClass: string; -} diff --git a/packages/angular/src/icons/icons.module.ts b/packages/angular/src/icons/icons.module.ts deleted file mode 100644 index 29591db07f..0000000000 --- a/packages/angular/src/icons/icons.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; - -import { EmptyStateDefaultIcon } from './empty-state-default-icon.component'; -import { EmptyStateNoResultsIcon } from './empty-state-no-results-icon.component'; -import { EmptyState404Icon } from './empty-state-404-icon.component'; -import { EmptyStateErrorIcon } from './empty-state-error-icon.component'; -import { EmptyStateSuccessIcon } from './empty-state-success-icon.component'; -import { EmptyStateNotAuthorizedIcon } from './empty-state-not-authorized-icon.component'; - -@NgModule({ - declarations: [ - EmptyStateDefaultIcon, - EmptyStateNoResultsIcon, - EmptyState404Icon, - EmptyStateErrorIcon, - EmptyStateSuccessIcon, - EmptyStateNotAuthorizedIcon, - ], - imports: [CommonModule], - exports: [ - EmptyStateDefaultIcon, - EmptyStateNoResultsIcon, - EmptyState404Icon, - EmptyStateErrorIcon, - EmptyStateSuccessIcon, - EmptyStateNotAuthorizedIcon, - ], -}) -export class AIIconsModule {} diff --git a/packages/angular/src/icons/package.json b/packages/angular/src/icons/package.json deleted file mode 100644 index 59dfacfcf8..0000000000 --- a/packages/angular/src/icons/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../icons-index.ts" - } - } -} diff --git a/packages/angular/src/index.stories.ts b/packages/angular/src/index.stories.ts deleted file mode 100644 index 45c3523968..0000000000 --- a/packages/angular/src/index.stories.ts +++ /dev/null @@ -1,388 +0,0 @@ -import { moduleMetadata } from '@storybook/angular'; -import { Component, OnInit, OnDestroy } from '@angular/core'; - -import { ButtonModule } from 'carbon-components-angular'; - -@Component({ - selector: 'app-welcome', - // tslint:disable:max-line-length - template: ` -
- - -

- PAL Angular -

- - - -
- `, - // tslint:enable:max-line-length - styles: [ - ` - .overview-page__banner { - height: 100vh; - background: #5596e6; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - .banner__background { - position: fixed; - } - .banner__title { - font-size: 3.3vw; - margin-top: 8vw; - color: #fff; - text-transform: uppercase; - letter-spacing: 1px; - position: relative; - } - .banner__subtitle { - font-size: 1.8vw; - color: #fff; - z-index: 2; - } - .banner__links { - margin-top: 20px; - display: flex; - } - .banner__netlify { - position: relative; - z-index: 1; - } - .banner__logo--bold, - .banner__logo span { - font-weight: 600; - } - @media screen and (min-width: 1515px) { - .banner__title { - font-size: 50px; - } - .banner__subtitle { - font-size: 28px; - } - } - `, - ], -}) -class WelcomeStory implements OnInit, OnDestroy { - ngOnInit() { - document.querySelector('.sb-show-main').classList.add('full-page'); - } - ngOnDestroy() { - document.querySelector('.sb-show-main').classList.remove('full-page'); - } -} - -export const welcome = () => ({ - template: ``, -}); - -welcome.storyName = 'to AI Apps PAL Angular'; - -export default { - decorators: [ - moduleMetadata({ - imports: [ButtonModule], - declarations: [WelcomeStory], - }), - ], - title: 'Overview/Welcome', -}; diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts deleted file mode 100644 index bc23d17fe9..0000000000 --- a/packages/angular/src/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -export * from '@ai-apps/angular/card'; -export * from '@ai-apps/angular/button-menu'; -export * from '@ai-apps/angular/empty-state'; -export * from '@ai-apps/angular/icons'; -export * from '@ai-apps/angular/toolkit'; -export * from '@ai-apps/angular/flyout-menu'; -export * from '@ai-apps/angular/date-time-picker'; -export * from '@ai-apps/angular/list'; -export * from '@ai-apps/angular/table'; -export * from '@ai-apps/angular/rule-builder'; diff --git a/packages/angular/src/list-index.ts b/packages/angular/src/list-index.ts deleted file mode 100644 index 16d9f11597..0000000000 --- a/packages/angular/src/list-index.ts +++ /dev/null @@ -1,13 +0,0 @@ -export { ListModule } from './list/list.module'; - -// Components -export { AIListComponent, SelectionType } from './list/ai-list.component'; -export { AIListHeaderComponent } from './list/list-header/ai-list-header.component'; -export { AIListItemComponent } from './list/list-item/ai-list-item.component'; -export { AIListItemWrapperComponent } from './list/list-item/ai-list-item-wrapper.component'; - -// Interfaces and models -export { AIListItem } from './list/list-item/ai-list-item.class'; - -// Directives -export { AIListTargetDirective } from './list/list-item/ai-list-target.directive'; diff --git a/packages/angular/src/list/ai-list.component.ts b/packages/angular/src/list/ai-list.component.ts deleted file mode 100644 index 2f5376eec6..0000000000 --- a/packages/angular/src/list/ai-list.component.ts +++ /dev/null @@ -1,318 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core'; -import { AIListItem } from './list-item/ai-list-item.class'; -import { IconService } from 'carbon-components-angular'; -import { Bee32 } from '@carbon/icons'; - -export enum SelectionType { - SINGLE = 'single', - MULTI = 'multi', -} - -@Component({ - selector: 'ai-list', - template: ` -
- - -
- - -
- - -

{{ emptyState }}

-
- - -
-
-
- - - - - - - - - - - - - - - - - - - - - - `, -}) -export class AIListComponent implements OnInit { - @Input() items: AIListItem[]; - - @Input() selectionType: SelectionType; - - /** - * Indicates whether or not items in the list can be dragged into new positions. - */ - @Input() itemsDraggable: boolean; - - @Input() set isDragging(isDragging: boolean) { - let shouldEmit = false; - if (this._isDragging !== isDragging) { - shouldEmit = true; - } - this._isDragging = isDragging; - if (shouldEmit) { - this.isDraggingChange.emit(isDragging); - } - } - - get isDragging() { - return this._isDragging; - } - - @Input() set draggedItem(draggedItem: AIListItem) { - let shouldEmit = false; - if (this._draggedItem !== draggedItem) { - shouldEmit = true; - } - this._draggedItem = draggedItem; - if (shouldEmit) { - this.draggedItemChange.emit(draggedItem); - } - } - - get draggedItem() { - return this._draggedItem; - } - - /** - * Indicates whether a search bar should be rendered in the list header. - */ - @Input() hasSearch = false; - - /** - * Title to be displayed on the list header. - */ - @Input() title: string; - - @Input() isFullHeight = false; - - /** - * Text that is displayed when list is empty. To change the default - * icon with the text, this can also be set to a `TemplateRef`. - * - * The reason we are using type `any` instead of `string | TemplateRef`, - * which is the only two types that should be accepted, is because - * passing `emptyState` into `ngTemplateOutlet` would cause the error: - * `Type 'string | TemplateRef' is not assignable to type 'TemplateRef'` - * to come up while building. - */ - @Input() emptyState: any = 'No list items to show'; - - /** - * If a `hasSearch` is true, this is emitted when search value is changed. - */ - @Output() onSearch = new EventEmitter(); - - @Output() isDraggingChange = new EventEmitter(); - @Output() draggedItemChange = new EventEmitter(); - - searchString = ''; - - protected _isDragging = false; - protected _draggedItem: AIListItem = null; - - constructor(protected iconService: IconService) {} - - ngOnInit() { - this.iconService.register(Bee32); - } - - handleDragStart(item: AIListItem) { - this.isDragging = true; - this.draggedItem = item; - } - - handleDragEnd(dragEvent: DragEvent, item: AIListItem, parent: AIListItem) { - const dragEffect = dragEvent.dataTransfer.dropEffect; - - // Remove the original item if the dragged item has been successfully moved to a new position. - if (dragEffect !== 'none') { - if (parent === null) { - const droppedItemIndex = this.items.findIndex((listItem: AIListItem) => listItem === item); - this.items.splice(droppedItemIndex, 1); - } else { - const droppedItemIndex = parent.items.findIndex( - (listItem: AIListItem) => listItem === item - ); - parent.items.splice(droppedItemIndex, 1); - } - } - - this.isDragging = false; - this.draggedItem = null; - } - - handleDragOver(dragEvent: DragEvent, receiver: AIListItem) { - // Only allow dropping if: - // 1. The dragged item is not being dropped onto one of its' own children. - // 2. The dragged item is not being dropped onto itself. - if ( - this.draggedItem && - !this.draggedItem.hasItem(receiver) && - (receiver === null || receiver.id !== this.draggedItem.id) - ) { - dragEvent.preventDefault(); - } - } - - handleDrop(receiver: AIListItem, index: number) { - // A copy of the dragged item is created so that the original can be removed in `handleDragEnd`. - const item = new AIListItem(this.draggedItem); - if (receiver === null) { - this.items.splice(index, 0, item); - } else { - receiver.addItem(item, index); - } - } - - handleSelect(selectedItem: AIListItem) { - if (this.selectionType === SelectionType.MULTI) { - this.updateChildSelectedStates(selectedItem); - this.updateParentSelectedStates(this.items); - } else { - this.onSingleSelect(this.items, selectedItem.id); - } - } - - handleSearch(searchString: string) { - this.searchString = searchString; - this.onSearch.emit(searchString); - } - - /** - * This function returns the adjusted `nestingLevel`s of an AIListItem. - */ - getAdjustedNestingLevel(items: AIListItem[], currentDepth: number) { - return items.some((item) => item.hasChildren()) ? currentDepth + 1 : currentDepth; - } - - isArray(obj: any) { - return Array.isArray(obj); - } - - public isTemplate(value: any) { - return value instanceof TemplateRef; - } - - protected updateChildSelectedStates(selectedItem: AIListItem) { - if (selectedItem.hasChildren()) { - selectedItem.items.forEach((item: AIListItem) => { - if (!item.disabled) { - item.select(selectedItem.selected); - } - this.updateChildSelectedStates(item); - }); - } - } - - protected updateParentSelectedStates(items: AIListItem[]) { - items.forEach((item: AIListItem) => { - if (item.hasChildren()) { - this.updateParentSelectedStates(item.items); - } else { - return; - } - - if (item.isSelectable && item.allChildrenSelected()) { - item.select(); - item.setIndeterminate(false); - } else if (item.isSelectable && item.someChildrenSelected()) { - item.select(); - item.setIndeterminate(); - } else { - if (!item.items.every((listItem) => listItem.disabled)) { - item.select(false); - } - item.setIndeterminate(false); - } - }); - } - - protected onSingleSelect(items: AIListItem[], selectedId: string) { - items.forEach((item: AIListItem) => { - if (item.id !== selectedId) { - item.select(false); - } - - if (item.hasChildren()) { - this.onSingleSelect(item.items, selectedId); - } - }); - } -} diff --git a/packages/angular/src/list/ai-list.spec.ts b/packages/angular/src/list/ai-list.spec.ts deleted file mode 100644 index 50a92ff12c..0000000000 --- a/packages/angular/src/list/ai-list.spec.ts +++ /dev/null @@ -1,182 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { AIListComponent, ListModule } from '../list-index'; -import { AIListItem } from './list-item/ai-list-item.class'; - -const allSelected = (items: AIListItem[]) => - items.every((item) => { - if (item.hasChildren()) { - allSelected(item.items); - } - - return item.selected; - }); - -describe('List', () => { - let fixture, element, wrapper; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ListModule, CommonModule], - }); - }); - - it('should initialize an `AIListComponent`', () => { - fixture = TestBed.createComponent(AIListComponent); - expect(fixture.componentInstance instanceof AIListComponent).toBe(true); - }); - - it('should select/deselect all list item children in multi-select list', () => { - const item = new AIListItem({ - id: 'test', - isSelectable: true, - items: [ - new AIListItem({ isSelectable: true }), - new AIListItem({ isSelectable: true }), - new AIListItem({ isSelectable: true }), - new AIListItem({ isSelectable: true }), - ], - }); - - fixture = TestBed.createComponent(AIListComponent); - wrapper = fixture.componentInstance; - wrapper.items = [item]; - wrapper.selectionType = 'multi'; - - fixture.detectChanges(); - - element = fixture.debugElement.query(By.css('#test_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(allSelected(wrapper.items)).toBe(true); - - element = fixture.debugElement.query(By.css('#test_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(allSelected(wrapper.items)).toBe(false); - }); - - it('should select/deselect all list item parents in multi-select list', () => { - const item = new AIListItem({ - id: 'test', - isSelectable: true, - expanded: true, - items: [ - new AIListItem({ isSelectable: true }), - new AIListItem({ isSelectable: true }), - new AIListItem({ isSelectable: true }), - new AIListItem({ isSelectable: true }), - ], - }); - - fixture = TestBed.createComponent(AIListComponent); - wrapper = fixture.componentInstance; - wrapper.items = [ - new AIListItem({ - expanded: true, - isSelectable: true, - items: [ - new AIListItem({ - expanded: true, - isSelectable: true, - items: [ - new AIListItem({ - expanded: true, - isSelectable: true, - items: [item], - }), - ], - }), - ], - }), - ]; - - wrapper.selectionType = 'multi'; - - fixture.detectChanges(); - - element = fixture.debugElement.query(By.css('#test_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(allSelected(wrapper.items)).toBe(true); - - element = fixture.debugElement.query(By.css('#test_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(allSelected(wrapper.items)).toBe(false); - }); - - it('should set the correct indeterminate state of parents in multi-select list', () => { - const item = new AIListItem({ - isSelectable: true, - expanded: true, - items: [ - new AIListItem({ isSelectable: true, id: 'item_1', expanded: true }), - new AIListItem({ isSelectable: true, id: 'item_2', expanded: true }), - new AIListItem({ isSelectable: true, id: 'item_3', expanded: true }), - new AIListItem({ isSelectable: true, id: 'item_4', expanded: true }), - ], - }); - - fixture = TestBed.createComponent(AIListComponent); - wrapper = fixture.componentInstance; - wrapper.items = [item]; - - wrapper.selectionType = 'multi'; - - fixture.detectChanges(); - - element = fixture.debugElement.query(By.css('#item_1_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(item.indeterminate).toBe(true); - - element = fixture.debugElement.query(By.css('#item_1_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(item.indeterminate).toBe(false); - - element = fixture.debugElement.query(By.css('#item_1_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(item.indeterminate).toBe(true); - - element = fixture.debugElement.query(By.css('#item_2_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(item.indeterminate).toBe(true); - - element = fixture.debugElement.query(By.css('#item_3_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(item.indeterminate).toBe(true); - - element = fixture.debugElement.query(By.css('#item_4_checkbox_input')); - element.nativeElement.click(); - element.nativeElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(item.indeterminate).toBe(false); // Should be selected at this point. - expect(allSelected(wrapper.items)).toBe(true); - }); -}); diff --git a/packages/angular/src/list/list-header/ai-list-header.component.ts b/packages/angular/src/list/list-header/ai-list-header.component.ts deleted file mode 100644 index 7789978bb5..0000000000 --- a/packages/angular/src/list/list-header/ai-list-header.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -@Component({ - selector: 'ai-list-header', - template: ` -
-
-
- {{ title }} -
-
- -
- `, -}) -export class AIListHeaderComponent { - /** - * Title to be displayed on the list header. - */ - @Input() title: string; - - /** - * Indicates whether a search bar should be rendered in the list header. - */ - @Input() hasSearch = false; - - /** - * If a `hasSearch` is true, this is emitted when search value is changed. - */ - @Output() onSearch = new EventEmitter(); -} diff --git a/packages/angular/src/list/list-header/ai-list-header.ts b/packages/angular/src/list/list-header/ai-list-header.ts deleted file mode 100644 index 7789978bb5..0000000000 --- a/packages/angular/src/list/list-header/ai-list-header.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -@Component({ - selector: 'ai-list-header', - template: ` -
-
-
- {{ title }} -
-
- -
- `, -}) -export class AIListHeaderComponent { - /** - * Title to be displayed on the list header. - */ - @Input() title: string; - - /** - * Indicates whether a search bar should be rendered in the list header. - */ - @Input() hasSearch = false; - - /** - * If a `hasSearch` is true, this is emitted when search value is changed. - */ - @Output() onSearch = new EventEmitter(); -} diff --git a/packages/angular/src/list/list-item/ai-list-item-wrapper.component.ts b/packages/angular/src/list/list-item/ai-list-item-wrapper.component.ts deleted file mode 100644 index 1683fc7547..0000000000 --- a/packages/angular/src/list/list-item/ai-list-item-wrapper.component.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -@Component({ - selector: 'ai-list-item-wrapper', - template: ` -
-
-
-
-
-
-
- -
-
- - - - - `, -}) -export class AIListItemWrapperComponent { - /** - * Indicates whether or not the item can be dragged into a different position. - */ - @Input() draggable = false; - - @Input() isDragging = false; - - /** - * Indicates whether or not the list item can be selected. - */ - @Input() isSelectable = false; - - @Input() size: 'md' | 'lg' = 'md'; - - @Input() disabled = false; - - @Output() dragStart = new EventEmitter(); - - @Output() dragEnd = new EventEmitter(); - - @Output() dragOverAbove = new EventEmitter(); - - @Output() dragOverBelow = new EventEmitter(); - - @Output() dragOverNested = new EventEmitter(); - - @Output() droppedBelow = new EventEmitter(); - - @Output() droppedAbove = new EventEmitter(); - - @Output() droppedNested = new EventEmitter(); -} diff --git a/packages/angular/src/list/list-item/ai-list-item.class.ts b/packages/angular/src/list/list-item/ai-list-item.class.ts deleted file mode 100644 index 6789030a96..0000000000 --- a/packages/angular/src/list/list-item/ai-list-item.class.ts +++ /dev/null @@ -1,166 +0,0 @@ -import { TemplateRef } from '@angular/core'; - -export class AIListItem { - /** - * Variable used for creating unique ids for ListItems. - */ - static listItemCount = 0; - - /** - * Unique identifier for the list item. - */ - id = `list-item-${AIListItem.listItemCount++}`; - - /** - * Primary content to be displayed in the list item. - */ - value = ''; - - /** - * Indicates whether or not a list item's displayed value should be bolded. - */ - isCategory = false; - - /** - * Secondary value to be displayed in the list item. - */ - secondaryValue?: string; - - /** - * This contains an optional row action that can be rendered in the list item. - */ - rowActions?: TemplateRef; - - rowActionsContext?: any; - - /** - * If the list item has child list items, this indicates whether or not it's - * direct children are displayed. - */ - expanded = false; - - /** - * Indicates whether or not the list item can be selected. - */ - isSelectable = false; - - /** - * Indicates whether or not the item is selected. - */ - selected = false; - - disabled = false; - - /** - * Indicates whether or not the list item is in an indeterminate state. - */ - indeterminate = false; - - /** - * Optional nested items. - */ - items: AIListItem[] = []; - - size: 'md' | 'lg' = 'md'; - - /** - * Indicates whether or not the item can be dragged into a different position. - */ - isDraggable = false; - - constructor(rawData?: any) { - const data = { - ...(rawData ? rawData : {}), - items: - rawData?.items && rawData.items.length > 0 - ? rawData.items.map((item: any) => - item instanceof AIListItem ? item : new AIListItem(item) - ) - : [], - }; - Object.assign(this, {}, data); - } - - /** - * This method returns `true` if `searchString` is a substring of `value` - * or `secondaryValue` of this list item or any of its children. - * This method may be overridden to achieve a custom search. - * - * For example, if I want `ai-list` to only filter based on secondary - * values and have case matter, I can create a custom `AIListItem`: - * - * class CustomAIListItem extends AIListItem { - * constructor(rawData: any) { - * super(rawData); - * } - * - * includes(searchString: string) { - * return this.secondaryValue.includes(searchString) || this.items.some((listItem) => listItem.includes(searchString)); - * } - * } - * - * Then instead of passing in an array of `AIListItem`s into `ai-list`, - * you can pass in an array of `CustomAIListItem`s and if you have the - * search bar turned on, it will filter out items based on your custom - * `includes` method. - */ - includes(searchString: string) { - return ( - this.value.toLowerCase().includes(searchString.toLowerCase()) || - (this.secondaryValue !== undefined && - this.secondaryValue !== null && - this.secondaryValue.toLowerCase().includes(searchString.toLowerCase())) || - this.items.some((listItem) => listItem.includes(searchString)) - ); - } - - expand(expanded = true) { - this.expanded = expanded; - } - - select(selected = true) { - this.selected = selected; - } - - setIndeterminate(indeterminate = true) { - this.indeterminate = indeterminate; - } - - disable(disabled = true) { - this.disabled = disabled; - } - - addItem(listItem: AIListItem, index = 0) { - if (index > this.items.length) { - this.items.splice(this.items.length, 0, listItem); - } else { - this.items.splice(index, 0, listItem); - } - } - - removeItem(index = 0) { - if (index >= 0 && this.items.length > index) { - this.items.splice(index, 1); - } - } - - hasItem(item: AIListItem) { - if (item === undefined || item === null) { - return false; - } - - return this.id === item.id || this.items.some((listItem) => listItem.hasItem(item)); - } - - hasChildren() { - return this.items && this.items.length > 0; - } - - someChildrenSelected() { - return this.items.some((item: AIListItem) => (item.isSelectable ? item.selected : false)); - } - - allChildrenSelected() { - return this.items.every((item: AIListItem) => (item.isSelectable ? item.selected : false)); - } -} diff --git a/packages/angular/src/list/list-item/ai-list-item.component.ts b/packages/angular/src/list/list-item/ai-list-item.component.ts deleted file mode 100644 index d61ffd939c..0000000000 --- a/packages/angular/src/list/list-item/ai-list-item.component.ts +++ /dev/null @@ -1,154 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { SelectionType } from '../ai-list.component'; -import { AIListItem } from './ai-list-item.class'; -import { ChevronUp16, Draggable16 } from '@carbon/icons'; -import { IconService } from 'carbon-components-angular'; - -@Component({ - selector: 'ai-list-item', - template: ` -
-
- {{ item.value }} -
- -
-
- - -
-
-
- - -
-
-
-
- {{ item.value }} -
-
- {{ item.secondaryValue }} -
-
- - -
-
-
-
-
- `, -}) -export class AIListItemComponent implements OnInit { - @Input() item: AIListItem; - /** - * Nesting level of the list item. Determines the amount of space the item will be indented - * when rendered in the list. - */ - @Input() nestingLevel = 0; - - /** - * Indicates whether or not the item can be dragged into a different position. - */ - @Input() draggable = false; - - /** - * Indicates whether or not the list item can be selected. - */ - @Input() isSelectable = false; - - /** - * Indicates the editing style of the list item. If it is `multi` the list item will be - * rendered with a checkbox. If it is not given then the list item will not be editable, - * that is, you can't select it. - */ - @Input() selectionType: SelectionType; - - /** - * Emitted if the item has been selected. - */ - @Output() itemSelected = new EventEmitter(); - - constructor(protected iconService: IconService) {} - - ngOnInit() { - this.iconService.register(ChevronUp16); - this.iconService.register(Draggable16); - } - - handleSelect(select: boolean) { - this.item.select(select); - this.itemSelected.emit(); - } -} diff --git a/packages/angular/src/list/list-item/ai-list-item.spec.ts b/packages/angular/src/list/list-item/ai-list-item.spec.ts deleted file mode 100644 index 2073002924..0000000000 --- a/packages/angular/src/list/list-item/ai-list-item.spec.ts +++ /dev/null @@ -1,287 +0,0 @@ -import { AIListItem } from './ai-list-item.class'; - -const checkIds = (items: AIListItem[]) => - items.every((item) => { - if (item.hasChildren()) { - checkIds(item.items); - } - return item.id; - }); - -describe('List item model', () => { - it('should initialize an AIListItem', () => { - const initWithObject = new AIListItem({}); - const initWithNothing = new AIListItem(); - - expect(initWithObject).toEqual(jasmine.any(AIListItem)); - expect(initWithNothing).toEqual(jasmine.any(AIListItem)); - }); - - it('should set ids on every AIListItem', () => { - const items = [new AIListItem({}), new AIListItem({}), new AIListItem({})]; - expect(items.every((item) => item.id)).toBe(true); - }); - - it('should return `true` if list item has children and `false` if not', () => { - const itemWithChildren = new AIListItem({ - items: [new AIListItem({}), new AIListItem({})], - }); - - const itemWithoutChildren = new AIListItem({ - items: [], - }); - - const itemWithoutInitializedChildren = new AIListItem({}); - - expect(itemWithChildren.hasChildren()).toBe(true); - expect(itemWithoutChildren.hasChildren()).toBe(false); - expect(itemWithoutInitializedChildren.hasChildren()).toBe(false); - }); - - it('should set `id`s on all list item children', () => { - const items = [ - new AIListItem({ - items: [new AIListItem({}), new AIListItem({})], - }), - new AIListItem({ - items: [ - new AIListItem({ - items: [new AIListItem(), new AIListItem(), new AIListItem(), new AIListItem({})], - }), - new AIListItem({}), - ], - }), - ]; - - expect(checkIds(items)).toBe(true); - }); - - it('should not override given `id`', () => { - const item = new AIListItem({ id: 'test' }); - const nestedItem = new AIListItem({ - items: [ - new AIListItem({ - items: [new AIListItem({ id: 'test' })], - }), - ], - }); - - expect(item.id === 'test'); - expect(nestedItem.items[0].items[0].id === 'test'); - expect(checkIds([nestedItem])).toBe(true); - }); - - it('should set `expanded` to `true` and `false`', () => { - const item = new AIListItem({}); - - item.expand(); - expect(item.expanded).toBe(true); - item.expand(false); - expect(item.expanded).toBe(false); - item.expand(true); - expect(item.expanded).toBe(true); - }); - - it('should set `selected` to `true` and `false`', () => { - const item = new AIListItem({}); - - item.select(); - expect(item.selected).toBe(true); - item.select(false); - expect(item.selected).toBe(false); - item.select(true); - expect(item.selected).toBe(true); - }); - - it('should set `indeterminate` to `true` and `false`', () => { - const item = new AIListItem({}); - - item.setIndeterminate(); - expect(item.indeterminate).toBe(true); - item.setIndeterminate(false); - expect(item.indeterminate).toBe(false); - item.setIndeterminate(true); - expect(item.indeterminate).toBe(true); - }); - - it('should set `disabled` to `true` and `false`', () => { - const item = new AIListItem({}); - - item.disable(); - expect(item.disabled).toBe(true); - item.disable(false); - expect(item.disabled).toBe(false); - item.disable(true); - expect(item.disabled).toBe(true); - }); - - it('should set add a list item to the given index', () => { - const item = new AIListItem({ - items: [new AIListItem({})], - }); - item.addItem(new AIListItem({ id: 'index 0' })); - item.addItem(new AIListItem({ id: 'index 2' }), 2); - - expect(item.items[0].id).toBe('index 0'); - expect(item.items[2].id).toBe('index 2'); - }); - - it('should add a list item to the last index if given index is out of bounds', () => { - const item = new AIListItem({ - items: [new AIListItem({})], - }); - item.addItem(new AIListItem({ id: 'index 1' }), 5); - - expect(item.items[1].id).toBe('index 1'); - }); - - it('should remove the list item at the given index', () => { - const item = new AIListItem({ - items: [new AIListItem({}), new AIListItem({})], - }); - item.removeItem(1); - - expect(item.items.length).toBe(1); - }); - - it('should remove the list item at the given index', () => { - const item = new AIListItem({ - items: [new AIListItem({}), new AIListItem({})], - }); - item.removeItem(1); - - expect(item.items.length).toBe(1); - }); - - it('should return `true` if the list item has a given item as a child and `false` if not', () => { - const item = new AIListItem(); - - const nestedItems = new AIListItem({ - items: [new AIListItem(), new AIListItem(), new AIListItem(), item, new AIListItem()], - }); - - expect(nestedItems.hasItem(item)).toBe(true); - expect(nestedItems.hasItem(new AIListItem())).toBe(false); - }); - - it('should return `true` if some children are selected and selectable and `false` if not', () => { - const itemWithOneSelectedChild = new AIListItem({ - items: [ - new AIListItem({ isSelectable: true, selected: true }), - new AIListItem(), - new AIListItem(), - new AIListItem(), - ], - }); - - const itemWithAllChildrenSelected = new AIListItem({ - items: [ - new AIListItem({ isSelectable: true, selected: true }), - new AIListItem({ isSelectable: true, selected: true }), - new AIListItem({ isSelectable: true, selected: true }), - new AIListItem({ isSelectable: true, selected: true }), - ], - }); - - const itemWithNoSelectedChildren = new AIListItem({ - items: [new AIListItem(), new AIListItem(), new AIListItem(), new AIListItem()], - }); - - const itemWithAllChildrenSelectedAndNotSelectable = new AIListItem({ - items: [ - new AIListItem({ selected: true }), - new AIListItem({ selected: true }), - new AIListItem({ selected: true }), - new AIListItem({ selected: true }), - ], - }); - - expect(itemWithOneSelectedChild.someChildrenSelected()).toBe(true); - expect(itemWithAllChildrenSelected.someChildrenSelected()).toBe(true); - expect(itemWithNoSelectedChildren.someChildrenSelected()).toBe(false); - expect(itemWithAllChildrenSelectedAndNotSelectable.someChildrenSelected()).toBe(false); - }); - - it('should return `true` if all children are selected and selectable and `false` if not', () => { - const itemWithOneSelectedChild = new AIListItem({ - items: [ - new AIListItem({ isSelectable: true, selected: true }), - new AIListItem(), - new AIListItem(), - new AIListItem(), - ], - }); - - const itemWithAllChildrenSelected = new AIListItem({ - items: [ - new AIListItem({ isSelectable: true, selected: true }), - new AIListItem({ isSelectable: true, selected: true }), - new AIListItem({ isSelectable: true, selected: true }), - new AIListItem({ isSelectable: true, selected: true }), - ], - }); - - const itemWithNoSelectedChildren = new AIListItem({ - items: [new AIListItem(), new AIListItem(), new AIListItem(), new AIListItem()], - }); - - const itemWithAllChildrenSelectedAndNotSelectable = new AIListItem({ - items: [ - new AIListItem({ selected: true }), - new AIListItem({ selected: true }), - new AIListItem({ selected: true }), - new AIListItem({ selected: true }), - ], - }); - - expect(itemWithOneSelectedChild.allChildrenSelected()).toBe(false); - expect(itemWithAllChildrenSelected.allChildrenSelected()).toBe(true); - expect(itemWithNoSelectedChildren.allChildrenSelected()).toBe(false); - expect(itemWithAllChildrenSelectedAndNotSelectable.allChildrenSelected()).toBe(false); - }); - - it('Should return `true` if `value` or `secondaryValue` contains given string as a substring', () => { - const items = [ - new AIListItem({ value: 'CHAR', id: 'item 1' }), - new AIListItem({ value: 'CHARIZARD', id: 'item 2' }), - new AIListItem({ value: 'charizard', secondaryValue: 'pokemon', id: 'item 3' }), - ]; - - expect(items.filter((item) => item.includes('char')).map((item) => item.id)).toEqual([ - 'item 1', - 'item 2', - 'item 3', - ]); - expect(items.filter((item) => item.includes('charizard')).map((item) => item.id)).toEqual([ - 'item 2', - 'item 3', - ]); - expect(items.filter((item) => item.includes('pokemon')).map((item) => item.id)).toEqual([ - 'item 3', - ]); - }); - - it('Should return `true` if `value` or `secondaryValue` of a child contains given string as a substring', () => { - const items = [ - new AIListItem({ - value: 'CHAR', - id: 'item 1', - }), - new AIListItem({ value: 'CHARIZARD', id: 'item 2' }), - new AIListItem({ value: 'charizard', secondaryValue: 'pokemon', id: 'item 3' }), - ]; - - expect(items.filter((item) => item.includes('char')).map((item) => item.id)).toEqual([ - 'item 1', - 'item 2', - 'item 3', - ]); - expect(items.filter((item) => item.includes('charizard')).map((item) => item.id)).toEqual([ - 'item 2', - 'item 3', - ]); - expect(items.filter((item) => item.includes('pokemon')).map((item) => item.id)).toEqual([ - 'item 3', - ]); - }); -}); diff --git a/packages/angular/src/list/list-item/ai-list-target.directive.ts b/packages/angular/src/list/list-item/ai-list-target.directive.ts deleted file mode 100644 index 168131093b..0000000000 --- a/packages/angular/src/list/list-item/ai-list-target.directive.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core'; - -@Directive({ - selector: '[aiListTarget]', -}) -export class AIListTargetDirective { - @Input() targetPosition: 'nested' | 'above' | 'below' = 'below'; - - @Input() targetSize = 33; - - @Output() dropping = new EventEmitter(); - - @Output() dragOver = new EventEmitter(); - - @Output() dragLeave = new EventEmitter(); - - @Output() dragEnter = new EventEmitter(); - - isActive = false; - - @HostBinding('class.iot--list-item-editable--drop-target-nested') get isNested() { - return this.targetPosition === 'nested'; - } - - @HostBinding('class.iot--list-item-editable--drop-target-above') get isAbove() { - return this.targetPosition === 'above'; - } - - @HostBinding('class.iot--list-item-editable--drop-target-below') get isBelow() { - return this.targetPosition === 'below'; - } - - @HostBinding('class.iot--list-item-editable--drop-target-nested__over') get isNestedOver() { - return this.targetPosition === 'nested' && this.isActive; - } - - @HostBinding('class.iot--list-item-editable--drop-target-above__over') get isAboveOver() { - return this.targetPosition === 'above' && this.isActive; - } - - @HostBinding('class.iot--list-item-editable--drop-target-below__over') get isBelowOver() { - return this.targetPosition === 'below' && this.isActive; - } - - @HostBinding('style.height') get height() { - return `${this.targetSize}%`; - } - - @HostListener('dragenter', ['$event']) - handleDragEnter(event: DragEvent) { - this.isActive = true; - this.dragEnter.emit(event); - } - - @HostListener('dragover', ['$event']) - dragover(event: DragEvent) { - this.dragOver.emit(event); - } - - @HostListener('drop', ['$event']) - handleDrop(event: DragEvent) { - this.dropping.emit(event); - } - - @HostListener('dragleave', ['event']) - handleLeave(event: DragEvent) { - this.isActive = false; - this.dragLeave.emit(event); - } -} diff --git a/packages/angular/src/list/list.module.ts b/packages/angular/src/list/list.module.ts deleted file mode 100644 index fd52a93bd0..0000000000 --- a/packages/angular/src/list/list.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { CheckboxModule, IconModule, SearchModule } from 'carbon-components-angular'; -import { AIListComponent } from './ai-list.component'; -import { AIListHeaderComponent } from './list-header/ai-list-header.component'; -import { AIListItemComponent } from './list-item/ai-list-item.component'; -import { AIListTargetDirective } from './list-item/ai-list-target.directive'; -import { AIListItemWrapperComponent } from './list-item/ai-list-item-wrapper.component'; - -export { AIListItem } from './list-item/ai-list-item.class'; - -@NgModule({ - declarations: [ - AIListHeaderComponent, - AIListItemComponent, - AIListItemWrapperComponent, - AIListComponent, - AIListTargetDirective, - ], - exports: [ - AIListHeaderComponent, - AIListItemComponent, - AIListItemWrapperComponent, - AIListComponent, - AIListTargetDirective, - ], - imports: [CommonModule, IconModule, CheckboxModule, SearchModule], -}) -export class ListModule {} diff --git a/packages/angular/src/list/list.stories.ts b/packages/angular/src/list/list.stories.ts deleted file mode 100644 index a2068fc66a..0000000000 --- a/packages/angular/src/list/list.stories.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { AppCustomList } from './stories/app-custom-list.component'; -import { storiesOf, moduleMetadata } from '@storybook/angular'; -import { withKnobs } from '@storybook/addon-knobs'; - -import { ListModule } from './list.module'; -import { DialogModule, IconModule, PlaceholderModule } from 'carbon-components-angular'; -import { AppHierarchyList } from './stories/app-hierarchy-list.component'; -import { simpleListItems, nestedDraggableListItems, largeListItems } from './sample-data'; - -storiesOf('Components/List', module) - .addDecorator( - moduleMetadata({ - imports: [ListModule, DialogModule, IconModule, PlaceholderModule], - declarations: [AppHierarchyList, AppCustomList], - }) - ) - .addDecorator(withKnobs) - .add('Single select', () => ({ - template: ` - - `, - props: { - items: simpleListItems, - }, - })) - .add('Empty list', () => ({ - template: ` -
- -
- `, - })) - .add('Hierarchy list draggable items', () => ({ - template: ` -
-
- - -
-
- - -
-
- `, - props: { - items: nestedDraggableListItems, - secondaryItems: [], - isDragging: false, - draggedItem: null, - }, - })) - .add('With row actions', () => ({ - template: ` - - - `, - props: { - items: nestedDraggableListItems, - }, - })) - .add('With large items', () => ({ - template: ` - - - `, - props: { - items: largeListItems, - }, - })) - .add('With custom search', () => ({ - template: ` - - `, - })); diff --git a/packages/angular/src/list/package.json b/packages/angular/src/list/package.json deleted file mode 100644 index d074400bc8..0000000000 --- a/packages/angular/src/list/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../list-index.ts" - } - } -} diff --git a/packages/angular/src/list/sample-data.ts b/packages/angular/src/list/sample-data.ts deleted file mode 100644 index 3f65fa5502..0000000000 --- a/packages/angular/src/list/sample-data.ts +++ /dev/null @@ -1,134 +0,0 @@ -import { AIListItem } from './list-item/ai-list-item.class'; - -export const simpleListItems = [ - new AIListItem({ value: 'Canada', isSelectable: true }), - new AIListItem({ value: 'Brazil', isSelectable: true }), - new AIListItem({ value: 'Columbia', isSelectable: true }), - new AIListItem({ value: 'United States of America', isSelectable: true }), - new AIListItem({ value: 'Uruguay', isSelectable: true }), - new AIListItem({ value: 'Spain', isSelectable: true }), -]; - -export const largeListItems = [ - new AIListItem({ value: 'Canada', size: 'lg', isDraggable: true, isSelectable: true }), - new AIListItem({ value: 'Brazil', size: 'lg', isDraggable: true, isSelectable: true }), - new AIListItem({ value: 'Columbia', size: 'lg', isDraggable: true, isSelectable: true }), - new AIListItem({ - value: 'United States of America', - size: 'lg', - isDraggable: true, - isSelectable: true, - }), - new AIListItem({ value: 'Uruguay', size: 'lg', isDraggable: true, isSelectable: true }), - new AIListItem({ value: 'Spain', size: 'lg', isDraggable: true, isSelectable: true }), -]; - -export const nestedDraggableListItems = [ - new AIListItem({ - value: 'Canada', - isCategory: true, - expanded: true, - isSelectable: true, - isDraggable: true, - items: [ - new AIListItem({ - value: 'Toronto', - secondaryValue: '6,254,571', - isSelectable: true, - isDraggable: true, - }), - new AIListItem({ - value: 'Vancouver', - secondaryValue: '2,581,000', - isSelectable: true, - isDraggable: true, - }), - ], - }), - new AIListItem({ - value: 'Brazil', - isSelectable: true, - expanded: true, - isCategory: true, - isDraggable: true, - items: [ - new AIListItem({ - value: 'São Paulo', - secondaryValue: '12,325,232', - isSelectable: true, - isDraggable: true, - }), - new AIListItem({ - value: 'Rio de Janeiro', - isSelectable: true, - secondaryValue: '6,747,815', - isDraggable: true, - }), - ], - }), - new AIListItem({ - value: 'Columbia', - isSelectable: true, - expanded: true, - isCategory: true, - isDraggable: true, - items: [ - new AIListItem({ - value: 'Bogotá', - secondaryValue: '8,181,047', - isSelectable: true, - isDraggable: true, - }), - new AIListItem({ - value: 'Leticia', - secondaryValue: '42,280', - isSelectable: true, - isDraggable: true, - }), - ], - }), - new AIListItem({ - value: 'United States of America', - disabled: true, - isSelectable: true, - expanded: true, - isCategory: true, - isDraggable: true, - items: [ - new AIListItem({ - value: 'Chicago', - secondaryValue: '2,677,643', - disabled: true, - isSelectable: true, - isDraggable: true, - }), - new AIListItem({ - value: 'Los Angeles', - secondaryValue: '3,970,219', - isSelectable: true, - isDraggable: true, - }), - ], - }), - new AIListItem({ - value: 'Uruguay', - isSelectable: true, - expanded: true, - isCategory: true, - isDraggable: true, - items: [ - new AIListItem({ - value: 'Montevideo', - secondaryValue: '1,319,108', - isSelectable: true, - isDraggable: true, - }), - new AIListItem({ - value: 'Salto', - secondaryValue: '104,028', - isSelectable: true, - isDraggable: true, - }), - ], - }), -]; diff --git a/packages/angular/src/list/stories/app-custom-list.component.ts b/packages/angular/src/list/stories/app-custom-list.component.ts deleted file mode 100644 index 91f657fcc0..0000000000 --- a/packages/angular/src/list/stories/app-custom-list.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Component } from '@angular/core'; -import { AIListItem } from '../list-item/ai-list-item.class'; - -class CustomAIListItem extends AIListItem { - constructor(rawData: any) { - super(rawData); - } - - includes(searchString: string) { - return ( - (this.secondaryValue !== undefined && - this.secondaryValue !== null && - this.secondaryValue.includes(searchString)) || - this.items.some((listItem) => listItem.includes(searchString)) - ); - } -} - -const items = [ - new CustomAIListItem({ value: 'Canada', secondaryValue: 'Search token 1', isSelectable: true }), - new CustomAIListItem({ value: 'Brazil', secondaryValue: 'Search token 2', isSelectable: true }), - new CustomAIListItem({ value: 'Columbia', secondaryValue: 'Search token 3', isSelectable: true }), - new CustomAIListItem({ - value: 'United States of America', - secondaryValue: 'Search token 4', - isSelectable: true, - }), - new CustomAIListItem({ value: 'Uruguay', secondaryValue: 'Search token 5', isSelectable: true }), - new CustomAIListItem({ value: 'Spain', secondaryValue: 'Search token 6', isSelectable: true }), -]; - -@Component({ - selector: 'app-custom-list', - template: ` - - `, -}) -export class AppCustomList { - items = items; -} diff --git a/packages/angular/src/list/stories/app-hierarchy-list.component.ts b/packages/angular/src/list/stories/app-hierarchy-list.component.ts deleted file mode 100644 index 18bd8d96a1..0000000000 --- a/packages/angular/src/list/stories/app-hierarchy-list.component.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { AfterViewInit, Component, Input, TemplateRef, ViewChild } from '@angular/core'; -import { AIListItem } from '../list-item/ai-list-item.class'; - -@Component({ - selector: 'app-hierarchy-list', - template: ` -
-
- - -
-
-

Selected item: {{ selectedItemValue }}

-

Selected danger item: {{ dangerValue }}

-
-
- - - - Select - - Disabled - - - Danger option - - - - - `, -}) -export class AppHierarchyList implements AfterViewInit { - @Input() items: AIListItem[]; - - selectedItemValue = ''; - dangerValue = ''; - - @ViewChild('rowActions') rowActions: TemplateRef; - - addRowActions(items: AIListItem[]) { - items.forEach((item: AIListItem) => { - if (item.hasChildren()) { - this.addRowActions(item.items); - } - - if (!item.isCategory) { - item.rowActions = this.rowActions; - item.rowActionsContext = { - $implicit: { - select: () => { - this.selectedItemValue = item.value; - }, - selectDanger: () => { - this.dangerValue = item.value; - }, - }, - }; - } - }); - } - - ngAfterViewInit() { - this.addRowActions(this.items); - } -} diff --git a/packages/angular/src/list/stories/index.ts b/packages/angular/src/list/stories/index.ts deleted file mode 100644 index b13085ecd0..0000000000 --- a/packages/angular/src/list/stories/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './app-hierarchy-list.component'; -export * from './app-custom-list.component'; diff --git a/packages/angular/src/ng-package.json b/packages/angular/src/ng-package.json deleted file mode 100644 index 04210f3927..0000000000 --- a/packages/angular/src/ng-package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "$schema": "./../node_modules/ng-packagr/ng-package.schema.json", - "dest": "./../dist", - "lib": { - "entryFile": "index.ts" - }, - "whitelistedNonPeerDependencies": [ - "@ai-apps/styles", - "flatpickr", - "@carbon/icons", - "@carbon/telemetry", - "date-fns" - ] -} diff --git a/packages/angular/src/package.json b/packages/angular/src/package.json deleted file mode 100644 index 200dffcfa0..0000000000 --- a/packages/angular/src/package.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "name": "@ai-apps/angular", - "version": "0.0.0", - "description": "AI Applications PAL in Angular", - "main": "index.js", - "repository": { - "type": "git", - "url": "git@github.com:IBM/carbon-components-angular.git" - }, - "scripts": { - "postinstall": "carbon-telemetry collect --install" - }, - "publishConfig": { - "access": "public" - }, - "license": "Apache-2.0", - "author": "IBM", - "peerDependencies": { - "@angular/common": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0", - "@angular/core": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0", - "carbon-components": "^10.0.0", - "carbon-components-angular": "^4.0.0" - }, - "dependencies": { - "@ai-apps/styles": "^2.145.0-next.16", - "@carbon/icons": "10.20.0", - "@carbon/telemetry": "0.0.0-alpha.6", - "date-fns": "2.22.1", - "flatpickr": "4.6.1" - } -} diff --git a/packages/angular/src/rule-builder-index.ts b/packages/angular/src/rule-builder-index.ts deleted file mode 100644 index 53ab33188e..0000000000 --- a/packages/angular/src/rule-builder-index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { RuleComponent } from './rule-builder/rule.component'; -export { RuleBuilderGroupLogicComponent } from './rule-builder/rule-builder-group-logic.component'; -export { RuleBuilderHeaderComponent } from './rule-builder/rule-builder-header.component'; -export { RuleBuilderComponent } from './rule-builder/rule-builder.component'; -export { RuleBuilderModule } from './rule-builder/rule-builder.module'; diff --git a/packages/angular/src/rule-builder/package.json b/packages/angular/src/rule-builder/package.json deleted file mode 100644 index 82583b2253..0000000000 --- a/packages/angular/src/rule-builder/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../rule-builder-index.ts" - } - } -} diff --git a/packages/angular/src/rule-builder/rule-builder-group-logic.component.ts b/packages/angular/src/rule-builder/rule-builder-group-logic.component.ts deleted file mode 100644 index e43fcc23e5..0000000000 --- a/packages/angular/src/rule-builder/rule-builder-group-logic.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { I18n } from 'carbon-components-angular'; - -@Component({ - selector: 'ai-rule-builder-group-logic', - template: ` -
- - - -
- - {{ ofTheFollowingLabel }} - `, -}) -export class RuleBuilderGroupLogicComponent implements OnInit { - /** - * An array of options for the dropdown - * - * Each option is an object containing: - * - * `content` - the display value (you can use this for translation) - * `id` - the value used for selection, should be either `'all'` or `'any'` - * `selected` - set to `true` for the value selected by default ( by default it's `'all'`) - */ - @Input() anyAll = [ - { content: 'ALL', id: 'all', selected: true }, - { content: 'ANY', id: 'any', selected: false }, - ]; - - @Input() selected: 'any' | 'all' = 'all'; - @Input() ofTheFollowingLabel = ''; - @Output() selectedChange = new EventEmitter(); - - constructor(protected i18n: I18n) {} - - ngOnInit() { - this.ofTheFollowingLabel = - this.ofTheFollowingLabel || this.i18n.get().RULE_BUILDER.OF_THE_FOLLOWING; - } -} diff --git a/packages/angular/src/rule-builder/rule-builder-header.component.ts b/packages/angular/src/rule-builder/rule-builder-header.component.ts deleted file mode 100644 index b0a235e048..0000000000 --- a/packages/angular/src/rule-builder/rule-builder-header.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core'; -import { I18n } from 'carbon-components-angular'; - -@Component({ - selector: 'ai-rule-builder-header', - template: ` - - -
- - -
- `, -}) -export class RuleBuilderHeaderComponent implements OnInit { - @HostBinding('class.iot--rule-builder-header') ruleClass = true; - @Input() groupLogic: 'any' | 'all'; - @Input() addRuleLabel = ''; - @Input() addNewRuleLabel = ''; - @Input() addGroupLabel = ''; - @Input() addNewGroupLabel = ''; - - @Output() groupLogicChange = new EventEmitter(); - - @Output() removeRule = new EventEmitter(); - - @Output() addRule = new EventEmitter<{ id?: string; isGroup?: boolean }>(); - - constructor(protected i18n: I18n) {} - - ngOnInit() { - this.addRuleLabel = this.addRuleLabel || this.i18n.get().RULE_BUILDER.ADD_RULE; - this.addNewRuleLabel = this.addNewRuleLabel || this.i18n.get().RULE_BUILDER.ADD_NEW_RULE; - this.addGroupLabel = this.addGroupLabel || this.i18n.get().RULE_BUILDER.ADD_GROUP; - this.addNewGroupLabel = this.addNewGroupLabel || this.i18n.get().RULE_BUILDER.ADD_NEW_GROUP; - } -} diff --git a/packages/angular/src/rule-builder/rule-builder.component.ts b/packages/angular/src/rule-builder/rule-builder.component.ts deleted file mode 100644 index b9861123b4..0000000000 --- a/packages/angular/src/rule-builder/rule-builder.component.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { I18n, ListItem } from 'carbon-components-angular'; -import { - filterRulesById, - findRulePathById, - generateRule, - generateRuleGroup, - insertRuleAfterPath, -} from './utils'; - -@Component({ - selector: 'ai-rule-builder', - template: ` -
- - - - -
- `, -}) -export class RuleBuilderComponent implements OnInit { - @Input() columns: Array = []; - @Input() columnOperands: Array = [ - { content: 'Not equal', id: 'ne', selected: false }, - { content: 'Less than', id: 'lt', selected: false }, - { content: 'Less than or equal to', id: 'ltoet', selected: false }, - { content: 'Equals', id: 'eq', selected: false }, - { content: 'Greater than or equal to', id: 'gtoet', selected: false }, - { content: 'Greater than', id: 'gt', selected: false }, - { content: 'Contains', id: 'con', selected: false }, - ]; - - /** - * Example Structure: - * { - * id: '14p5ho3pcu', - * groupLogic: 'all', - * rules: [ - * { - * id: 'rsiru4rjba', - * columnId: 'column2', - * operand: 'eq', - * value: '45', - * }, - * { - * id: 'i34imt0geh', - * groupLogic: 'any', - * rules: [ - * { - * id: 'ewc2z5kyfu', - * columnId: 'column2', - * operand: 'gtoet', - * value: '46', - * }, - * ], - * } - * ] - * } - */ - @Input() tree: any; - - constructor(protected i18n: I18n) {} - - ngOnInit() { - this.updateI18nTranslationString(); - } - - updateI18nTranslationString() { - this.i18n.setLocale('en', { - RULE_BUILDER: { - ADD_RULE: 'Add rule', - REMOVE_RULE: 'Remove rule', - ADD_NEW_RULE: 'Add new rule', - ADD_GROUP: 'Add group', - ADD_NEW_GROUP: 'Add new rule group', - OF_THE_FOLLOWING: 'of the following are true', - }, - } as any); - } - - handleAddRule(id: string, isGroup) { - const generate = isGroup ? generateRuleGroup : generateRule; - - if (id) { - const rulePath = findRulePathById(this.tree.rules, id); - insertRuleAfterPath(this.tree.rules, generate(), rulePath); - return; - } - - this.tree.rules.push(generate()); - } - - handleRemoveRule(id: string) { - this.tree.rules = filterRulesById(this.tree.rules, id); - } -} diff --git a/packages/angular/src/rule-builder/rule-builder.module.ts b/packages/angular/src/rule-builder/rule-builder.module.ts deleted file mode 100644 index d624991d7c..0000000000 --- a/packages/angular/src/rule-builder/rule-builder.module.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { - ButtonModule, - DropdownModule, - IconModule, - IconService, - InputModule, - UtilsModule, -} from 'carbon-components-angular'; -import { RuleBuilderComponent } from './rule-builder.component'; -import { ContextMenuModule } from 'carbon-components-angular/context-menu'; - -import Subtract32 from '@carbon/icons/es/subtract/32'; -import Add32 from '@carbon/icons/es/add/32'; -import TextNewLine32 from '@carbon/icons/es/text--new-line/32'; - -import { RuleComponent } from './rule.component'; -import { FormsModule } from '@angular/forms'; -import { RuleBuilderHeaderComponent } from './rule-builder-header.component'; -import { RuleBuilderGroupLogicComponent } from './rule-builder-group-logic.component'; - -@NgModule({ - declarations: [ - RuleComponent, - RuleBuilderComponent, - RuleBuilderGroupLogicComponent, - RuleBuilderHeaderComponent, - ], - exports: [ - RuleComponent, - RuleBuilderComponent, - RuleBuilderGroupLogicComponent, - RuleBuilderHeaderComponent, - ], - imports: [ - CommonModule, - DropdownModule, - FormsModule, - ButtonModule, - IconModule, - InputModule, - ContextMenuModule, - UtilsModule, - ], -}) -export class RuleBuilderModule { - constructor(private iconService: IconService) { - this.iconService.register(Subtract32); - this.iconService.register(Add32); - this.iconService.register(TextNewLine32); - } -} diff --git a/packages/angular/src/rule-builder/rule-builder.stories.ts b/packages/angular/src/rule-builder/rule-builder.stories.ts deleted file mode 100644 index 417a4e13e2..0000000000 --- a/packages/angular/src/rule-builder/rule-builder.stories.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; -import { object, withKnobs } from '@storybook/addon-knobs'; -import { ContextMenuModule } from 'carbon-components-angular/context-menu'; - -import { RuleBuilderModule } from './rule-builder.module'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { DatePickerModule } from 'carbon-components-angular'; - -storiesOf('Components/Rule builder', module) - .addDecorator( - moduleMetadata({ - imports: [RuleBuilderModule, ContextMenuModule, CommonModule, FormsModule, DatePickerModule], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` - - - - -
- - - {{ tree | json }} -
- `, - props: { - tree: object('tree', { - groupLogic: 'any', - rules: [ - { operand: 'eq', id: '1' }, - { operand: 'eq', id: '2' }, - { - groupLogic: 'any', - rules: [ - { operand: 'eq', id: '3' }, - { operand: 'eq', id: '4' }, - ], - }, - ], - }), - }, - })); diff --git a/packages/angular/src/rule-builder/rule.component.ts b/packages/angular/src/rule-builder/rule.component.ts deleted file mode 100644 index 2fbe6bebf1..0000000000 --- a/packages/angular/src/rule-builder/rule.component.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core'; -import { I18n, ListItem } from 'carbon-components-angular'; - -@Component({ - selector: 'ai-rule', - template: ` - - - - - - - - - - - - - - - - - -
- - - -
-
- `, -}) -export class RuleComponent implements OnInit { - @Input() columns: Array = []; - @Input() columnOperands: Array = []; - - @Input() removeRuleLabel = ''; - @Input() addNewRuleLabel = ''; - @Input() addNewGroupLabel = ''; - - @Input() rule: any; - @Output() ruleChange = new EventEmitter(); - - @Output() removeRule = new EventEmitter(); - - @Output() addRule = new EventEmitter<{ id: string; isGroup?: boolean }>(); - - @HostBinding('class.iot--rule-builder-rule') get isRule() { - return this.rule && !this.rule.groupLogic && !Array.isArray(this.rule.rules); - } - - @HostBinding('class.iot--rule-builder-rule--group') get isRuleGroup() { - return this.rule && this.rule.groupLogic && Array.isArray(this.rule.rules); - } - - dropdownColumns: Array; - - constructor(protected i18n: I18n) {} - - ngOnInit() { - this.removeRuleLabel = this.removeRuleLabel || this.i18n.get().RULE_BUILDER.REMOVE_RULE; - this.addNewRuleLabel = this.addNewRuleLabel || this.i18n.get().RULE_BUILDER.ADD_NEW_RULE; - this.addNewGroupLabel = this.addNewGroupLabel || this.i18n.get().RULE_BUILDER.ADD_NEW_GROUP; - } - - hasTemplate() { - const selectedColumn = this.columns.find((column: any) => column.id === this.rule.columnId); - return !!selectedColumn?.valueTemplate; - } - - getTemplate() { - const selectedColumn = this.columns.find((column: any) => column.id === this.rule.columnId); - return selectedColumn?.valueTemplate; - } - - getColumnOperands() { - const selectedColumn = this.columns.find((column: any) => column.id === this.rule.columnId); - - if (selectedColumn?.operands) { - return selectedColumn.operands; - } - - return this.columnOperands; - } - - getColumns() { - // we cache this because adding operands throws a "circular" error from cca - // and doing it on the fly makes ngModel not work - if (!this.dropdownColumns) { - this.dropdownColumns = this.columns.map((column) => ({ - content: column.content, - id: column.id, - selected: column.selected, - })); - } - - return this.dropdownColumns; - } -} diff --git a/packages/angular/src/rule-builder/utils.ts b/packages/angular/src/rule-builder/utils.ts deleted file mode 100644 index 17aa6ca5e6..0000000000 --- a/packages/angular/src/rule-builder/utils.ts +++ /dev/null @@ -1,107 +0,0 @@ -/** - * RuleBuilder helper function to traverse the tree and find the indicies needed to create - * a path to the given rule ID - * - * @param {array} arr The RuleBuilder tree rules array - * @param {string} id The id of the rule to find in the tree - * @param {array} parentIndex an array of ints storing the parent indices in the path - */ -export const findRulePathById = (arr, id, parentIndex = []) => { - if (!Array.isArray(arr)) { - return []; - } - - return arr.reduce((i, rule, index) => { - if (Array.isArray(i) && i.length > 0) { - return i; - } - - if (rule.id === id) { - return [...i, ...parentIndex, index]; - } - - if (rule.rules) { - return findRulePathById(rule.rules, id, [...parentIndex, index]); - } - - return i; - }, []); -}; - -/** - * RuleBuilder helper function to filter a rule out of the tree by ID - * - * @param {array} arr The RuleBuilder tree rules - * @param {string} id The ID of the rule to filter out of the tree - */ -export const filterRulesById = (arr, id) => { - if (!Array.isArray(arr)) { - return []; - } - - return arr.reduce((carry, rule) => { - if (rule.rules && rule.rules.length) { - const rules = filterRulesById(rule.rules, id); - if (rules.length) { - return [ - ...carry, - { - ...rule, - rules, - }, - ]; - } - } else if (rule.id !== id) { - return [...carry, rule]; - } - - return carry; - }, []); -}; - -/** - * RuleBuilder helper function to insert a new rule into the tree after the given path - * - * @param {array} arr RuleBuilder tree rules - * @param {object} rule The rule object to be inserted into the tree - * @param {array} path The array of indicies making a path to the location after which the rule should be inserted - */ -export const insertRuleAfterPath = (arr, rule, path) => { - if (!Array.isArray(path) || !Array.isArray(arr)) { - return undefined; - } - - const insertionPoint = path.pop() + 1; - let current = arr; - for (let i = 0; i < path.length; i += 1) { - if (current[path[i]] && current[path[i]].rules) { - current = current[path[i]].rules; - } else { - throw new Error('INVALID_PATH_FOR_RULE_TREE'); - } - } - current.splice(insertionPoint, 0, rule); -}; - -/** - * Generates a new empty rule - */ -export const generateRule = () => { - return { - id: Math.random().toString(36).substring(2, 12).padStart(10, '0'), - columnId: '', - operand: '', - value: '', - }; -}; - -/** - * Generates a new rule group with one default rule - */ -export const generateRuleGroup = () => { - return { - id: Math.random().toString(36).substring(2, 12).padStart(10, '0'), - groupLogic: 'all', - rules: [generateRule()], - }; -}; diff --git a/packages/angular/src/side-panel-index.ts b/packages/angular/src/side-panel-index.ts deleted file mode 100644 index 0449c9c82b..0000000000 --- a/packages/angular/src/side-panel-index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { SidePanel } from './side-panel/side-panel.component'; -export { SidePanelTitleDirective } from './side-panel/side-panel-title.directive'; -export { SidePanelFooterDirective } from './side-panel/side-panel-footer.directive'; -export { SidePanelModule } from './side-panel/side-panel.module'; diff --git a/packages/angular/src/side-panel/package.json b/packages/angular/src/side-panel/package.json deleted file mode 100644 index 7175321bfa..0000000000 --- a/packages/angular/src/side-panel/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../side-panel-index.ts" - } - } -} diff --git a/packages/angular/src/side-panel/side-panel-footer.directive.ts b/packages/angular/src/side-panel/side-panel-footer.directive.ts deleted file mode 100644 index 685556eb91..0000000000 --- a/packages/angular/src/side-panel/side-panel-footer.directive.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Directive, HostBinding } from '@angular/core'; - -/** - * selector: `aiSidePanelFooter` - */ -@Directive({ - selector: '[aiSidePanelFooter]', - exportAs: 'aiSidePanelFooter', -}) -export class SidePanelFooterDirective { - @HostBinding('class.iot--side-panel-footer') footerClass = true; -} diff --git a/packages/angular/src/side-panel/side-panel-title.directive.ts b/packages/angular/src/side-panel/side-panel-title.directive.ts deleted file mode 100644 index df86382b46..0000000000 --- a/packages/angular/src/side-panel/side-panel-title.directive.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Directive, HostBinding, Input } from '@angular/core'; - -/** - * selector: `aiSidePanelTitle` - */ -@Directive({ - selector: '[aiSidePanelTitle]', - exportAs: 'aiSidePanelTitle', -}) -export class SidePanelTitleDirective { - @HostBinding('class.iot--side-panel-title') titleClass = true; - @Input() @HostBinding('class.iot--side-panel-title__condensed') condensed = false; - @Input() @HostBinding('class.iot--side-panel-title__with-close') showClose = true; -} diff --git a/packages/angular/src/side-panel/side-panel.component.ts b/packages/angular/src/side-panel/side-panel.component.ts deleted file mode 100644 index 4806c00e9b..0000000000 --- a/packages/angular/src/side-panel/side-panel.component.ts +++ /dev/null @@ -1,135 +0,0 @@ -import { - Component, - EventEmitter, - HostBinding, - Input, - OnInit, - Output, - ViewEncapsulation, -} from '@angular/core'; -import { - Close16, - ChevronLeft16, - ChevronRight16, - OpenPanelLeft16, - OpenPanelRight16, -} from '@carbon/icons'; -import { IconService } from 'carbon-components-angular'; - -/** - * - * [See demo](../../?path=/story/components-side-panel--basic) - * - * html: - * ``` - * - * options - * - * ``` - */ -@Component({ - selector: 'ai-side-panel', - template: ` -
- -
- -
-
- `, - encapsulation: ViewEncapsulation.None, -}) -export class SidePanel implements OnInit { - @HostBinding('class.iot--side-panel') sidePanelClass = true; - @HostBinding('class.iot--side-panel__slide-in') get sidePanelSlideInClass() { - return this.variation === 'slide-in'; - } - @HostBinding('class.iot--side-panel__inline') get sidePanelInlineClass() { - return this.variation === 'inline'; - } - @HostBinding('class.iot--side-panel__slide-over') get sidePanelSlideOverClass() { - return this.variation === 'slide-over'; - } - @HostBinding('class.iot--side-panel__right') get sidePanelRightClass() { - return this.side === 'right'; - } - @HostBinding('class.iot--side-panel__drawer') get sidePanelDrawerClass() { - return this.showDrawer && !this.active; - } - @Input() showClose = true; - @Input() showDrawer = false; - /** - * Name of the icon to use when `showDrawer` is `true` and `active` is `false` - */ - @Input() drawerIcon: string; - /** - * Name of the icon to use as close icon when `showDrawer` is `true` - */ - @Input() closeIcon: string; - @Input() variation: 'slide-in' | 'inline' | 'slide-over' = 'inline'; - /** - * Activates the panel when set to `true`, by sliding it in or over. - * - * Has no effect for `variation` `inline` - */ - @Input() - @HostBinding('class.active') - active = false; - - /** - * Enables overlay when active with `variation` `slide-over`. - */ - @Input() overlay: false; - - @Input() side: 'left' | 'right' = 'left'; - - @Output() close = new EventEmitter(); - - get shouldShowDrawer() { - return this.showDrawer && this.variation === 'inline'; - } - - constructor(protected iconService: IconService) {} - - ngOnInit() { - this.iconService.register(Close16); - this.iconService.register(ChevronLeft16); - this.iconService.register(ChevronRight16); - this.iconService.register(OpenPanelLeft16); - this.iconService.register(OpenPanelRight16); - } -} diff --git a/packages/angular/src/side-panel/side-panel.module.ts b/packages/angular/src/side-panel/side-panel.module.ts deleted file mode 100644 index ab6b21f769..0000000000 --- a/packages/angular/src/side-panel/side-panel.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -// modules -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -// imports -import { - ButtonModule, - PlaceholderModule, - DialogService, - DialogModule, - LinkModule, - IconModule, - I18nModule, -} from 'carbon-components-angular'; - -import { SidePanel } from './side-panel.component'; -import { SidePanelTitleDirective } from './side-panel-title.directive'; -import { SidePanelFooterDirective } from './side-panel-footer.directive'; - -@NgModule({ - declarations: [SidePanel, SidePanelTitleDirective, SidePanelFooterDirective], - exports: [SidePanel, SidePanelTitleDirective, SidePanelFooterDirective], - providers: [DialogService], - imports: [ - ButtonModule, - CommonModule, - I18nModule, - PlaceholderModule, - DialogModule, - IconModule, - LinkModule, - ], -}) -export class SidePanelModule {} diff --git a/packages/angular/src/side-panel/side-panel.stories.ts b/packages/angular/src/side-panel/side-panel.stories.ts deleted file mode 100644 index cc0e93a9e6..0000000000 --- a/packages/angular/src/side-panel/side-panel.stories.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { boolean, select, withKnobs } from '@storybook/addon-knobs'; -import { moduleMetadata, storiesOf } from '@storybook/angular'; -import { - ButtonModule, - DialogModule, - IconModule, - PlaceholderModule, -} from 'carbon-components-angular'; - -import { SidePanelModule } from './side-panel.module'; -import { action } from '@storybook/addon-actions'; - -storiesOf('Components/Side panel', module) - .addDecorator( - moduleMetadata({ - imports: [ButtonModule, DialogModule, PlaceholderModule, SidePanelModule, IconModule], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` -
- -
Filter
-
Content
-
- - -
-
-
-

Content

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a dapibus nulla. Fusce et - enim et elit rutrum interdum quis eu nulla. Nulla neque neque, condimentum eget - pellentesque sit amet, volutpat ac enim. Etiam id magna vel dolor condimentum imperdiet. - Vivamus eu pellentesque turpis, eget ultricies lectus. Vestibulum sodales massa non - lobortis interdum. Sed cursus sem in dolor tempus tempus. Pellentesque et nisi vel erat - egestas ultricies. -

-

- Etiam id risus nec mi laoreet suscipit. Phasellus porttitor accumsan placerat. Donec - auctor nunc id erat congue, tincidunt viverra diam feugiat. Donec sit amet quam vel augue - auctor posuere. Nunc maximus volutpat nulla vel vehicula. Praesent bibendum nulla at erat - facilisis sodales. Aenean aliquet dui vel iaculis tincidunt. Praesent suscipit ultrices mi - eget finibus. Mauris vehicula ultricies auctor. Nam vestibulum iaculis lectus, nec sodales - metus lobortis non. -

-

- Suspendisse nulla est, consectetur non convallis et, tristique eu risus. Sed ut tortor et - nulla tempor vulputate et vel ligula. Curabitur egestas lorem ut mi vestibulum porttitor. - Fusce eleifend vehicula semper. Donec luctus neque quam, et blandit eros accumsan at. -

-
- -
Filter
-
Content
-
- - -
-
-
- `, - props: { - showClose: boolean('showClose', true), - showDrawer: boolean('showDrawer', false), - active: boolean('active', false), - overlay: boolean('overlay', false), - titleCondensed: boolean('condensed', false), - variation: select('variation', ['slide-in', 'inline', 'slide-over'], 'inline'), - side: select('side', ['left', 'right'], 'left'), - close: action('close'), - }, - })); diff --git a/packages/angular/src/table-index.ts b/packages/angular/src/table-index.ts deleted file mode 100644 index 1bbf2ee2eb..0000000000 --- a/packages/angular/src/table-index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export * from './table/table.module'; -export * from './table/table.component'; -export * from './table/table-model.class'; -export * from './table/head/table-head.component'; -export * from './table/head/table-head-cell.component'; -export * from './table/body/table-body.component'; -export * from './table/body/table-row.component'; diff --git a/packages/angular/src/table/body/table-body.component.ts b/packages/angular/src/table/body/table-body.component.ts deleted file mode 100644 index 01c34a85b7..0000000000 --- a/packages/angular/src/table/body/table-body.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { TableBody } from 'carbon-components-angular'; - -@Component({ - // tslint:disable-next-line: component-selector - selector: '[aiTableBody]', - template: ` - - - - - - - - - - - `, -}) -export class AITableBody extends TableBody { - @Input() model: any; -} diff --git a/packages/angular/src/table/body/table-row.component.ts b/packages/angular/src/table/body/table-row.component.ts deleted file mode 100644 index 3f61136e59..0000000000 --- a/packages/angular/src/table/body/table-row.component.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { TableRowComponent } from 'carbon-components-angular'; - -@Component({ - // tslint:disable-next-line: component-selector - selector: '[aiTableRow]', - template: ` - - - - - - - - - - - - - - - - `, -}) -export class AITableRowComponent extends TableRowComponent { - /** - * `TableModel` with data the table is to display. - */ - @Input() model: any; -} diff --git a/packages/angular/src/table/head/table-head-cell.component.ts b/packages/angular/src/table/head/table-head-cell.component.ts deleted file mode 100644 index 7c9d45b307..0000000000 --- a/packages/angular/src/table/head/table-head-cell.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core'; -import { TableHeadCell } from 'carbon-components-angular'; -import { AITableHeaderItem } from '../table-model.class'; - -@Component({ - // tslint:disable-next-line: component-selector - selector: '[aiTableHeadCell]', - template: ` - - - - {{ column.data }} - - - - - - - - - `, - encapsulation: ViewEncapsulation.None, -}) -export class AITableHeadCell extends TableHeadCell { - @HostBinding('class.iot--table-head-cell') cssClass = true; - @Input() column: AITableHeaderItem; -} diff --git a/packages/angular/src/table/head/table-head.component.ts b/packages/angular/src/table/head/table-head.component.ts deleted file mode 100644 index 1dd9d8b40d..0000000000 --- a/packages/angular/src/table/head/table-head.component.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { Component, Input, ViewEncapsulation } from '@angular/core'; - -import { TableHead } from 'carbon-components-angular'; - -/** - * A subcomponent that creates the thead of the table - * - * Example - * - * ```html - * - * ``` - */ -@Component({ - // tslint:disable-next-line:component-selector - selector: '[aiTableHead]', - template: ` - - - - - - - - - - - - - - `, - encapsulation: ViewEncapsulation.None, -}) -export class AITableHeadComponent extends TableHead { - @Input() model: any; -} diff --git a/packages/angular/src/table/package.json b/packages/angular/src/table/package.json deleted file mode 100644 index e422dc43cc..0000000000 --- a/packages/angular/src/table/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../table-index.ts" - } - } -} diff --git a/packages/angular/src/table/table-model.class.spec.ts b/packages/angular/src/table/table-model.class.spec.ts deleted file mode 100644 index f0ba3d8940..0000000000 --- a/packages/angular/src/table/table-model.class.spec.ts +++ /dev/null @@ -1,1256 +0,0 @@ -import { TableItem, TableHeaderItem } from 'carbon-components-angular'; -import { AITableHeaderItem, AITableModel } from './table-model.class'; - -describe('Table', () => { - it('empty model should have length 0', () => { - let tableModel = new AITableModel(); - tableModel.setData([[]]); - - expect(tableModel.totalDataLength).toEqual(0); - }); - - it('model should handle different variants of empty data', () => { - let tableModel = new AITableModel(); - tableModel.setData(undefined); - - expect(tableModel.totalDataLength).toEqual(0); - - tableModel.setData(null); - - expect(tableModel.totalDataLength).toEqual(0); - - tableModel.setData([]); - - expect(tableModel.totalDataLength).toEqual(0); - }); - - it('should set rowsSelected when setting data', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - expect(tableModel['rowsSelected'].length).toEqual(2); - }); - - it('should set rowsExpanded when setting data', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - expect(tableModel['rowsExpanded'].length).toEqual(2); - }); - - it('should set rowsContext when setting data', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - expect(tableModel['rowsContext'].length).toEqual(2); - }); - - it('should set header when setting data', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - expect(tableModel['header'][0].length).toEqual(2); - }); - - it('should make sure each header has the same length as data', () => { - let tableModel = new AITableModel(); - tableModel.setHeader([ - [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2', colSpan: 4 }), - new AITableHeaderItem({ data: 'h3' }), - ], - [ - new AITableHeaderItem({ data: 'h11' }), - new AITableHeaderItem({ data: 'h12', colSpan: 2 }), - new AITableHeaderItem({ data: 'h13', colSpan: 2 }), - new AITableHeaderItem({ data: 'h14' }), - ], - [ - new AITableHeaderItem({ data: 'h21' }), - new AITableHeaderItem({ data: 'h22' }), - new AITableHeaderItem({ data: 'h23' }), - new AITableHeaderItem({ data: 'h24' }), - new AITableHeaderItem({ data: 'h25' }), - new AITableHeaderItem({ data: 'h26' }), - ], - ]); - tableModel.setData([ - [ - new TableItem({ data: 'A' }), - new TableItem({ data: 'B' }), - new TableItem({ data: 'C' }), - new TableItem({ data: 'D' }), - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - new TableItem({ data: 'Extra' }), - new TableItem({ data: 'Extra' }), - ], - [ - new TableItem({ data: 'G' }), - new TableItem({ data: 'H' }), - new TableItem({ data: 'I' }), - new TableItem({ data: 'J' }), - new TableItem({ data: 'K' }), - new TableItem({ data: 'L' }), - new TableItem({ data: 'Extra' }), - new TableItem({ data: 'Extra' }), - ], - ]); - - expect(tableModel['header'][0].length === tableModel.row(0).length); - expect(tableModel['header'][1].length === tableModel.row(0).length); - expect(tableModel['header'][2].length === tableModel.row(0).length); - }); - - it('should have same data in same table cell', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - [new TableItem({ data: 'G' }), new TableItem({ data: 'H' }), new TableItem({ data: 'I' })], - ]); - - expect(tableModel.row(1)[1]).toBe(tableModel.column(1)[1]); - }); - - it('should modify the data via row', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - [new TableItem({ data: 'G' }), new TableItem({ data: 'H' }), new TableItem({ data: 'I' })], - ]); - - tableModel.row(1)[1].data = 'test'; - - expect(tableModel.column(1)[1].data).toEqual('test'); - }); - - it('should modify the data via column', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - [new TableItem({ data: 'G' }), new TableItem({ data: 'H' }), new TableItem({ data: 'I' })], - ]); - - tableModel.column(1)[1].data = 'test'; - - expect(tableModel.row(1)[1].data).toEqual('test'); - }); - - it('should modify the data via data', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - [new TableItem({ data: 'G' }), new TableItem({ data: 'H' }), new TableItem({ data: 'I' })], - ]); - - tableModel.setItemData(1, 1, 'test'); - - expect(tableModel.column(1)[1].data).toEqual('test'); - expect(tableModel.row(1)[1].data).toEqual('test'); - }); - - /* **************************************************************** - *********** *********** - *********** SORTING *********** - *********** *********** - ***************************************************************** */ - - it('should sort data ascending', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - [new TableItem({ data: 'G' }), new TableItem({ data: 'H' }), new TableItem({ data: 'I' })], - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - ]); - tableModel.selectRow(1, true, false); - tableModel.setRowContext(1, 'success'); - - tableModel.sort(1); - expect(tableModel.row(0)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'B' }), - new TableItem({ data: 'C' }), - ]); - expect(tableModel.row(1)).toEqual([ - new TableItem({ data: 'D' }), - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel.row(2)).toEqual([ - new TableItem({ data: 'G' }), - new TableItem({ data: 'H' }), - new TableItem({ data: 'I' }), - ]); - expect(tableModel['rowsSelected']).toEqual([false, false, true]); - expect(tableModel.selectedRowIndices()).toEqual([2]); - expect(tableModel['rowsContext']).toEqual([undefined, undefined, 'success']); - }); - - it('should sort data descending', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - [new TableItem({ data: 'G' }), new TableItem({ data: 'H' }), new TableItem({ data: 'I' })], - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - ]); - tableModel.selectRow(1, true, false); - tableModel.setRowContext(1, 'success'); - tableModel.getClosestHeader(1).descending = true; - - tableModel.sort(1); - expect(tableModel.row(0)).toEqual([ - new TableItem({ data: 'G' }), - new TableItem({ data: 'H' }), - new TableItem({ data: 'I' }), - ]); - expect(tableModel.row(1)).toEqual([ - new TableItem({ data: 'D' }), - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel.row(2)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'B' }), - new TableItem({ data: 'C' }), - ]); - expect(tableModel['rowsSelected']).toEqual([true, false, false]); - expect(tableModel.selectedRowIndices()).toEqual([0]); - expect(tableModel['rowsContext']).toEqual(['success', undefined, undefined]); - }); - - /* **************************************************************** - *********** *********** - *********** ROWS *********** - *********** *********** - ***************************************************************** */ - - it('should get row', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - expect(tableModel.row(0)).toEqual([new TableItem({ data: 'A' }), new TableItem({ data: 'B' })]); - }); - - it('should get last row', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - expect(tableModel.row(-1)).toEqual([ - new TableItem({ data: 'C' }), - new TableItem({ data: 'D' }), - ]); - }); - - it('should add empty row to empty table', () => { - let tableModel = new AITableModel(); - tableModel.addRow(); - - expect(tableModel.totalDataLength).toEqual(1); - expect(tableModel.row(0).length).toEqual(1); - expect(tableModel.row(0)).toEqual([new TableItem()]); - expect(tableModel['rowsSelected'].length).toEqual(1); - expect(tableModel['rowsContext'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(1); - }); - - it('should add row to empty table', () => { - let tableModel = new AITableModel(); - tableModel.addRow([new TableItem({ data: 'A' }), new TableItem({ data: 'B' })]); - - expect(tableModel.totalDataLength).toEqual(1); - expect(tableModel.row(0).length).toEqual(2); - expect(tableModel.row(0)).toEqual([new TableItem({ data: 'A' }), new TableItem({ data: 'B' })]); - expect(tableModel['rowsSelected'].length).toEqual(1); - expect(tableModel['rowsContext'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(2); - }); - - it('first and last row in one row table should be the same', () => { - let tableModel = new AITableModel(); - tableModel.addRow([new TableItem({ data: 'A' }), new TableItem({ data: 'B' })]); - - expect(tableModel.row(0)).toBe(tableModel.row(-1)); - }); - - it('should add row to the beginning', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addRow([new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], 0); - - expect(tableModel.row(0)).toEqual([new TableItem({ data: 'E' }), new TableItem({ data: 'F' })]); - expect(tableModel['rowsSelected'].length).toEqual(3); - expect(tableModel['rowsContext'].length).toEqual(3); - expect(tableModel['header'][0].length).toEqual(2); - }); - - it('should add row in the middle', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addRow([new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], 1); - - expect(tableModel.row(1)).toEqual([new TableItem({ data: 'E' }), new TableItem({ data: 'F' })]); - expect(tableModel['rowsSelected'].length).toEqual(3); - expect(tableModel['rowsContext'].length).toEqual(3); - expect(tableModel['header'][0].length).toEqual(2); - }); - - it('should add row to the end', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addRow([new TableItem({ data: 'E' }), new TableItem({ data: 'F' })]); - - expect(tableModel.row(-1)).toEqual([ - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel['rowsSelected'].length).toEqual(3); - expect(tableModel['rowsContext'].length).toEqual(3); - expect(tableModel['header'][0].length).toEqual(2); - }); - - it('should add shorter row', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addRow([new TableItem({ data: 'E' })]); - - expect(tableModel.row(-1)).toEqual([new TableItem({ data: 'E' }), new TableItem()]); - expect(tableModel['rowsSelected'].length).toEqual(3); - expect(tableModel['rowsContext'].length).toEqual(3); - expect(tableModel['header'][0].length).toEqual(2); - }); - - it('should add longer row', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addRow([ - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - new TableItem({ data: 'G' }), - ]); - - expect(tableModel.row(0)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'B' }), - new TableItem(), - ]); - expect(tableModel.row(1)).toEqual([ - new TableItem({ data: 'C' }), - new TableItem({ data: 'D' }), - new TableItem(), - ]); - expect(tableModel.row(2)).toEqual([ - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - new TableItem({ data: 'G' }), - ]); - expect(tableModel['rowsSelected'].length).toEqual(3); - expect(tableModel['rowsContext'].length).toEqual(3); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should delete first row', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.deleteRow(0); - - expect(tableModel.row(0)).toEqual([new TableItem({ data: 'C' }), new TableItem({ data: 'D' })]); - expect(tableModel.totalDataLength).toEqual(1); - expect(tableModel['rowsSelected'].length).toEqual(1); - expect(tableModel['rowsContext'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(2); - }); - - it('should delete last row', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.deleteRow(-1); - - expect(tableModel.row(-1)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'B' }), - ]); - expect(tableModel.totalDataLength).toEqual(1); - expect(tableModel['rowsSelected'].length).toEqual(1); - expect(tableModel['rowsContext'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(2); - }); - - it('should delete middle row', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - [new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - ]); - - tableModel.deleteRow(1); - - expect(tableModel.row(0)).toEqual([new TableItem({ data: 'A' }), new TableItem({ data: 'B' })]); - expect(tableModel.row(1)).toEqual([new TableItem({ data: 'E' }), new TableItem({ data: 'F' })]); - expect(tableModel.totalDataLength).toEqual(2); - expect(tableModel['rowsSelected'].length).toEqual(2); - expect(tableModel['rowsContext'].length).toEqual(2); - expect(tableModel['header'][0].length).toEqual(2); - }); - - /* **************************************************************** - *********** *********** - *********** COLUMNS *********** - *********** *********** - ***************************************************************** */ - - it('should get column', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'C' }), - ]); - }); - - it('should get last column', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - expect(tableModel.column(-1)).toEqual([ - new TableItem({ data: 'B' }), - new TableItem({ data: 'D' }), - ]); - }); - - it('should add empty column to empty table', () => { - let tableModel = new AITableModel(); - tableModel.addColumn(); - - expect(tableModel.totalDataLength).toEqual(1); - expect(tableModel.row(0).length).toEqual(1); - expect(tableModel.column(0)).toEqual([new TableItem()]); - expect(tableModel['rowsSelected'].length).toEqual(1); - expect(tableModel['rowsContext'].length).toEqual(1); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(1); - }); - - it('should add column to empty table', () => { - let tableModel = new AITableModel(); - tableModel.addColumn([new TableItem({ data: 'A' }), new TableItem({ data: 'B' })]); - - expect(tableModel.totalDataLength).toEqual(2); - expect(tableModel.row(0).length).toEqual(1); - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'B' }), - ]); - expect(tableModel['rowsSelected'].length).toEqual(2); - expect(tableModel['rowsContext'].length).toEqual(2); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(1); - }); - - it('first and last column in one column table should be the same', () => { - let tableModel = new AITableModel(); - tableModel.addColumn([new TableItem({ data: 'A' }), new TableItem({ data: 'B' })]); - - expect(tableModel.column(0)).toEqual(tableModel.column(-1)); - }); - - it('should add column to the beginning', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addColumn([new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], 0); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel['rowsSelected'].length).toEqual(2); - expect(tableModel['rowsContext'].length).toEqual(2); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should add column in the middle', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addColumn([new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], 1); - - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel['rowsSelected'].length).toEqual(2); - expect(tableModel['rowsContext'].length).toEqual(2); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should add column to the end', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addColumn([new TableItem({ data: 'E' }), new TableItem({ data: 'F' })]); - - expect(tableModel.column(-1)).toEqual([ - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel['rowsSelected'].length).toEqual(2); - expect(tableModel['rowsContext'].length).toEqual(2); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should add shorter column', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addColumn([new TableItem({ data: 'E' })]); - - expect(tableModel.column(-1)).toEqual([new TableItem({ data: 'E' }), new TableItem()]); - expect(tableModel['rowsSelected'].length).toEqual(2); - expect(tableModel['rowsContext'].length).toEqual(2); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should add longer column', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.addColumn([ - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - new TableItem({ data: 'G' }), - ]); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'C' }), - new TableItem(), - ]); - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'B' }), - new TableItem({ data: 'D' }), - new TableItem(), - ]); - expect(tableModel.column(2)).toEqual([ - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - new TableItem({ data: 'G' }), - ]); - expect(tableModel['rowsSelected'].length).toEqual(3); - expect(tableModel['rowsContext'].length).toEqual(3); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should delete first column', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.deleteColumn(0); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'B' }), - new TableItem({ data: 'D' }), - ]); - expect(tableModel.totalDataLength).toEqual(2); - expect(tableModel['rowsSelected'].length).toEqual(2); - expect(tableModel['rowsContext'].length).toEqual(2); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(1); - }); - - it('should delete last column', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' })], - [new TableItem({ data: 'C' }), new TableItem({ data: 'D' })], - ]); - - tableModel.deleteColumn(-1); - - expect(tableModel.column(-1)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'C' }), - ]); - expect(tableModel.totalDataLength).toEqual(2); - expect(tableModel['rowsSelected'].length).toEqual(2); - expect(tableModel['rowsContext'].length).toEqual(2); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(1); - }); - - it('should delete middle column', () => { - let tableModel = new AITableModel(); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - ]); - - tableModel.deleteColumn(1); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'D' }), - ]); - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'C' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel.totalDataLength).toEqual(2); - expect(tableModel['rowsSelected'].length).toEqual(2); - expect(tableModel['rowsContext'].length).toEqual(2); - expect(tableModel['header'].length).toEqual(1); - expect(tableModel['header'][0].length).toEqual(2); - }); - - it('should move column to beginning', () => { - let tableModel = new AITableModel(); - tableModel.setHeader([ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2' }), - new AITableHeaderItem({ data: 'h3' }), - ]); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - ]); - - tableModel.moveColumn(1, 0); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'B' }), - new TableItem({ data: 'E' }), - ]); - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'D' }), - ]); - expect(tableModel.column(2)).toEqual([ - new TableItem({ data: 'C' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel.getClosestHeader(0).data).toEqual('h2'); - expect(tableModel.getClosestHeader(1).data).toEqual('h1'); - expect(tableModel.getClosestHeader(2).data).toEqual('h3'); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should move column to end', () => { - let tableModel = new AITableModel(); - tableModel.setHeader([ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2' }), - new AITableHeaderItem({ data: 'h3' }), - ]); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - ]); - - tableModel.moveColumn(1, 2); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'D' }), - ]); - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'C' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel.column(2)).toEqual([ - new TableItem({ data: 'B' }), - new TableItem({ data: 'E' }), - ]); - expect(tableModel.getClosestHeader(0).data).toEqual('h1'); - expect(tableModel.getClosestHeader(1).data).toEqual('h3'); - expect(tableModel.getClosestHeader(2).data).toEqual('h2'); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should move column to left', () => { - let tableModel = new AITableModel(); - tableModel.setHeader([ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2' }), - new AITableHeaderItem({ data: 'h3' }), - ]); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - ]); - - tableModel.moveColumn(2, 1); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'D' }), - ]); - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'C' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel.column(2)).toEqual([ - new TableItem({ data: 'B' }), - new TableItem({ data: 'E' }), - ]); - - expect(tableModel.getClosestHeader(0).data).toEqual(tableModel['header'][0][0].data); - expect(tableModel.getClosestHeader(1).data).toEqual(tableModel['header'][0][1].data); - expect(tableModel.getClosestHeader(2).data).toEqual(tableModel['header'][0][2].data); - - expect(tableModel.getClosestHeader(0).data).toEqual('h1'); - expect(tableModel.getClosestHeader(1).data).toEqual('h3'); - expect(tableModel.getClosestHeader(2).data).toEqual('h2'); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should move column to right', () => { - let tableModel = new AITableModel(); - tableModel.setHeader([ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2' }), - new AITableHeaderItem({ data: 'h3' }), - ]); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - ]); - - tableModel.moveColumn(0, 1); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'B' }), - new TableItem({ data: 'E' }), - ]); - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'D' }), - ]); - expect(tableModel.column(2)).toEqual([ - new TableItem({ data: 'C' }), - new TableItem({ data: 'F' }), - ]); - expect(tableModel.getClosestHeader(0).data).toEqual('h2'); - expect(tableModel.getClosestHeader(1).data).toEqual('h1'); - expect(tableModel.getClosestHeader(2).data).toEqual('h3'); - expect(tableModel['header'][0].length).toEqual(3); - }); - - it('should move (multi-line header) column to beginning', () => { - let tableModel = new AITableModel(); - tableModel.setHeader([ - [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2', colSpan: 4 }), - new AITableHeaderItem({ data: 'h3' }), - ], - [ - new AITableHeaderItem({ data: 'h11' }), - new AITableHeaderItem({ data: 'h12', colSpan: 2 }), - new AITableHeaderItem({ data: 'h13', colSpan: 2 }), - new AITableHeaderItem({ data: 'h14' }), - ], - [ - new AITableHeaderItem({ data: 'h21' }), - new AITableHeaderItem({ data: 'h22' }), - new AITableHeaderItem({ data: 'h23' }), - new AITableHeaderItem({ data: 'h24' }), - new AITableHeaderItem({ data: 'h25' }), - new AITableHeaderItem({ data: 'h26' }), - ], - ]); - tableModel.setData([ - [ - new TableItem({ data: 'A' }), - new TableItem({ data: 'B' }), - new TableItem({ data: 'C' }), - new TableItem({ data: 'D' }), - new TableItem({ data: 'E' }), - new TableItem({ data: 'F' }), - ], - [ - new TableItem({ data: 'G' }), - new TableItem({ data: 'H' }), - new TableItem({ data: 'I' }), - new TableItem({ data: 'J' }), - new TableItem({ data: 'K' }), - new TableItem({ data: 'L' }), - ], - ]); - - tableModel.moveColumn(1, 0); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'B' }), - new TableItem({ data: 'H' }), - ]); - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'C' }), - new TableItem({ data: 'I' }), - ]); - expect(tableModel.column(2)).toEqual([ - new TableItem({ data: 'D' }), - new TableItem({ data: 'J' }), - ]); - expect(tableModel.column(3)).toEqual([ - new TableItem({ data: 'E' }), - new TableItem({ data: 'K' }), - ]); - expect(tableModel.column(4)).toEqual([ - new TableItem({ data: 'A' }), - new TableItem({ data: 'G' }), - ]); - expect(tableModel.column(5)).toEqual([ - new TableItem({ data: 'F' }), - new TableItem({ data: 'L' }), - ]); - expect(tableModel['header'][0].length).toEqual(3); - expect(tableModel['header'][1].length).toEqual(4); - expect(tableModel['header'][2].length).toEqual(6); - expect(tableModel['header'][0].map((h) => h.data)).toEqual(['h2', 'h1', 'h3']); - expect(tableModel['header'][1].map((h) => h.data)).toEqual(['h12', 'h13', 'h11', 'h14']); - expect(tableModel['header'][2].map((h) => h.data)).toEqual([ - 'h22', - 'h23', - 'h24', - 'h25', - 'h21', - 'h26', - ]); - }); - - it('should move (multi-line header with row spans) column to beginning', () => { - let tableModel = new AITableModel(); - tableModel.setHeader([ - [ - new TableHeaderItem({ data: 'h1', colSpan: 4 }), - new TableHeaderItem({ data: 'h2', rowSpan: 4 }), - new TableHeaderItem({ data: 'h3', colSpan: 2, rowSpan: 2 }), - new TableHeaderItem({ data: 'h4', colSpan: 2 }), - ], - [ - new TableHeaderItem({ data: 'h11' }), - new TableHeaderItem({ data: 'h12', rowSpan: 2, colSpan: 2 }), - new TableHeaderItem({ data: 'h13', rowSpan: 3 }), - new TableHeaderItem({ data: 'h41', rowSpan: 3 }), - new TableHeaderItem({ data: 'h42' }), - ], - [ - new TableHeaderItem({ data: 'h111' }), - new TableHeaderItem({ data: 'h31', colSpan: 2 }), - new TableHeaderItem({ data: 'h421' }), - ], - [ - new TableHeaderItem({ data: 'h1111' }), - new TableHeaderItem({ data: 'h121' }), - new TableHeaderItem({ data: 'h122' }), - new TableHeaderItem({ data: 'h311' }), - new TableHeaderItem({ data: 'h312' }), - new TableHeaderItem({ data: 'h422' }), - ], - ]); - - tableModel.setData([ - [ - new TableItem({ data: 'd1111' }), - new TableItem({ data: 'd121' }), - new TableItem({ data: 'd122' }), - new TableItem({ data: 'd13' }), - new TableItem({ data: 'd2' }), - new TableItem({ data: 'd311' }), - new TableItem({ data: 'd312' }), - new TableItem({ data: 'd41' }), - new TableItem({ data: 'd422' }), - ], - [ - new TableItem({ data: 'd1111' }), - new TableItem({ data: 'd121' }), - new TableItem({ data: 'd122' }), - new TableItem({ data: 'd13' }), - new TableItem({ data: 'd2' }), - new TableItem({ data: 'd311' }), - new TableItem({ data: 'd312' }), - new TableItem({ data: 'd41' }), - new TableItem({ data: 'd422' }), - ], - ]); - - tableModel.moveColumn(2, 0, 0); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'd311' }), - new TableItem({ data: 'd311' }), - ]); - - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'd312' }), - new TableItem({ data: 'd312' }), - ]); - - expect(tableModel.column(2)).toEqual([ - new TableItem({ data: 'd1111' }), - new TableItem({ data: 'd1111' }), - ]); - - expect(tableModel.column(3)).toEqual([ - new TableItem({ data: 'd121' }), - new TableItem({ data: 'd121' }), - ]); - - expect(tableModel.column(4)).toEqual([ - new TableItem({ data: 'd122' }), - new TableItem({ data: 'd122' }), - ]); - - expect(tableModel.column(5)).toEqual([ - new TableItem({ data: 'd13' }), - new TableItem({ data: 'd13' }), - ]); - - expect(tableModel.column(6)).toEqual([ - new TableItem({ data: 'd2' }), - new TableItem({ data: 'd2' }), - ]); - - expect(tableModel.column(7)).toEqual([ - new TableItem({ data: 'd41' }), - new TableItem({ data: 'd41' }), - ]); - - expect(tableModel.column(8)).toEqual([ - new TableItem({ data: 'd422' }), - new TableItem({ data: 'd422' }), - ]); - }); - - it('should move (multi-line header with row spans) column to the end', () => { - let tableModel = new AITableModel(); - tableModel.setHeader([ - [ - new TableHeaderItem({ data: 'h1', colSpan: 4 }), - new TableHeaderItem({ data: 'h2', rowSpan: 4 }), - new TableHeaderItem({ data: 'h3', colSpan: 2, rowSpan: 2 }), - new TableHeaderItem({ data: 'h4', colSpan: 2 }), - ], - [ - new TableHeaderItem({ data: 'h11' }), - new TableHeaderItem({ data: 'h12', rowSpan: 2, colSpan: 2 }), - new TableHeaderItem({ data: 'h13', rowSpan: 3 }), - new TableHeaderItem({ data: 'h41', rowSpan: 3 }), - new TableHeaderItem({ data: 'h42' }), - ], - [ - new TableHeaderItem({ data: 'h111' }), - new TableHeaderItem({ data: 'h31', colSpan: 2 }), - new TableHeaderItem({ data: 'h421' }), - ], - [ - new TableHeaderItem({ data: 'h1111' }), - new TableHeaderItem({ data: 'h121' }), - new TableHeaderItem({ data: 'h122' }), - new TableHeaderItem({ data: 'h311' }), - new TableHeaderItem({ data: 'h312' }), - new TableHeaderItem({ data: 'h422' }), - ], - ]); - - tableModel.setData([ - [ - new TableItem({ data: 'd1111' }), - new TableItem({ data: 'd121' }), - new TableItem({ data: 'd122' }), - new TableItem({ data: 'd13' }), - new TableItem({ data: 'd2' }), - new TableItem({ data: 'd311' }), - new TableItem({ data: 'd312' }), - new TableItem({ data: 'd41' }), - new TableItem({ data: 'd422' }), - ], - [ - new TableItem({ data: 'd1111' }), - new TableItem({ data: 'd121' }), - new TableItem({ data: 'd122' }), - new TableItem({ data: 'd13' }), - new TableItem({ data: 'd2' }), - new TableItem({ data: 'd311' }), - new TableItem({ data: 'd312' }), - new TableItem({ data: 'd41' }), - new TableItem({ data: 'd422' }), - ], - ]); - - tableModel.moveColumn(1, 3, 0); - - expect(tableModel.column(0)).toEqual([ - new TableItem({ data: 'd1111' }), - new TableItem({ data: 'd1111' }), - ]); - - expect(tableModel.column(1)).toEqual([ - new TableItem({ data: 'd121' }), - new TableItem({ data: 'd121' }), - ]); - - expect(tableModel.column(2)).toEqual([ - new TableItem({ data: 'd122' }), - new TableItem({ data: 'd122' }), - ]); - - expect(tableModel.column(3)).toEqual([ - new TableItem({ data: 'd13' }), - new TableItem({ data: 'd13' }), - ]); - - expect(tableModel.column(4)).toEqual([ - new TableItem({ data: 'd311' }), - new TableItem({ data: 'd311' }), - ]); - - expect(tableModel.column(5)).toEqual([ - new TableItem({ data: 'd312' }), - new TableItem({ data: 'd312' }), - ]); - - expect(tableModel.column(6)).toEqual([ - new TableItem({ data: 'd41' }), - new TableItem({ data: 'd41' }), - ]); - - expect(tableModel.column(7)).toEqual([ - new TableItem({ data: 'd422' }), - new TableItem({ data: 'd422' }), - ]); - - expect(tableModel.column(8)).toEqual([ - new TableItem({ data: 'd2' }), - new TableItem({ data: 'd2' }), - ]); - }); - - it('should calculate correct actual index', () => { - const header = [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2', colSpan: 3 }), - new AITableHeaderItem({ data: 'h3', colSpan: 4 }), - ]; - const tableModel = new AITableModel(); - - expect(tableModel['projectedIndexToActualIndex'](0, header)).toEqual(0); - expect(tableModel['projectedIndexToActualIndex'](1, header)).toEqual(1); - expect(tableModel['projectedIndexToActualIndex'](2, header)).toEqual(1); - expect(tableModel['projectedIndexToActualIndex'](3, header)).toEqual(1); - expect(tableModel['projectedIndexToActualIndex'](4, header)).toEqual(2); - expect(tableModel['projectedIndexToActualIndex'](5, header)).toEqual(2); - expect(tableModel['projectedIndexToActualIndex'](6, header)).toEqual(2); - expect(tableModel['projectedIndexToActualIndex'](7, header)).toEqual(2); - }); - - it('should calculate correct projected indices', () => { - const header = [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2', colSpan: 3 }), - new AITableHeaderItem({ data: 'h3', colSpan: 4 }), - ]; - const tableModel = new AITableModel(); - - expect(tableModel['actualIndexToProjectedIndices'](0, header)).toEqual([0]); - expect(tableModel['actualIndexToProjectedIndices'](1, header)).toEqual([1, 2, 3]); - expect(tableModel['actualIndexToProjectedIndices'](2, header)).toEqual([4, 5, 6, 7]); - }); - - it('should calculate correct projected indices', () => { - const header = [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2', colSpan: 3 }), - new AITableHeaderItem({ data: 'h3', colSpan: 4 }), - ]; - const header2 = [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2', colSpan: 2 }), - new AITableHeaderItem({ data: 'h3' }), - new AITableHeaderItem({ data: 'h4', colSpan: 2 }), - new AITableHeaderItem({ data: 'h5', colSpan: 2 }), - ]; - const tableModel = new AITableModel(); - - expect( - tableModel['projectedIndicesToActualIndices']( - tableModel['actualIndexToProjectedIndices'](0, header), - header2 - ) - ).toEqual([0]); - expect( - tableModel['projectedIndicesToActualIndices']( - tableModel['actualIndexToProjectedIndices'](1, header), - header2 - ) - ).toEqual([1, 2]); - expect( - tableModel['projectedIndicesToActualIndices']( - tableModel['actualIndexToProjectedIndices'](2, header), - header2 - ) - ).toEqual([3, 4]); - }); - - it('should move multiple array items to left', () => { - const header = [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2' }), - new AITableHeaderItem({ data: 'h3' }), - new AITableHeaderItem({ data: 'h4' }), - new AITableHeaderItem({ data: 'h5' }), - new AITableHeaderItem({ data: 'h6' }), - ]; - const tableModel = new AITableModel(); - - tableModel['moveMultipleToIndex']([1, 2, 3], 0, header); - - expect(header.map((item) => item.data)).toEqual(['h2', 'h3', 'h4', 'h1', 'h5', 'h6']); - }); - - it('should move one array items to left', () => { - const header = [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2' }), - new AITableHeaderItem({ data: 'h3' }), - new AITableHeaderItem({ data: 'h4' }), - new AITableHeaderItem({ data: 'h5' }), - new AITableHeaderItem({ data: 'h6' }), - ]; - const tableModel = new AITableModel(); - - tableModel['moveMultipleToIndex']([1], 0, header); - - expect(header.map((item) => item.data)).toEqual(['h2', 'h1', 'h3', 'h4', 'h5', 'h6']); - }); - - it('should move multiple array items to right', () => { - const header = [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2' }), - new AITableHeaderItem({ data: 'h3' }), - new AITableHeaderItem({ data: 'h4' }), - new AITableHeaderItem({ data: 'h5' }), - new AITableHeaderItem({ data: 'h6' }), - ]; - const tableModel = new AITableModel(); - - tableModel['moveMultipleToIndex']([1, 2, 3], 4, header); - - expect(header.map((item) => item.data)).toEqual(['h1', 'h5', 'h2', 'h3', 'h4', 'h6']); - }); - - it('should move one array items to right', () => { - const header = [ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2' }), - new AITableHeaderItem({ data: 'h3' }), - new AITableHeaderItem({ data: 'h4' }), - new AITableHeaderItem({ data: 'h5' }), - new AITableHeaderItem({ data: 'h6' }), - ]; - const tableModel = new AITableModel(); - - tableModel['moveMultipleToIndex']([1], 2, header); - expect(header.map((item) => item.data)).toEqual(['h1', 'h3', 'h2', 'h4', 'h5', 'h6']); - }); - - it('should preserve header if data is emptied', () => { - let tableModel = new AITableModel(); - tableModel.setHeader([ - new AITableHeaderItem({ data: 'h1' }), - new AITableHeaderItem({ data: 'h2' }), - new AITableHeaderItem({ data: 'h3' }), - ]); - tableModel.setData([ - [new TableItem({ data: 'A' }), new TableItem({ data: 'B' }), new TableItem({ data: 'C' })], - [new TableItem({ data: 'D' }), new TableItem({ data: 'E' }), new TableItem({ data: 'F' })], - ]); - tableModel.setData([[]]); - expect(tableModel['header'][0].length).toEqual(3); - expect(tableModel.getClosestHeader(0).data).toEqual('h1'); - expect(tableModel.getClosestHeader(1).data).toEqual('h2'); - expect(tableModel.getClosestHeader(2).data).toEqual('h3'); - }); -}); diff --git a/packages/angular/src/table/table-model.class.ts b/packages/angular/src/table/table-model.class.ts deleted file mode 100644 index a3fa39860f..0000000000 --- a/packages/angular/src/table/table-model.class.ts +++ /dev/null @@ -1,1157 +0,0 @@ -import { PaginationModel, TableHeaderItem, TableItem, TableRow } from 'carbon-components-angular'; -import { Subject } from 'rxjs'; - -export type HeaderType = number | 'select' | 'expand'; - -export class AITableHeaderItem extends TableHeaderItem { - /** - * Defines the alignment of the the header item and the column below it. - */ - alignment: 'start' | 'center' | 'end' = 'start'; - - constructor(rawData?: any) { - super(rawData); - - const defaults = { - alignment: this.alignment, - }; - - // fill our object with provided props, and fallback to defaults - Object.assign(this, defaults, rawData); - } -} - -/** - * TableModel represents a data model for two-dimensional data. It's used for all things table - * (table component, table toolbar, pagination, etc) - * - * TableModel manages its internal data integrity very well if you use the provided helper - * functions for modifying rows and columns and assigning header and data in that order. - */ -export class AITableModel implements PaginationModel { - /** - * The number of models instantiated, used for (among other things) unique id generation - */ - protected static COUNT = 0; - - dataChange = new Subject(); - rowsSelectedChange = new Subject(); - rowsExpandedChange = new Subject(); - /** - * Gets emitted when `selectAll` is called. Emits false if all rows are deselected and true if - * all rows are selected. - */ - selectAllChange = new Subject(); - - /** - * Contains class name(s) of the row. - * - * It affects styling of the row to reflect the appended class name(s). - * - * It's empty or undefined by default - */ - rowsClass: string[] = []; - - /** - * Tracks the current page. - */ - currentPage = 1; - - /** - * Length of page. - */ - pageLength = 10; - - /** - * Set to true when there is no more data to load in the table - */ - isEnd = false; - - /** - * Set to true when lazy loading to show loading indicator - */ - isLoading = false; - - /** - * Absolute total number of rows of the table. - */ - protected _totalDataLength: number; - - /** - * Manually set data length in case the data in the table doesn't - * correctly reflect all the data that table is to display. - * - * Example: if you have multiple pages of data that table will display - * but you're loading one at a time. - * - * Set to `null` to reset to default behavior. - */ - set totalDataLength(length: number) { - // if this function is called without a parameter we need to set to null to avoid having undefined != null - this._totalDataLength = length || null; - } - - /** - * Total length of data that table has access to, or the amount manually set - */ - get totalDataLength() { - // if manually set data length - if (this._totalDataLength !== null && this._totalDataLength >= 0) { - return this._totalDataLength; - } - - // if empty dataset - if (this._data && this._data.length === 1 && this._data[0].length === 0) { - return 0; - } - - return this._data.length; - } - - /** - * Used in `data` - */ - protected _data: TableItem[][] = [[]]; - - /** - * Contains information about the header cells of the table. - */ - protected header: AITableHeaderItem[][] = [[]]; - - /** - * The number of models instantiated, this is to make sure each table has a different - * model count for unique id generation. - */ - protected tableModelCount = 0; - - /** - * Contains information about selection state of rows in the table. - */ - protected rowsSelected: boolean[] = []; - - /** - * Contains information about expanded state of rows in the table. - */ - protected rowsExpanded: boolean[] = []; - - /** - * Contains information about the context of the row. - * - * It affects styling of the row to reflect the context. - * - * string can be one of `"success" | "warning" | "info" | "error" | ""` and it's - * empty or undefined by default - */ - protected rowsContext: string[] = []; - - constructor() { - this.tableModelCount = AITableModel.COUNT++; - } - - /** - * Sets data of the table. - * - * Make sure all rows are the same length to keep the column count accurate. - */ - setData(newData: TableItem[][]) { - if (!newData || (Array.isArray(newData) && newData.length === 0)) { - newData = [[]]; - } - - this._data = newData; - - // init rowsSelected - this.rowsSelected = new Array(this._data.length).fill(false); - this.rowsExpanded = new Array(this._data.length).fill(false); - - // init rowsContext - this.rowsContext = new Array(this._data.length); - - // init rowsClass - this.rowsClass = new Array(this._data.length); - - // only create a fresh header if necessary (header doesn't exist or differs in length) - // this will only create a single level of headers (it will destroy any existing header items) - if (this.header == null) { - const newHeader = [[]]; - // disable this tslint here since we don't actually want to - // loop the contents of the data - // tslint:disable-next-line: prefer-for-of - for (let i = 0; i < this._data[0].length; i++) { - newHeader[0].push(new AITableHeaderItem()); - } - this.header = newHeader; - } else { - this.header.forEach((headerRow, rowIndex) => { - const projectedRowLength = this.projectedRowLength(headerRow, rowIndex, this.header); - if (projectedRowLength < this._data[0].length && this._data[0].length > 0) { - const difference = this._data[0].length - projectedRowLength; - // disable this tslint here since we don't actually want to - // loop the difference between contents of data and projected header row length - // tslint:disable-next-line: prefer-for-of - for (let i = 0; i < difference; i++) { - headerRow.push(new AITableHeaderItem()); - } - } - }); - } - - this.dataChange.next(); - } - - /** - * Sets data of the table. - * - * Make sure all rows are the same length to keep the column count accurate. - */ - setHeader( - newHeader: TableHeaderItem[][] | TableHeaderItem[] | AITableHeaderItem[][] | AITableHeaderItem[] - ) { - if (!newHeader) { - newHeader = [[]]; - } else if (Array.isArray(newHeader) && newHeader.length > 0 && !Array.isArray(newHeader[0])) { - newHeader = [newHeader as any]; - } else if (Array.isArray(newHeader) && newHeader.length === 0) { - newHeader = [[]]; - } - - newHeader = (newHeader as any).map((row: any): AITableHeaderItem[] => - row.map( - (col: any): AITableHeaderItem => - col.constructor.name === 'AITableHeaderItem' ? col : new AITableHeaderItem(col) - ) - ); - - this.header = newHeader as AITableHeaderItem[][]; - - this.dataChange.next(); - } - - setItem(rowIndex: number, columnIndex: number, item: TableItem) { - this._data[rowIndex][columnIndex] = item; - // TODO make sure changes are reflected in the table - } - - setItemData(rowIndex: number, columnIndex: number, data: any) { - this._data[rowIndex][columnIndex].data = data; - // TODO make sure changes are reflected in the table - } - - /** - * Returns an id for the given column - * - * @param column the column to generate an id for - * @param row the row of the header to generate an id for - */ - getId(column: HeaderType, row = 0): string { - return `table-header-${row}-${column}-${this.tableModelCount}`; - } - - /** - * Returns the id of the header. Used to link the cells with headers (or headers with headers) - * - * @param column the column to start getting headers for - * @param colSpan the number of columns to get headers for (defaults to 1) - */ - getHeaderId(column: HeaderType, colSpan = 1): string { - if (column === 'select' || column === 'expand') { - return this.getId(column); - } - - let ids = []; - for (let i = column; i >= 0; i--) { - if (this.header[i]) { - for (let j = 0; j < colSpan; j++) { - ids.push(this.getId(i + j)); - } - break; - } - } - - return ids.join(' '); - } - - /** - * Finds closest header by trying the lowest cell in header and then work its way to the left - * @param column - */ - getClosestHeader(column) { - if (!this.header) { - return null; - } - - for (let i = this.header.length - 1; i >= 0; i--) { - const headerCell = this.header[i][column]; - - if (headerCell) { - return headerCell; - } - } - - for (let i = column; i >= 0; i--) { - const headerCell = this.header[0][i]; - if (headerCell) { - return headerCell; - } - } - - return null; - } - - /** - * @returns a list of indices of selected rows - */ - selectedRowIndices(): number[] { - return this.rowsSelected.reduce((acc: number[], current, index) => { - if (current) { - return [...acc, index]; - } - - return acc; - }, []); - } - - /** - * Returns how many rows is currently selected - */ - selectedRowsCount(): number { - let count = 0; - if (this.rowsSelected) { - this.rowsSelected.forEach((rowSelected) => { - if (rowSelected) { - count++; - } - }); - } - return count; - } - - /** - * @returns a list of indices of expanded rows - */ - expandedRowIndices(): number[] { - return this.rowsExpanded.reduce((acc: number[], current, index) => { - if (current) { - return [...acc, index]; - } - - return acc; - }, []); - } - - /** - * Returns how many rows is currently expanded - */ - expandedRowsCount(): number { - let count = 0; - if (this.rowsExpanded) { - this.rowsExpanded.forEach((rowExpanded) => { - if (rowExpanded) { - count++; - } - }); - } - return count; - } - - /** - * Returns `index`th row of the table. - * - * Negative index starts from the end. -1 being the last element. - * - * @param index - */ - row(index: number): TableItem[] { - return this._data[this.realRowIndex(index)]; - } - - /** - * Returns all the rows. - * - * Use `row()` instead. - */ - rows(): TableItem[][] { - return this._data; - } - - /** - * Adds a row to the `index`th row or appends to table if index not provided. - * - * If row is shorter than other rows or not provided, it will be padded with - * empty `TableItem` elements. - * - * If row is longer than other rows, others will be extended to match so no data is lost. - * - * If called on an empty table with no parameters, it creates a 1x1 table. - * - * Negative index starts from the end. -1 being the last element. - * - * @param [row] - * @param [index] - */ - addRow(row?: TableItem[], index?: number) { - // if table empty create table with row - if (!this._data || this._data.length === 0 || this._data[0].length === 0) { - let newData = new Array>(); - newData.push(row ? row : [new TableItem()]); // row or one empty one column row - this.setData(newData); - - return; - } - - let realRow = row; - const columnCount = this._data[0].length; - - if (row == null) { - realRow = new Array(); - for (let i = 0; i < columnCount; i++) { - realRow.push(new TableItem()); - } - } - - if (realRow.length < columnCount) { - // extend the length of realRow - const difference = columnCount - realRow.length; - for (let i = 0; i < difference; i++) { - realRow.push(new TableItem()); - } - } else if (realRow.length > columnCount) { - // extend the length of header - let difference = realRow.length - this.projectedRowLength(this.header[0], 0, this.header); - for (let j = 0; j < difference; j++) { - // add to the first header row and row-span to fill the height of the header - const headerItem = new AITableHeaderItem(); - headerItem.rowSpan = this.header.length; - this.header[0].push(headerItem); - } - // extend the length of every other row - for (let i = 0; i < this._data.length; i++) { - let currentRow = this._data[i]; - difference = realRow.length - currentRow.length; - for (let j = 0; j < difference; j++) { - currentRow.push(new TableItem()); - } - } - } - - if (index == null) { - this._data.push(realRow); - - // update rowsSelected property for length - this.rowsSelected.push(false); - - // update rowsExpanded property for length - this.rowsExpanded.push(false); - - // update rowsContext property for length - this.rowsContext.push(undefined); - - // update rowsClass property for length - this.rowsClass.push(undefined); - } else { - const ri = this.realRowIndex(index); - this._data.splice(ri, 0, realRow); - - // update rowsSelected property for length - this.rowsSelected.splice(ri, 0, false); - - // update rowsExpanded property for length - this.rowsExpanded.splice(ri, 0, false); - - // update rowsContext property for length - this.rowsContext.splice(ri, 0, undefined); - - // update rowsClass property for length - this.rowsClass.splice(ri, 0, undefined); - } - - this.dataChange.next(); - } - - /** - * Deletes `index`th row. - * - * Negative index starts from the end. -1 being the last element. - * - * @param index - */ - deleteRow(index: number) { - const rri = this.realRowIndex(index); - this._data.splice(rri, 1); - this.rowsSelected.splice(rri, 1); - this.rowsExpanded.splice(rri, 1); - this.rowsContext.splice(rri, 1); - this.rowsClass.splice(rri, 1); - - this.dataChange.next(); - } - - rowMetaInfo(index: number) { - return { - selected: this.rowsSelected[index], - expanded: this.rowsExpanded[index], - expandable: this.isRowExpandable(index), - context: this.rowsContext[index], - rowClass: this.rowsClass[index], - }; - } - - hasExpandableRows() { - return this._data.some((data) => data.some((d) => d && d.expandedData)); // checking for some in 2D array - } - - isRowExpandable(index: number) { - return this._data[index].some((d) => d && d.expandedData); - } - - isRowExpanded(index: number) { - return this.rowsExpanded[index]; - } - - getRowContext(index: number) { - return this.rowsContext[index]; - } - - setRowContext(index: number, context: string) { - return (this.rowsContext[index] = context); - } - - /** - * Returns `index`th column of the table. - * - * Negative index starts from the end. -1 being the last element. - * - * @param index - */ - column(index: number): TableItem[] { - let column = new Array(); - const ri = this.realColumnIndex(index); - const rc = this._data.length; - - for (let i = 0; i < rc; i++) { - const row = this._data[i]; - column.push(row[ri]); - } - - return column; - } - - /** - * Adds a column to the `index`th column or appends to table if index not provided. - * - * If column is shorter than other columns or not provided, it will be padded with - * empty `TableItem` elements. - * - * If column is longer than other columns, others will be extended to match so no data is lost. - * - * If called on an empty table with no parameters, it creates a 1x1 table. - * - * Negative index starts from the end. -1 being the last element. - * - * @param [column] - * @param [index] - */ - addColumn(column?: TableItem[], index?: number) { - // if table empty create table with row - if (!this._data || this._data.length === 0 || this._data[0].length === 0) { - let newData = new Array>(); - if (column == null) { - newData.push([new TableItem()]); - } else { - for (let i = 0; i < column.length; i++) { - let item = column[i]; - newData.push([item]); - } - } - this.setData(newData); - - return; - } - - let rc = this._data.length; // row count - let ci = this.realColumnIndex(index); - - // append missing rows - for (let i = 0; column != null && i < column.length - rc; i++) { - this.addRow(); - } - rc = this._data.length; - if (index == null) { - // append to end - for (let i = 0; i < rc; i++) { - let row = this._data[i]; - row.push(column == null || column[i] == null ? new TableItem() : column[i]); - } - // update header if not already set by user - if (this.header.length > 0 && this.header[0].length < this._data[0].length) { - // add to the first header row and row-span to fill the height of the header - const headerItem = new AITableHeaderItem(); - headerItem.rowSpan = this.header.length; - this.header[0].push(headerItem); - } - } else { - if (index >= this._data[0].length) { - // if trying to append - ci++; - } - // insert - for (let i = 0; i < rc; i++) { - let row = this._data[i]; - row.splice(ci, 0, column == null || column[i] == null ? new TableItem() : column[i]); - } - // update header if not already set by user - if (this.header.length > 0 && this.header[0].length < this._data[0].length) { - // add to the first header row and row-span to fill the height of the header - const headerItem = new AITableHeaderItem(); - headerItem.rowSpan = this.header.length; - // this.header[0].push(headerItem); - this.header[0].splice(ci, 0, headerItem); - } - } - - this.dataChange.next(); - } - - /** - * Deletes `index`th column. - * - * Negative index starts from the end. -1 being the last element. - * - * @param index - */ - deleteColumn(index: number) { - const rci = this.realColumnIndex(index); - const rowCount = this._data.length; - for (let i = 0; i < rowCount; i++) { - this._data[i].splice(rci, 1); - } - // update header if not already set by user - if (this.header.length > 0 && this.header[0].length > this._data[0].length) { - for (let i = 0; i < this.header.length; i++) { - const headerRow = this.header[i]; - headerRow.splice(rci, 1); - } - } - - this.dataChange.next(); - } - - /** - * Move the column at `indexFrom` to `indexTo` of the `rowIndex` row - * - * _Note: only works with one row headers at the moment_ - * - * If headers have merged cells, they should only be merged in a way that a higher row - * contains all the lower row columns and not vice versa - * - * Multiline header example *(good)*: - * - * | h1 | h2 |||| - * | h11 | h12 || h13 || - * | h21 | h22 | h23 | h24 | h25 | - * |-----|-----|-----|-----|-----| - * | a | b | c | d | e | - * | f | g | h | i | j | - * - * Multiline header example *(not good)*: - * - * | h1 | h2 |||| - * | h21 | h22 | h23 | h24 | h25 | - * | h11 | h12 || h13 || - * |-----|-----|-----|-----|-----| - * | a | b | c | d | e | - * | f | g | h | i | j | - * - * ## Usage example: - * - * ### Moving h2 in place of h1 - * - * `model.moveColumn(1, 0)` - * - * *Before* - * - * | h1 | h2 |||| - * | h11 | h12 || h13 || - * | h21 | h22 | h23 | h24 | h25 | - * |-----|-----|-----|-----|-----| - * | a | b | c | d | e | - * | f | g | h | i | j | - * - * *After* - * - * | h2 | h1 |||| - * | h12 || h13 | h11 || - * | h22 | h23 | h24 | h25 | h21 | - * |-----|-----|-----|-----|-----| - * | b | c | d | e | a | - * | g | h | i | j | f | - * - * ### Moving h13 in place of h12 - * - * `model.moveColumn(2, 1, 1)` - * - * *Before* - * - * | h1 | h2 |||| - * | h11 | h12 || h13 || - * | h21 | h22 | h23 | h24 | h25 | - * |-----|-----|-----|-----|-----| - * | a | b | c | d | e | - * | f | g | h | i | j | - * - * *After* - * - * | h1 | h2 |||| - * | h11 | h13 || h12 || - * | h21 | h24 | h25 | h22 | h23 | - * |-----|-----|-----|-----|-----| - * | a | d | e | b | c | - * | f | i | j | g | h | - * - * ### Moving h24 in place of h25 - * - * `model.moveColumn(3, 4, 2)` - * - * _Note: while you_ could _move h24 to h22, you shouldn't because it doesn't belong under_ - * _the same subheader._ - * - * *Before* - * - * | h1 | h2 |||| - * | h11 | h12 || h13 || - * | h21 | h22 | h23 | h24 | h25 | - * |-----|-----|-----|-----|-----| - * | a | b | c | d | e | - * | f | g | h | i | j | - * - * *After* - * - * | h1 | h2 |||| - * | h11 | h12 || h13 || - * | h21 | h22 | h23 | h25 | h24 | - * |-----|-----|-----|-----|-----| - * | a | b | c | e | d | - * | f | g | h | j | i | - */ - moveColumn(indexFrom: number, indexTo: number, rowIndex = 0) { - const nested = this.tabularToNested(); - this.moveNested(nested, indexFrom, indexTo, rowIndex); - const { header, data } = this.nestedToTabular(nested); - this.header = header; - this._data = data; - } - - /** - * Sorts the data currently present in the model based on `compare()` - * - * Direction is set by `ascending` and `descending` properties of `AITableHeaderItem` - * in `index`th column. - * - * @param index The column based on which it's sorting - */ - sort(index: number) { - const headerToSort = this.getClosestHeader(index); - this.pushRowStateToModelData(); - this._data.sort( - (a, b) => (headerToSort.descending ? -1 : 1) * headerToSort.compare(a[index], b[index]) - ); - this.popRowStateFromModelData(); - this.header.forEach((headerRow: AITableHeaderItem[]) => { - headerRow.forEach((column) => { - if (column) { - column.sorted = false; - } - }); - }); - headerToSort.sorted = true; - } - - /** - * Appends `rowsSelected` and `rowsExpanded` info to model data. - * - * When sorting rows, do this first so information about row selection - * gets sorted with the other row info. - * - * Call `popRowSelectionFromModelData()` after sorting to make everything - * right with the world again. - */ - pushRowStateToModelData() { - for (let i = 0; i < this._data.length; i++) { - const rowSelectedMark = new TableItem(); - rowSelectedMark.data = this.rowsSelected[i]; - this._data[i].push(rowSelectedMark); - - const rowExpandedMark = new TableItem(); - rowExpandedMark.data = this.rowsExpanded[i]; - this._data[i].push(rowExpandedMark); - - const rowContext = new TableItem(); - rowContext.data = this.rowsContext[i]; - this._data[i].push(rowContext); - - const rowClass = new TableItem(); - rowClass.data = this.rowsClass[i]; - this._data[i].push(rowClass); - } - } - - /** - * Restores `rowsSelected` from data pushed by `pushRowSelectionToModelData()` - * - * Call after sorting data (if you previously pushed to maintain selection order) - * to make everything right with the world again. - */ - popRowStateFromModelData() { - for (let i = 0; i < this._data.length; i++) { - this.rowsClass[i] = this._data[i].pop().data; - this.rowsContext[i] = this._data[i].pop().data; - this.rowsExpanded[i] = !!this._data[i].pop().data; - this.rowsSelected[i] = !!this._data[i].pop().data; - } - } - - /** - * Checks if row is filtered out. - * - * @param index - * @returns true if any of the filters in header filters out the `index`th row - */ - isRowFiltered(index: number): boolean { - const realIndex = this.realRowIndex(index); - return this.header.some((headerRow: AITableHeaderItem[]) => - headerRow.some((item, i) => item && item.filter(this.row(realIndex)[i])) - ); - } - - /** - * Select/deselect `index`th row based on value - * - * @param index index of the row to select - * @param value state to set the row to. Defaults to `true` - */ - selectRow(index: number, value = true, emitChange = true) { - if (this.isRowDisabled(index)) { - return; - } - this.rowsSelected[index] = value; - if (emitChange) { - this.rowsSelectedChange.next(index); - } - } - - /** - * Selects or deselects all rows in the model - * - * @param value state to set all rows to. Defaults to `true` - */ - selectAll(value = true) { - if (this._data.length >= 1) { - for (let i = 0; i < this.rowsSelected.length; i++) { - this.selectRow(i, value); - } - } - this.selectAllChange.next(value); - } - - isRowSelected(index: number) { - return this.rowsSelected[index]; - } - - /** - * Checks if row is disabled or not. - */ - isRowDisabled(index: number) { - const row = this._data[index] as TableRow; - return !!row.disabled; - } - - /** - * Expands/Collapses `index`th row based on value - * - * @param index index of the row to expand or collapse - * @param value expanded state of the row. `true` is expanded and `false` is collapsed - */ - expandRow(index: number, value = true) { - this.rowsExpanded[index] = value; - this.rowsExpandedChange.next(index); - } - - /** - * Gets the true index of a row based on it's relative position. - * Like in Python, positive numbers start from the top and - * negative numbers start from the bottom. - * - * @param index - */ - protected realRowIndex(index: number): number { - return this.realIndex(index, this._data.length); - } - - /** - * Gets the true index of a column based on it's relative position. - * Like in Python, positive numbers start from the top and - * negative numbers start from the bottom. - * - * @param index - */ - protected realColumnIndex(index: number): number { - return this.realIndex(index, this._data[0].length); - } - - /** - * Generic function to calculate the real index of something. - * Used by `realRowIndex()` and `realColumnIndex()` - * - * @param index - * @param length - */ - protected realIndex(index: number, length: number): number { - if (index == null) { - return length - 1; - } else if (index >= 0) { - return index >= length ? length - 1 : index; - } else { - return -index >= length ? 0 : length + index; - } - } - - protected projectedRowLengthSimple(itemArray: any[]) { - return itemArray.reduce((len, item) => len + (item ? item.colSpan || 1 : 0), 0); - } - - /** - * @param itemArray TableItem[] | AITableHeaderItem[] - * @returns the number of columns as if now cells were merged - */ - protected projectedRowLength(itemArray: any[], rowIndex?: number, matrix?: any[][]) { - // `any[]` should be `AITableItem[] | AITableHeaderItem[]` but typescript - if (rowIndex === undefined || matrix === undefined) { - return this.projectedRowLengthSimple(itemArray); - } - - // the rest of the function takes into account row spans - const rowLengths = matrix.map((row) => this.projectedRowLengthSimple(row)); - - for (let index = 0; index < rowIndex; index++) { - const row = matrix[index]; - row.forEach((item) => { - if (item && item.rowSpan) { - // increment all row lengths that the span covers - for (let i = index + 1; i < index + 1 + item.rowSpan; i++) { - rowLengths[i]++; - } - } - }); - } - return rowLengths[rowIndex]; - } - - /** - * Convert a projected index to actual index, where actual index is the index in the list - * that's passed in - * @param projectedIndex index of a column if none of the cells were merged - * @param list a row of the header or the body - */ - protected projectedIndexToActualIndex( - projectedIndex: number, - list: AITableHeaderItem[] | TableItem[] - ) { - let index = 0; - for (let i = 0; i < list.length; i++) { - const item = list[i]; - index += item?.colSpan || 1; - if (index > projectedIndex) { - return i; - } - } - return list.length - 1; - } - - /** - * Convert an actual index to a projected indices array - * @param actualIndex index of a column as-is - * @param list a row of the header or the body - */ - protected actualIndexToProjectedIndices( - actualIndex: number, - list: AITableHeaderItem[] | TableItem[] - ) { - // find the starting projected index - let startingIndex = 0; - for (let i = 0; i < actualIndex; i++) { - const item = list[i]; - startingIndex += item.colSpan || 1; - } - - return new Array(list[actualIndex].colSpan).fill(0).map((_, index) => startingIndex + index); - } - - protected projectedIndicesToActualIndices( - projectedIndices: number[], - list: AITableHeaderItem[] | TableItem[] - ) { - const actualIndicesSet = new Set(); - - for (let projectedIndex of projectedIndices) { - actualIndicesSet.add(this.projectedIndexToActualIndex(projectedIndex, list)); - } - - return Array.from(actualIndicesSet).sort() as number[]; - } - - protected moveMultipleToIndex(indices: number[], index, list: AITableHeaderItem[] | TableItem[]) { - // assumes indices is sorted low to high and continuous - // NOTE might need to generalize it - const blockStart = indices[0]; - const blockEnd = indices[indices.length - 1]; - // if moving to left - if (blockStart > index) { - const block = list.splice(blockStart, blockEnd - blockStart + 1); - list.splice.apply(list, [index, 0].concat(block)); - } else { - // if moving to right - const block = list.slice(blockStart, blockEnd + 1); - list.splice.apply(list, [index + 1, 0].concat(block)); - list.splice(blockStart, blockEnd - blockStart + 1); - } - } - - protected tabularToNested( - headerRow: AITableHeaderItem[] = [], - availableHeaderItems: AITableHeaderItem[][] = [], - // This allows us to walk the leaves as if they were in a list from left to right. - // We need to pass by reference so that we can update this value from within the recursion. - leafIndexRef = { current: 0 }, - rowIndex = 0 - ) { - if (!headerRow.length && rowIndex === 0) { - headerRow = this.header[0]; - } - - if (!availableHeaderItems.length) { - availableHeaderItems = this.header.map((headerRow) => - headerRow.filter((headerItem) => headerItem !== null) - ); - } - - return headerRow - .filter((headerItem) => headerItem !== null) - .map((headerItem, i) => { - const colSpan = headerItem?.colSpan || 1; - const rowSpan = headerItem?.rowSpan || 1; - - // Leaf - if (rowIndex + rowSpan >= this.header.length) { - const leafIndex = leafIndexRef.current; - leafIndexRef.current += colSpan; - - return { - headerItem, - leafIndex, - rowIndex, - children: [], - }; - } - - let spaceLeft = colSpan; - const availableChildren = availableHeaderItems[rowIndex + rowSpan]; - const children = []; - - while (spaceLeft > 0 && availableChildren.length) { - const nextChild = availableChildren.shift(); - spaceLeft -= nextChild?.colSpan || 1; - children.push(nextChild); - } - - return { - headerItem, - leafIndex: -1, - rowIndex, - children: this.tabularToNested( - children, - availableHeaderItems, - leafIndexRef, - rowIndex + rowSpan - ), - }; - }); - } - - protected nestedToTabular( - nested: any, - header: AITableHeaderItem[][] = new Array(this.header.length).fill([]), - data: TableItem[][] = new Array(this._data.length).fill([]), - rowIndex = 0 - ) { - nested.forEach((headerObj: any) => { - const rowSpan = headerObj.headerItem?.rowSpan || 1; - const colSpan = headerObj.headerItem?.colSpan || 1; - - header[rowIndex] = [...header[rowIndex], headerObj.headerItem]; - - if (headerObj.leafIndex >= 0) { - for (let i = 0; i < data.length; i++) { - data[i] = [ - ...data[i], - ...this._data[i].slice(headerObj.leafIndex, headerObj.leafIndex + colSpan), - ]; - } - } - - if (rowIndex + rowSpan >= this.header.length) { - return; - } - - const children = headerObj.children; - this.nestedToTabular(children, header, data, rowIndex + rowSpan); - }); - - return { - header, - data, - }; - } - - /** - * Move `nested` element at `rowIndex` with index `indexFrom` to `indexTo`. - */ - protected moveNested( - nested: any, - indexFrom: number, - indexTo: number, - rowIndex = 0, - startingChildIndex = 0 - ) { - if (!nested.length) { - return; - } - - const currentRowIndex = nested[0].rowIndex; - if ( - currentRowIndex === rowIndex && - startingChildIndex <= indexFrom && - startingChildIndex + nested.length >= indexFrom && - startingChildIndex <= indexTo && - startingChildIndex + nested.length >= indexTo - ) { - this.moveMultipleToIndex( - [indexFrom - startingChildIndex], - indexTo - startingChildIndex, - nested - ); - return; - } - - nested.forEach((headerObj: any, i: number) => { - const rowSpan = headerObj.headerItem?.rowSpan || 1; - const children = headerObj.children; - this.moveNested( - children, - indexFrom, - indexTo, - rowIndex, - this.header[currentRowIndex + rowSpan]?.indexOf(children[0]?.headerItem) - ); - }); - } -} diff --git a/packages/angular/src/table/table.component.ts b/packages/angular/src/table/table.component.ts deleted file mode 100644 index 14774e594a..0000000000 --- a/packages/angular/src/table/table.component.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { Component, Input, ViewEncapsulation } from '@angular/core'; -import { Table } from 'carbon-components-angular'; - -/** - * AI PAL table component - * - * Example: - * ``` - * - * ``` - */ -@Component({ - selector: 'ai-table', - template: ` - - - - - - - - - - - - - - - - - - - -
-
- -
-
-
- - - -
-
-
{{ getEndOfDataText() | async }}
- -
- `, - encapsulation: ViewEncapsulation.None, -}) -export class AITableComponent extends Table { - @Input() model: any; -} diff --git a/packages/angular/src/table/table.module.ts b/packages/angular/src/table/table.module.ts deleted file mode 100644 index fae3128752..0000000000 --- a/packages/angular/src/table/table.module.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { - ButtonModule, - DialogModule, - IconModule, - IconService, - TableModule, -} from 'carbon-components-angular'; - -import { CommonModule } from '@angular/common'; -import { AITableHeadCell } from './head/table-head-cell.component'; -import { AITableHeadComponent } from './head/table-head.component'; -import { AITableComponent } from './table.component'; -import { AITableBody } from './body/table-body.component'; -import { AITableRowComponent } from './body/table-row.component'; - -import ArrowsVertical16 from '@carbon/icons/es/arrows--vertical/16'; -import ArrowDown16 from '@carbon/icons/es/arrow--down/16'; -import Filter16 from '@carbon/icons/es/filter/16'; - -@NgModule({ - declarations: [ - AITableComponent, - AITableBody, - AITableHeadComponent, - AITableHeadCell, - AITableRowComponent, - ], - imports: [DialogModule, ButtonModule, CommonModule, TableModule], - exports: [ - AITableComponent, - AITableBody, - AITableHeadComponent, - AITableHeadCell, - AITableRowComponent, - ], -}) -export class AITableModule { - constructor(protected iconService: IconService) { - iconService.registerAll([ArrowsVertical16, ArrowDown16, Filter16]); - } -} diff --git a/packages/angular/src/table/table.stories.ts b/packages/angular/src/table/table.stories.ts deleted file mode 100644 index 18b2bc1b8e..0000000000 --- a/packages/angular/src/table/table.stories.ts +++ /dev/null @@ -1,294 +0,0 @@ -import { boolean, select, text, withKnobs } from '@storybook/addon-knobs'; -import { action } from '@storybook/addon-actions'; -import { moduleMetadata, storiesOf } from '@storybook/angular'; -import { ButtonModule, TableItem } from 'carbon-components-angular'; - -import { AITableHeaderItem, AITableModel } from './table-model.class'; -import { AITableModule } from './table.module'; - -import { EmptyStateModule } from '../empty-state-index'; - -const simpleModel = new AITableModel(); -const simpleMultiHeaderModel = new AITableModel(); -const complexModel = new AITableModel(); -const emptyDataModel = new AITableModel(); - -simpleModel.setHeader([ - [ - new AITableHeaderItem({ data: 'hwer1', alignment: 'center' }), - new AITableHeaderItem({ data: 'hwer2', alignment: 'center' }), - new AITableHeaderItem({ data: 'hwer3', alignment: 'center' }), - new AITableHeaderItem({ data: 'hwer4', alignment: 'center' }), - ], -]); - -simpleModel.setData([ - [ - new TableItem({ data: 'Name 1' }), - new TableItem({ data: 'qwer' }), - new TableItem({ data: 'qwer1' }), - new TableItem({ data: 'qwer2' }), - ], - [ - new TableItem({ data: 'Name 3' }), - new TableItem({ data: 'zwer' }), - new TableItem({ data: 'qwer' }), - new TableItem({ data: 'qwer2' }), - ], - [ - new TableItem({ data: 'Name 2' }), - new TableItem({ data: 'swer' }), - new TableItem({ data: 'swer1' }), - new TableItem({ data: 'qwer2' }), - ], - [ - new TableItem({ data: 'Name 4' }), - new TableItem({ data: 'twer' }), - new TableItem({ data: 'twer1' }), - new TableItem({ data: 'qwer2' }), - ], -]); - -simpleMultiHeaderModel.setHeader([ - [ - new AITableHeaderItem({ - data: 'Name', - rowSpan: 2, - }), - new AITableHeaderItem({ data: 'hwer', colSpan: 2, sortable: false }), - ], - [new AITableHeaderItem({ data: 'hwer1' }), new AITableHeaderItem({ data: 'hwer2' })], -]); - -simpleMultiHeaderModel.setData([ - [ - new TableItem({ data: 'Name 1' }), - new TableItem({ data: 'qwer' }), - new TableItem({ data: 'qwer1' }), - ], - [new TableItem({ data: 'Name 3' }), new TableItem({ data: 'zwer', colSpan: 2 })], - [ - new TableItem({ data: 'Name 2' }), - new TableItem({ data: 'swer' }), - new TableItem({ data: 'swer1' }), - ], - [ - new TableItem({ data: 'Name 4' }), - new TableItem({ data: 'twer' }), - new TableItem({ data: 'twer1' }), - ], -]); - -complexModel.setHeader([ - [ - new AITableHeaderItem({ data: 'h1', colSpan: 4 }), - new AITableHeaderItem({ data: 'h2', rowSpan: 4 }), - new AITableHeaderItem({ data: 'h3', colSpan: 2, rowSpan: 2 }), - new AITableHeaderItem({ data: 'h4', colSpan: 2 }), - ], - [ - new AITableHeaderItem({ data: 'h11' }), - new AITableHeaderItem({ data: 'h12', rowSpan: 2, colSpan: 2 }), - new AITableHeaderItem({ data: 'h13', rowSpan: 3 }), - new AITableHeaderItem({ data: 'h41', rowSpan: 3 }), - new AITableHeaderItem({ data: 'h42' }), - ], - [ - new AITableHeaderItem({ data: 'h111' }), - new AITableHeaderItem({ data: 'h31', colSpan: 2 }), - new AITableHeaderItem({ data: 'h421' }), - ], - [ - new AITableHeaderItem({ data: 'h1111' }), - new AITableHeaderItem({ data: 'h121' }), - new AITableHeaderItem({ data: 'h122' }), - new AITableHeaderItem({ data: 'h311' }), - new AITableHeaderItem({ data: 'h312' }), - new AITableHeaderItem({ data: 'h422' }), - ], -]); - -complexModel.setData([ - [ - new TableItem({ data: 'd1111' }), - new TableItem({ data: 'd121' }), - new TableItem({ data: 'd122' }), - new TableItem({ data: 'd13' }), - new TableItem({ data: 'd2' }), - new TableItem({ data: 'd311' }), - new TableItem({ data: 'd312' }), - new TableItem({ data: 'd41' }), - new TableItem({ data: 'd422' }), - ], - [ - new TableItem({ data: 'd1111' }), - new TableItem({ data: 'd121' }), - new TableItem({ data: 'd122' }), - new TableItem({ data: 'd13' }), - new TableItem({ data: 'd2' }), - new TableItem({ data: 'd311' }), - new TableItem({ data: 'd312' }), - new TableItem({ data: 'd41' }), - new TableItem({ data: 'd422' }), - ], -]); - -emptyDataModel.setHeader([ - [ - new AITableHeaderItem({ - data: 'Name', - }), - new AITableHeaderItem({ - data: 'Name 2', - }), - new AITableHeaderItem({ - data: 'Name 3', - }), - new AITableHeaderItem({ - data: 'Name 4', - }), - ], -]); - -storiesOf('Components/Table', module) - .addDecorator( - moduleMetadata({ - imports: [AITableModule, ButtonModule, EmptyStateModule], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => { - return { - template: ` - - - `, - props: { - model: simpleModel, - size: select('size', { Small: 'sm', Short: 'sh', Normal: 'md', Large: 'lg' }, 'md'), - showSelectionColumn: boolean('showSelectionColumn', true), - striped: boolean('striped', true), - isDataGrid: boolean('Data grid keyboard interactions', true), - skeleton: boolean('Skeleton mode', false), - rowClick: action('row clicked'), - customSort: (index: number) => { - if (simpleMultiHeaderModel.getClosestHeader(index).sorted) { - // if already sorted flip sorting direction - simpleMultiHeaderModel.getClosestHeader(index).ascending = - simpleMultiHeaderModel.getClosestHeader(index).descending; - } - simpleMultiHeaderModel.sort(index); - }, - }, - }; - }) - .add('Basic multiheader', () => { - return { - template: ` - - - `, - props: { - model: simpleMultiHeaderModel, - size: select('size', { Small: 'sm', Short: 'sh', Normal: 'md', Large: 'lg' }, 'md'), - showSelectionColumn: boolean('showSelectionColumn', true), - striped: boolean('striped', true), - isDataGrid: boolean('Data grid keyboard interactions', true), - skeleton: boolean('Skeleton mode', false), - rowClick: action('row clicked'), - customSort: (index: number) => { - if (simpleMultiHeaderModel.getClosestHeader(index).sorted) { - // if already sorted flip sorting direction - simpleMultiHeaderModel.getClosestHeader(index).ascending = - simpleMultiHeaderModel.getClosestHeader(index).descending; - } - simpleMultiHeaderModel.sort(index); - }, - }, - }; - }) - .add('Empty', () => { - return { - template: ` -
-
-
- - -

{{ title }}

-

{{ body }}

- - - -
-
-
-
-
- `, - props: { - model: emptyDataModel, - icon: select( - 'icon', - ['error', 'error404', 'not-authorized', 'no-results', 'success', 'default', 'no-icon'], - 'default' - ), - title: text('title', 'No data to display'), - body: text('body', 'Optional extra sentence or sentences'), - actionOnClick: () => { - console.log('Action button clicked'); - }, - }, - }; - }) - .add('Complex multiheader table with move columns', () => { - return { - template: ` - -

Moving header index {{indexFrom}} to index {{indexTo}}

- - - `, - props: { - model: complexModel, - size: select('size', { Small: 'sm', Short: 'sh', Normal: 'md', Large: 'lg' }, 'md'), - showSelectionColumn: boolean('showSelectionColumn', false), - striped: boolean('striped', true), - isDataGrid: boolean('Data grid keyboard interactions', false), - skeleton: boolean('Skeleton mode', false), - rowClick: action('row clicked'), - indexFrom: null, - indexTo: null, - moveRandomColumns: function () { - this.indexFrom = Math.floor(Math.random() * complexModel['header'][0].length); - this.indexTo = Math.floor(Math.random() * complexModel['header'][0].length); - this.model.moveColumn(this.indexFrom, this.indexTo, 0); - }, - }, - }; - }); diff --git a/packages/angular/src/tabs-index.ts b/packages/angular/src/tabs-index.ts deleted file mode 100644 index 7715dfbaed..0000000000 --- a/packages/angular/src/tabs-index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { TabsModule } from './tabs/tabs.module'; -export { TabComponent } from './tabs/tab.component'; -export { TabsComponent } from './tabs/tabs.component'; -export { TabDropdownComponent } from './tabs/tab-dropdown.component'; -export { TabActionDirective } from './tabs/tab-action.directive'; -export { TabActionsComponent } from './tabs/tab-actions.component'; -export { TabHeader } from './tabs/tab-header.component'; diff --git a/packages/angular/src/tabs/package.json b/packages/angular/src/tabs/package.json deleted file mode 100644 index ce7b62e9d2..0000000000 --- a/packages/angular/src/tabs/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../tabs-index.ts" - } - } -} diff --git a/packages/angular/src/tabs/tab-action.directive.ts b/packages/angular/src/tabs/tab-action.directive.ts deleted file mode 100644 index a17e89b76f..0000000000 --- a/packages/angular/src/tabs/tab-action.directive.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, Directive, ElementRef, OnInit } from '@angular/core'; -import { Button } from 'carbon-components-angular'; - -@Directive({ - selector: '[aiTabAction]', -}) -export class TabActionDirective extends Button implements OnInit { - constructor(protected elementRef: ElementRef) { - super(); - } - - ngOnInit() { - this.ibmButton = 'ghost'; - this.size = 'sm'; - this.iconOnly = true; - const el = this.elementRef.nativeElement as HTMLElement; - el.style.width = '40px'; - el.style.height = '40px'; - el.style.justifyContent = 'center'; - } -} diff --git a/packages/angular/src/tabs/tab-actions.component.ts b/packages/angular/src/tabs/tab-actions.component.ts deleted file mode 100644 index 987c3d6eb8..0000000000 --- a/packages/angular/src/tabs/tab-actions.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ai-tab-actions', - template: ` `, - styles: [ - ` - :host { - display: flex; - } - `, - ], -}) -export class TabActionsComponent {} diff --git a/packages/angular/src/tabs/tab-controller.class.ts b/packages/angular/src/tabs/tab-controller.class.ts deleted file mode 100644 index 0f4cd8e845..0000000000 --- a/packages/angular/src/tabs/tab-controller.class.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { combineLatest } from 'rxjs'; -import { BehaviorSubject, Subject, Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; -import { Tab } from './tab.interface'; - -export class TabController { - public selection = new BehaviorSubject(null); - public tabListWithSelection: Observable; - public tabList: Observable; - private tabSource = new BehaviorSubject([]); - constructor(tabList = []) { - this.tabListWithSelection = combineLatest([this.selection, this.tabSource]).pipe( - map(([selection, tabs]) => { - return tabs.map((tab) => { - return { - ...tab, - selected: selection === tab.key, - }; - }); - }) - ); - this.tabSource.next(tabList); - this.tabList = this.tabSource.asObservable(); - } - - setTabs(tabList: Tab[]) { - this.tabSource.next(tabList); - } - - getTabs() { - return this.tabSource.getValue(); - } - - addTab(tab: Tab) { - this.setTabs([...this.tabSource.getValue(), tab]); - } - - selectTab(key: any) { - this.selection.next(key); - } - - updateTab(updatedTab: Tab) { - const updatedTabs = this.tabSource.getValue().map((tab) => { - if (tab.key === updatedTab.key) { - return updatedTab; - } - return tab; - }); - this.setTabs(updatedTabs); - } - - removeTab(key: any): any { - const tabs = this.tabSource.getValue(); - const index = tabs.findIndex((tab) => tab.key === key); - const filteredTabs = tabs.filter((tab) => tab.key !== key); - this.setTabs(filteredTabs); - return index > 0 ? filteredTabs[index - 1].key : filteredTabs[0]?.key; - } -} diff --git a/packages/angular/src/tabs/tab-dropdown.component.ts b/packages/angular/src/tabs/tab-dropdown.component.ts deleted file mode 100644 index bbcb3f9c6b..0000000000 --- a/packages/angular/src/tabs/tab-dropdown.component.ts +++ /dev/null @@ -1,136 +0,0 @@ -import { - Component, - ElementRef, - Input, - OnDestroy, - OnInit, - TemplateRef, - ViewChild, -} from '@angular/core'; -import { DocumentService, DropdownList, DropdownService } from 'carbon-components-angular'; -import { map } from 'rxjs/operators'; -import { TabController } from './tab-controller.class'; - -@Component({ - selector: 'ai-tab-dropdown', - template: ` - - - `, - providers: [DropdownService], -}) -export class TabDropdownComponent implements OnInit, OnDestroy { - @Input() controller: TabController; - /** - * Template to bind to items in the `DropdownList` (optional). - * `DropdownList` items generated from the `Tab` items are passed in as context. - * Additional props can included in the generation of the `DropdownList` items through - * the `dropdownListProps` field in the `Tab`s. - * - * For example: - * - * controller = new TabController([ - * { - * title: 'One', - * dropdownListProps: { - * icon: 'settings' - * } - * } - * ]); - * - * // List items are passed in as context in the form "{item: item}" so the let-="item" is necessary - * - * - * {{ item.content }} - * - * - * - * - * - * - * - */ - @Input() listTpl: TemplateRef = null; - @ViewChild('dropdownMenu', { static: true }) dropdownMenu: ElementRef; - @ViewChild('dropdownButton', { static: true }) dropdownButton: ElementRef; - @ViewChild(DropdownList) dropdownList: DropdownList; - isOpen = false; - displayItems: any; - - constructor( - protected dropdownService: DropdownService, - protected elementRef: ElementRef, - protected documentService: DocumentService - ) {} - - ngOnInit() { - // TODO: update dropdown service to handle menus fixed to the right side of the trigger - this.dropdownService.offset = { - /** - * 105 = 210 / 2 the dropdown service will center the menu and - * then align it to the left edge of the trigger element - */ - left: 105, - }; - - this.documentService.handleClick((event) => { - const hostElement = this.elementRef.nativeElement as HTMLElement; - const menuElement = this.dropdownMenu.nativeElement as HTMLElement; - const target = event.target as Node; - if (this.isOpen && !hostElement.contains(target) && !menuElement.contains(target)) { - this.closeMenu(); - } - }); - - this.displayItems = this.controller.tabListWithSelection.pipe( - map((list) => { - return list.map((item) => ({ - content: item.title, - key: item.key, - selected: item.selected, - ...item.dropdownListProps, - })); - }) - ); - } - - onSelect(event) { - if (!event.isUpdate) { - this.controller.selectTab(event.item.key); - this.closeMenu(); - } - } - - toggleMenu() { - if (!this.isOpen) { - this.openMenu(); - } else { - this.closeMenu(); - } - } - - openMenu() { - this.isOpen = true; - const wrapper: HTMLElement = this.dropdownService.appendToBody( - this.dropdownButton.nativeElement, - this.dropdownMenu.nativeElement, - '' - ); - wrapper.style.width = '250px'; - this.dropdownList.initFocus(); - } - - closeMenu() { - this.isOpen = false; - this.dropdownService.appendToDropdown(this.elementRef.nativeElement); - } - - ngOnDestroy() { - this.closeMenu(); - } -} diff --git a/packages/angular/src/tabs/tab-header.component.ts b/packages/angular/src/tabs/tab-header.component.ts deleted file mode 100644 index fdae47b3ca..0000000000 --- a/packages/angular/src/tabs/tab-header.component.ts +++ /dev/null @@ -1,178 +0,0 @@ -import { - AfterViewInit, - Component, - ElementRef, - Input, - OnChanges, - SimpleChanges, -} from '@angular/core'; -import { DocumentService } from 'carbon-components-angular'; - -import { TabHeader as IBMTabHeader } from 'carbon-components-angular/tabs'; -import { Tab, TabAction } from './tab.interface'; - -@Component({ - selector: 'ai-tab-header', - template: ` - - `, - styles: [ - ` - .bx--tabs--scrollable__nav-link { - display: flex; - align-items: end; - } - - ::ng-deep .bx--tabs--scrollable .bx--tabs--scrollable__nav-link { - padding: 0; - } - - .ai--tabs--header_content { - width: 100%; - padding: 0.75rem 1rem 0.5rem; - } - - .ai--tabs--header_action { - padding: 0; - min-height: 0; - height: 1.5rem; - width: 1.5rem; - align-content: center; - justify-content: center; - margin-bottom: 0.3rem; - margin-right: 0.5rem; - } - `, - ], - providers: [ - { - provide: IBMTabHeader, - useExisting: TabHeader, - }, - ], -}) -export class TabHeader extends IBMTabHeader implements OnChanges, AfterViewInit { - @Input() tab: Tab; - @Input() actions: TabAction[] = []; - - tabAction = null; - tabActions = null; - menuOpen = false; - menuPosition = { - top: 0, - left: 0, - }; - - constructor(protected elementRef: ElementRef, protected documentService: DocumentService) { - super(); - } - - ngOnChanges(changes: SimpleChanges) { - const actions = changes.actions?.currentValue; - if (actions) { - if (actions.length === 1) { - this.tabAction = Object.assign( - {}, - { - title: '', - icon: 'close', - onClick: () => {}, - }, - actions[0] - ); - } else if (actions.length > 1) { - this.tabActions = actions.map((action) => - Object.assign( - {}, - { - title: '', - icon: '', - onClick: () => {}, - }, - action - ) - ); - } - } - } - - ngAfterViewInit() { - this.documentService.handleClick((event) => { - const { nativeElement }: { nativeElement: HTMLElement } = this.elementRef; - if (this.menuOpen && !nativeElement.contains(event.target as HTMLElement)) { - this.menuOpen = false; - } - }); - } - - onActionClick(action: TabAction) { - action.onClick(this.tab); - this.menuOpen = false; - } - - onTabMenuClick(event: MouseEvent) { - const target = event.target as HTMLElement; - const button = target.closest('button'); - const buttonRect = button.getBoundingClientRect(); - const menuRect = button.parentElement - .querySelector('.bx--context-menu') - .getBoundingClientRect(); - this.menuOpen = !this.menuOpen; - this.menuPosition = { - top: buttonRect.top + buttonRect.height, - left: buttonRect.right - menuRect.width, - }; - } -} diff --git a/packages/angular/src/tabs/tab.component.ts b/packages/angular/src/tabs/tab.component.ts deleted file mode 100644 index 446b4c8d9c..0000000000 --- a/packages/angular/src/tabs/tab.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { Tab } from 'carbon-components-angular'; -import { Subscription } from 'rxjs'; -import { TabController } from './tab-controller.class'; - -@Component({ - selector: 'ai-tab', - template: ` -
- -
- `, -}) -export class TabComponent extends Tab implements OnInit, OnDestroy { - @Input() key: string; - @Input() controller: TabController; - - protected selectionSubscription: Subscription; - - ngOnInit() { - // use a subscription to set this.active since that affects a number of other - // tab internals - this.selectionSubscription = this.controller.selection.subscribe((key) => { - this.active = key === this.key; - }); - } - - ngOnDestroy() { - this.selectionSubscription.unsubscribe(); - } -} diff --git a/packages/angular/src/tabs/tab.interface.ts b/packages/angular/src/tabs/tab.interface.ts deleted file mode 100644 index e3cbb9bea0..0000000000 --- a/packages/angular/src/tabs/tab.interface.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { ListItem } from 'carbon-components-angular'; - -export interface TabAction { - title: string; - icon?: string; - onClick?: (tab: Tab) => void; -} - -export interface Tab { - /** - * String title for the tab header and item in the tab dropdown - */ - title: string; - /** - * Key unique to the TabController that contains this Tab, - * used to identify and link the tab header and tab pane together, - * and syncronize tab selection - */ - key: string; - /** - * Optional value to indicate the selection status of the Tab - */ - selected?: boolean; - actions?: TabAction[]; - /** - * (Optional) Additional props to be used when creating drop down list items - * from the `Tab` items if `ai-tab-dropdown` is used. - */ - dropdownListProps?: ListItem; - /** - * to allow expansion of the Tab interface with properties as needed - */ - [property: string]: any; -} diff --git a/packages/angular/src/tabs/tabs.component.ts b/packages/angular/src/tabs/tabs.component.ts deleted file mode 100644 index 4324a09777..0000000000 --- a/packages/angular/src/tabs/tabs.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { Component, ElementRef, Input, TemplateRef } from '@angular/core'; -import { TabController } from './tab-controller.class'; - -@Component({ - selector: 'ai-tabs', - template: ` - - -
- {{ tab.title }} - - -
-
-
- - `, - styles: [ - ` - :host { - display: flex; - } - `, - ], -}) -export class TabsComponent { - @Input() controller: TabController; - /** - * Template to bind to header titles (optional). - * Tab item is passed in as context. - * - * For example: - * - * controller = new TabController([ - * { - * title: 'One', - * icon: 'edit' - * } - * ]); - * - * // Tab items are passed in as context in the form "{tab: tab}" so the let-="tab" is necessary - * - * - * {{ tab.title }} - * - * - * - */ - @Input() titleTpl: TemplateRef = null; - - constructor(protected elementRef: ElementRef) {} - - onSelected(key) { - this.controller.selectTab(key); - } - - getMaxWidth() { - const actions = this.elementRef.nativeElement.querySelector('ai-tab-actions'); - if (!actions) { - return null; - } - return `calc(100% - ${getComputedStyle(actions).width})`; - } -} diff --git a/packages/angular/src/tabs/tabs.module.ts b/packages/angular/src/tabs/tabs.module.ts deleted file mode 100644 index e19029f6e6..0000000000 --- a/packages/angular/src/tabs/tabs.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { - ButtonModule, - DropdownModule, - IconModule, - TabsModule as CTabsModule, - UtilsModule, -} from 'carbon-components-angular'; -import { TabComponent } from './tab.component'; -import { TabsComponent } from './tabs.component'; -import { TabDropdownComponent } from './tab-dropdown.component'; -import { TabActionDirective } from './tab-action.directive'; -import { TabActionsComponent } from './tab-actions.component'; -import { TabHeader } from './tab-header.component'; -import { ContextMenuModule } from 'carbon-components-angular/context-menu'; - -@NgModule({ - declarations: [ - TabsComponent, - TabComponent, - TabDropdownComponent, - TabActionsComponent, - TabActionDirective, - TabHeader, - ], - imports: [ - CommonModule, - CTabsModule, - IconModule, - DropdownModule, - ButtonModule, - UtilsModule, - ContextMenuModule, - ], - exports: [ - TabsComponent, - TabComponent, - TabDropdownComponent, - TabActionsComponent, - TabActionDirective, - TabHeader, - ], -}) -export class TabsModule {} diff --git a/packages/angular/src/tabs/tabs.stories.ts b/packages/angular/src/tabs/tabs.stories.ts deleted file mode 100644 index 201d99de9d..0000000000 --- a/packages/angular/src/tabs/tabs.stories.ts +++ /dev/null @@ -1,480 +0,0 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; -import { withKnobs } from '@storybook/addon-knobs'; - -import { TabsModule } from './tabs.module'; -import { TabController } from './tab-controller.class'; -import { - ButtonModule, - DropdownModule, - IconModule, - IconService, - InputModule, - ModalModule, - TabsModule as CTabsModule, -} from 'carbon-components-angular'; -import { NgModule } from '@angular/core'; -import { Bee16, Edit16, Settings16 } from '@carbon/icons'; - -@NgModule({ - imports: [IconModule], -}) -class StoryIconModule { - constructor(protected iconService: IconService) { - iconService.register(Edit16); - iconService.register(Bee16); - iconService.register(Settings16); - } -} - -storiesOf('Components/Tabs', module) - .addDecorator( - moduleMetadata({ - imports: [ - TabsModule, - CTabsModule, - IconModule, - ButtonModule, - DropdownModule, - ModalModule, - InputModule, - StoryIconModule, - ], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` - - - - - - - - {{tab.demoContent}} - - `, - props: { - controller: new TabController([ - { - key: 'one', - title: 'One', - demoContent: 'Tab content 1', - }, - { - key: 'two', - title: 'Second tab', - demoContent: 'Tab content 2', - }, - { - key: 'three', - title: 'Three', - demoContent: 'Tab content 3', - }, - ]), - addTab() { - this.controller.addTab({ - key: Math.random(), - title: 'Another tab', - demoContent: 'Another tab content', - }); - }, - }, - })) - .add('With actions', () => ({ - template: ` - - - - - - - - {{tab.demoContent}} - - `, - props: { - controller: new TabController([ - { - key: 'one', - title: 'One', - demoContent: 'Tab content 1', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: () => { - console.log('tab one close action clicked!'); - }, - }, - ], - }, - { - key: 'two', - title: 'Second tab', - demoContent: 'Tab content 2', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: () => { - console.log('tab two close action clicked!'); - }, - }, - { - title: 'Edit', - onClick: () => { - console.log('tab two edit action clicked!'); - }, - }, - ], - }, - { - key: 'three', - title: 'Three', - demoContent: 'Tab content 3', - }, - ]), - addTab() { - this.controller.addTab({ - key: Math.random(), - title: 'Another tab', - demoContent: 'Another tab content', - }); - }, - }, - })) - .add('With closeable tabs', () => ({ - template: ` - - - - - - - - {{tab.demoContent}} - - `, - props: { - getController() { - if (this.controller) { - return this.controller; - } - this.controller = new TabController([ - { - key: 'one', - title: 'One', - demoContent: 'Tab content 1', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: this.removeTab.bind(this), - }, - ], - }, - { - key: 'two', - title: 'Second tab', - demoContent: 'Tab content 2', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: this.removeTab.bind(this), - }, - ], - }, - { - key: 'three', - title: 'Three', - demoContent: 'Tab content 3', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: this.removeTab.bind(this), - }, - ], - }, - ]); - return this.controller; - }, - controller: null, - removeTab(tab) { - const key = this.controller.removeTab(tab.key); - this.controller.selectTab(key); - }, - addTab() { - this.controller.addTab({ - key: Math.random(), - title: 'Another tab', - demoContent: 'Another tab content', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: this.removeTab.bind(this), - }, - ], - }); - }, - }, - })) - .add('With tab management', () => ({ - template: ` - - - - - - - - {{tab.demoContent}} - - - -

Edit tab

-
-
- - Title - - -
- - - - - - -
- `, - props: { - getController() { - if (this.controller) { - return this.controller; - } - this.controller = new TabController([ - { - key: 'one', - title: 'One', - demoContent: 'Tab content 1', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: this.removeTab.bind(this), - }, - { - title: 'Edit', - icon: 'edit', - onClick: this.editTab.bind(this), - }, - ], - }, - { - key: 'two', - title: 'Second tab', - demoContent: 'Tab content 2', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: this.removeTab.bind(this), - }, - { - title: 'Edit', - icon: 'edit', - onClick: this.editTab.bind(this), - }, - ], - }, - { - key: 'three', - title: 'Three', - demoContent: 'Tab content 3', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: this.removeTab.bind(this), - }, - { - title: 'Edit', - icon: 'edit', - onClick: this.editTab.bind(this), - }, - ], - }, - ]); - return this.controller; - }, - controller: null, - removeTab(tab) { - const key = this.controller.removeTab(tab.key); - this.controller.selectTab(key); - }, - open: false, - tabToEdit: null, - newTitle: '', - editTab(tab) { - this.tabToEdit = tab; - this.open = true; - this.newTitle = tab.title; - }, - finishEditing() { - const tab = { - ...this.tabToEdit, - title: this.newTitle, - }; - this.controller.updateTab(tab); - this.open = false; - this.tabToEdit = null; - this.newTitle = ''; - }, - addTab() { - this.controller.addTab({ - key: Math.random(), - title: 'Another tab', - demoContent: 'Another tab content', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: this.removeTab.bind(this), - }, - { - title: 'Edit', - icon: 'edit', - onClick: this.editTab.bind(this), - }, - ], - }); - }, - }, - })) - .add('With custom templates', () => ({ - template: ` - - - - - - - - {{tab.demoContent}} - - - - - {{ tab.title }} - - - - {{ item.content }} - - - `, - props: { - controller: new TabController([ - { - key: 'one', - title: 'One', - icon: 'edit', - dropdownListProps: { icon: 'edit' }, - demoContent: 'Tab content 1', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: () => { - console.log('tab one close action clicked!'); - }, - }, - ], - }, - { - key: 'two', - title: 'Second tab', - icon: 'bee', - dropdownListProps: { icon: 'bee' }, - demoContent: 'Tab content 2', - actions: [ - { - title: 'Close', - icon: 'close', - onClick: () => { - console.log('tab two close action clicked!'); - }, - }, - { - title: 'Edit', - onClick: () => { - console.log('tab two edit action clicked!'); - }, - }, - ], - }, - { - key: 'three', - title: 'Three', - icon: 'settings', - dropdownListProps: { icon: 'settings' }, - actions: [ - { - title: 'Close', - icon: 'close', - onClick: () => { - console.log('tab one close action clicked!'); - }, - }, - ], - demoContent: 'Tab content 3', - }, - ]), - addTab() { - this.controller.addTab({ - key: Math.random(), - title: 'Another tab', - demoContent: 'Another tab content', - }); - }, - }, - })); diff --git a/packages/angular/src/test.ts b/packages/angular/src/test.ts deleted file mode 100644 index ca62a574a8..0000000000 --- a/packages/angular/src/test.ts +++ /dev/null @@ -1,20 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'core-js'; -import 'zone.js/dist/zone'; -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, -} from '@angular/platform-browser-dynamic/testing'; - -// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. -declare var require: any; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/packages/angular/src/toolkit-index.ts b/packages/angular/src/toolkit-index.ts deleted file mode 100644 index 708f0cb882..0000000000 --- a/packages/angular/src/toolkit-index.ts +++ /dev/null @@ -1,8 +0,0 @@ -// export directly from the index file to work around some bugs with -// typescript and ngc and "barrel" files - https://github.com/ng-packagr/ng-packagr/issues/195 -export * from './toolkit/page-header/index'; -export * from './toolkit/table/index'; -export * from './toolkit/sortable-list/index'; -export * from './toolkit/table-settings/index'; -export * from './toolkit/draggable/index'; -export * from './toolkit/utils/index'; diff --git a/packages/angular/src/toolkit/draggable/draggable.directive.ts b/packages/angular/src/toolkit/draggable/draggable.directive.ts deleted file mode 100644 index 00a31023bf..0000000000 --- a/packages/angular/src/toolkit/draggable/draggable.directive.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core'; - -@Directive({ - selector: '[scDraggable], [aiDraggable]', -}) -export class DraggableDirective { - @Input() dragImage: Element; - - @Input() imageOffset = { x: 0, y: 0 }; - - @Output() start = new EventEmitter(); - - @Output() end = new EventEmitter(); - - @HostBinding('attr.draggable') draggable = true; - - @HostListener('dragstart', ['$event']) - handleDragStart(event: DragEvent) { - // 20 is half the element height - // 4 is half of a mini-unit, which centers the drag on the handle - event.dataTransfer.setDragImage(this.dragImage, this.imageOffset.x, this.imageOffset.y); - event.dataTransfer.effectAllowed = 'move'; - this.start.emit(); - } - - @HostListener('dragend') - handleEnd() { - this.end.emit(); - } -} diff --git a/packages/angular/src/toolkit/draggable/draggable.module.ts b/packages/angular/src/toolkit/draggable/draggable.module.ts deleted file mode 100644 index 9b822be404..0000000000 --- a/packages/angular/src/toolkit/draggable/draggable.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { DraggableDirective } from './draggable.directive'; -import { DroppableDirective } from './droppable.directive'; - -@NgModule({ - declarations: [DraggableDirective, DroppableDirective], - imports: [CommonModule], - exports: [DraggableDirective, DroppableDirective], -}) -export class DraggableModule {} diff --git a/packages/angular/src/toolkit/draggable/droppable.directive.ts b/packages/angular/src/toolkit/draggable/droppable.directive.ts deleted file mode 100644 index 629aebad1d..0000000000 --- a/packages/angular/src/toolkit/draggable/droppable.directive.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Directive, EventEmitter, HostListener, Output } from '@angular/core'; - -@Directive({ - selector: '[scDropzone], [aiDropzone]', -}) -export class DroppableDirective { - @Output() active = new EventEmitter(); - - @Output() leave = new EventEmitter(); - - @Output() dropping = new EventEmitter(); - - @HostListener('dragover', ['$event']) - @HostListener('dragenter', ['$event']) - handleDrag(event: DragEvent) { - event.preventDefault(); - this.active.emit(true); - } - - @HostListener('drop') - handleDrop() { - this.active.emit(false); - this.dropping.emit(); - } - - @HostListener('dragleave') - handleLeave() { - this.leave.emit(); - } -} diff --git a/packages/angular/src/toolkit/draggable/index.ts b/packages/angular/src/toolkit/draggable/index.ts deleted file mode 100644 index d0046e788c..0000000000 --- a/packages/angular/src/toolkit/draggable/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './draggable.directive'; -export * from './draggable.module'; -export * from './droppable.directive'; diff --git a/packages/angular/src/toolkit/package.json b/packages/angular/src/toolkit/package.json deleted file mode 100644 index 6573389f51..0000000000 --- a/packages/angular/src/toolkit/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "../toolkit-index.ts" - } - } -} diff --git a/packages/angular/src/toolkit/page-header/index.ts b/packages/angular/src/toolkit/page-header/index.ts deleted file mode 100644 index 3ba29abb3f..0000000000 --- a/packages/angular/src/toolkit/page-header/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './page-header.module'; -export * from './page-header.component'; diff --git a/packages/angular/src/toolkit/page-header/page-header.component.ts b/packages/angular/src/toolkit/page-header/page-header.component.ts deleted file mode 100644 index 3ea3694e1c..0000000000 --- a/packages/angular/src/toolkit/page-header/page-header.component.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core'; -import { BreadcrumbItem } from 'carbon-components-angular/breadcrumb'; - -/** - * Adds an item to the end of a `BreadcrumbItem` list to serve as a title for the page header component - * - * @param items a list of `BreadcumbItem`s _without_ an item to serve as a title - * @param title the title to add to the list of items - */ -export const itemsWithTitle = (items: BreadcrumbItem[], title: string): BreadcrumbItem[] => { - return [ - ...items, - { - content: title, - href: '', - }, - ]; -}; - -/** - * Page header - * - * **Warning:** This component will be deprecated in the future in favour of a spec compliant ai-page-header component - * - * The page header component uses the _last_ item in the `items` array as the title. - * - * For conveninence we provide a `itemsWithTitle` function that will take an existing - * set of breadcrumb items and add one to the end to act as a title. - * - * Example: - * - * component.ts - * ```typescript - * items = itemsWithTitle([ - * { - * content: "one", - * href: "first link" - * }, - * { - * content: "two", - * href: "second link" - * } - * ], "Hello World"); - * ``` - * - * component.html - * ```html - * - * ``` - */ -@Component({ - selector: 'sc-page-header', - template: ` -
- - -

{{ title }}

-
- `, - styleUrls: ['./page-header.scss'], -}) -export class PageHeaderComponent { - /** - * Items to display in the header. The last item is used as the title - */ - @Input() items: BreadcrumbItem[] = []; - - /** - * Accessible label for the underlying `` element that the breadcrumb - * items reside in - */ - @Input() ariaLabel: string; - - /** - * Emits the navigation status promise when the link is activated - * - * (event forwarded from the underlying `ibm-breadcrumb`) - */ - @Output() navigation = new EventEmitter>(); - - /** - * The page header sits on the grid by default. - * Set to `false` if you need to manually position the page header using the default padding values - */ - @HostBinding('class.bx--row') @Input() onGrid = true; - - get title() { - return this.items[this.items.length - 1].content; - } - - get breadcrumbItems() { - return this.items.slice(0, this.items.length - 1); - } - - @HostBinding('class.has-breadcrumbs') get hasBreadcrumbs() { - return this.items.length > 1; - } -} diff --git a/packages/angular/src/toolkit/page-header/page-header.module.ts b/packages/angular/src/toolkit/page-header/page-header.module.ts deleted file mode 100644 index fc0739870a..0000000000 --- a/packages/angular/src/toolkit/page-header/page-header.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { BreadcrumbModule } from 'carbon-components-angular'; - -import { CommonModule } from '@angular/common'; -import { PageHeaderComponent } from './page-header.component'; - -@NgModule({ - declarations: [PageHeaderComponent], - imports: [CommonModule, BreadcrumbModule], - exports: [PageHeaderComponent], -}) -export class PageHeaderModule {} diff --git a/packages/angular/src/toolkit/page-header/page-header.scss b/packages/angular/src/toolkit/page-header/page-header.scss deleted file mode 100644 index e5b8223fc5..0000000000 --- a/packages/angular/src/toolkit/page-header/page-header.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import '../vendor/@carbon/layout/scss/index'; -@import '../vendor/@carbon/colors/scss/index'; - -:host { - display: block; - padding: carbon--mini-units(4); - max-height: carbon--mini-units(12.5); - background: $carbon--gray-10; -} - -:host.has-breadcrumbs { - padding-top: carbon--mini-units(2); -} - -h2 { - font-size: 1.75rem; - line-height: 2.25rem; -} - -:host.bx--row { - padding-left: 0; - padding-right: 0; -} - -@include carbon--breakpoint('sm') { - :host { - max-height: unset; - } -} diff --git a/packages/angular/src/toolkit/page-header/page-header.stories.ts b/packages/angular/src/toolkit/page-header/page-header.stories.ts deleted file mode 100644 index e6ef274a81..0000000000 --- a/packages/angular/src/toolkit/page-header/page-header.stories.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { number, withKnobs } from '@storybook/addon-knobs'; -import { moduleMetadata, storiesOf } from '@storybook/angular'; -import { BreadcrumbItem } from 'carbon-components-angular'; -import { itemsWithTitle } from './page-header.component'; -import { PageHeaderModule } from './page-header.module'; - -const createBreadcrumbItems = (count: number, content = 'Breadcrumb'): BreadcrumbItem[] => - // fill(0) so we have something useful to map over - Array(count) - .fill(0) - .map((x, i) => ({ - content: `${content} ${i + 1}`, - href: '#' + (i + 1), - })); - -storiesOf('Sterling Toolkit/Page header', module) - .addDecorator( - moduleMetadata({ - imports: [PageHeaderModule], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` -
-
- -
-
one
-
two
-
-
-
- `, - styles: [ - ` - .container { - background: #f4f4f4; - height: 100vh; - } - - .item { - height: 300px; - background: white; - border: 1px dashed gray; - } - - .item:nth-child(2) { - border-left: none; - } - `, - ], - props: { - numberOfItems: number('numberOfItems', 3), - items() { - return itemsWithTitle(createBreadcrumbItems(this.numberOfItems), 'Hello world'); - }, - }, - })); diff --git a/packages/angular/src/toolkit/sortable-list/index.ts b/packages/angular/src/toolkit/sortable-list/index.ts deleted file mode 100644 index 427f691770..0000000000 --- a/packages/angular/src/toolkit/sortable-list/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './sortable-list.module'; -export * from './sortable-list-model.class'; -export * from './sortable-list.component'; -export * from './sortable-list-item.component'; diff --git a/packages/angular/src/toolkit/sortable-list/sortable-list-item.component.ts b/packages/angular/src/toolkit/sortable-list/sortable-list-item.component.ts deleted file mode 100644 index 77e5ad8a46..0000000000 --- a/packages/angular/src/toolkit/sortable-list/sortable-list-item.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core'; -/** - * **Warning:** This component will be deprecated in the future in favour of a spec compliant ai-sortable-list-item component - */ -@Component({ - selector: 'sc-sortable-list-item', - template: ` -
-
-
- -
-
- - - - - Move up - Move down - -
-
- `, - styleUrls: ['./sortable-list-item.scss'], -}) -export class SortableListItemComponent { - @Input() checked = true; - - @Input() disabled = false; - - @Input() dragActive = false; - - @Output() dragStart = new EventEmitter(); - - @Output() dragEnd = new EventEmitter(); - - @Output() move = new EventEmitter<'up' | 'down'>(); - - constructor(public elementRef: ElementRef) {} -} diff --git a/packages/angular/src/toolkit/sortable-list/sortable-list-item.scss b/packages/angular/src/toolkit/sortable-list/sortable-list-item.scss deleted file mode 100644 index 39a8c3d57b..0000000000 --- a/packages/angular/src/toolkit/sortable-list/sortable-list-item.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import '../vendor/@carbon/layout/scss/index'; -@import '../vendor/@carbon/themes/scss/index'; -@import '../vendor/@carbon/colors/scss/index'; - -:host { - display: list-item; - padding-left: carbon--mini-units(2); - padding-right: carbon--mini-units(2); - height: carbon--mini-units(5); - margin-bottom: carbon--mini-units(1); -} - -.drag-marker { - border: 1px solid $carbon--blue-50; - display: none; - - &.active { - display: block; - } -} - -.wrapper { - display: flex; - height: 100%; - align-items: center; - width: 100%; -} - -.handle { - cursor: pointer; -} - -.content { - align-items: center; - display: flex; - background: $ui-01; - height: 100%; - margin-left: carbon--mini-units(1); - width: 100%; - padding-left: carbon--mini-units(2); - padding-right: carbon--mini-units(1); -} diff --git a/packages/angular/src/toolkit/sortable-list/sortable-list-model.class.ts b/packages/angular/src/toolkit/sortable-list/sortable-list-model.class.ts deleted file mode 100644 index 31662711a9..0000000000 --- a/packages/angular/src/toolkit/sortable-list/sortable-list-model.class.ts +++ /dev/null @@ -1,106 +0,0 @@ -// disable max-classes-per-file since these are very small classes -// tslint:disable: max-classes-per-file - -import { TemplateRef } from '@angular/core'; -import { BehaviorSubject, isObservable, Subscription } from 'rxjs'; -import { BaseSetting, SettingOptions } from '../table-settings/settings/setting.class'; -import { Content } from '../table-settings/table-settings-model.class'; -import { SortableListComponent } from './sortable-list.component'; - -export interface ListOptionOptions { - content?: any; - template?: TemplateRef; - order?: number; - options?: SortableListOption[]; - disabled?: boolean; -} - -export class SortableListOption { - disabled: boolean; - order: number; - options: SortableListOption[]; - content: any; - template: TemplateRef; - protected contentSubject = new BehaviorSubject(null); - protected contentSubscription = new Subscription(); - - constructor(options: ListOptionOptions) { - this.setContent(options.content); - this.template = options.template; - this.order = options.order; - this.options = options.options; - this.disabled = options.disabled; - this.content = this.contentSubject.asObservable(); - } - - getContent() { - return this.content; - } - - setContent(content: any) { - if (isObservable(content)) { - this.contentSubscription.unsubscribe(); - this.contentSubscription = content.subscribe((value) => { - this.contentSubject.next(value); - }); - } else { - this.contentSubject.next(content); - } - } - - toJSON() { - const jsonOptions = this.options ? this.options.map((option) => option.toJSON()) : []; - return { - content: this.contentSubject.value, - disabled: this.disabled, - order: this.order, - options: jsonOptions, - }; - } - - toString() { - return JSON.stringify(this.toJSON()); - } -} - -export interface SortableListOptions extends SettingOptions { - content?: any; - template?: TemplateRef; - options: SortableListOption[]; -} - -export class SortableList extends BaseSetting { - public component = SortableListComponent; - - protected options: SortableListOption[]; - - protected stagedOptions: SortableListOption[]; - - protected _outputs = new Map([['itemsChange', this.onChanges.bind(this)]]); - - protected _inputs = new Map([['items', this.options]]); - - constructor(options: SortableListOptions) { - super(options as SettingOptions); - // this.options must be set before setting the value (if any) - this.options = options.options; - this.setContent(options.content); - this.setTemplate(options.template); - } - - getInputs() { - return this._inputs; - } - - getOutputs() { - return this._outputs; - } - - onChanges(value: SortableListOption[]) { - this.stagedOptions = value; - } - - commit() { - this.options = this.stagedOptions; - } -} diff --git a/packages/angular/src/toolkit/sortable-list/sortable-list.component.ts b/packages/angular/src/toolkit/sortable-list/sortable-list.component.ts deleted file mode 100644 index 9f9157acf0..0000000000 --- a/packages/angular/src/toolkit/sortable-list/sortable-list.component.ts +++ /dev/null @@ -1,136 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { ListItem } from 'carbon-components-angular'; -import { SortableListOption } from './sortable-list-model.class'; - -export type SortableListItem = SortableListOption & ListItem; - -export type SortableListItems = SortableListItem[]; - -/** - * **Warning:** This component will be deprecated in the future in favour of a spec compliant ai-sortable-list component - */ -@Component({ - selector: 'sc-sortable-list', - template: ` -
    - -
  1. -
    -
  2. - - {{ item?.content | async }} - - - -
    -
  3. -
    -
  4. -
- `, - styleUrls: ['./sortable-list.scss'], -}) -export class SortableListComponent { - @Input() items: SortableListItems; - - @Output() itemsChange = new EventEmitter(); - - public dragging = null; - - public dragOver = null; - - trackByFn(index: number, item: SortableListItem) { - return item; - } - - dragStart(item: SortableListItem) { - this.dragging = item; - } - - active(item: SortableListItem | 'bottom') { - this.dragOver = item; - } - - leave() { - this.dragOver = null; - } - - isActive(item: SortableListItem | 'bottom') { - return this.dragOver === item; - } - - end() { - this.dragOver = null; - this.dragging = null; - } - - handleDrop() { - if (!this.dragging) { - return; - } - - this.items = this.insertBefore(this.dragging, this.dragOver); - - this.end(); - - this.itemsChange.emit(this.items); - } - - handleMove(direction: 'up' | 'down', item: SortableListItem) { - const itemIndex = this.items.indexOf(item); - if (direction === 'up') { - if (!this.items[itemIndex - 1]) { - return; - } - this.items = this.insertBefore(item, this.items[itemIndex - 1]); - } else if (direction === 'down') { - const baseItem = this.items[itemIndex + 2] ? this.items[itemIndex + 2] : 'bottom'; - this.items = this.insertBefore(item, baseItem); - } - } - - protected insertBefore(itemToMove: SortableListItem, baseItem: SortableListItem | 'bottom') { - const tmpItems = Array.from(this.items); - - const itemToMoveIndex = tmpItems.indexOf(itemToMove); - tmpItems.splice(itemToMoveIndex, 1); - - if (baseItem === 'bottom') { - tmpItems.push(itemToMove); - } else { - const insertionPointIndex = tmpItems.indexOf(baseItem); - tmpItems.splice(insertionPointIndex, 0, itemToMove); - } - - return tmpItems; - } -} diff --git a/packages/angular/src/toolkit/sortable-list/sortable-list.module.ts b/packages/angular/src/toolkit/sortable-list/sortable-list.module.ts deleted file mode 100644 index 62edc660c8..0000000000 --- a/packages/angular/src/toolkit/sortable-list/sortable-list.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { CheckboxModule, DialogModule } from 'carbon-components-angular'; -import { DraggableModule } from '../draggable/index'; -import { SortableListItemComponent } from './sortable-list-item.component'; -import { SortableListComponent } from './sortable-list.component'; - -@NgModule({ - declarations: [SortableListComponent, SortableListItemComponent], - imports: [CommonModule, CheckboxModule, DialogModule, DraggableModule], - exports: [SortableListComponent, SortableListItemComponent], -}) -export class SortableListModule {} diff --git a/packages/angular/src/toolkit/sortable-list/sortable-list.scss b/packages/angular/src/toolkit/sortable-list/sortable-list.scss deleted file mode 100644 index 8358252e0d..0000000000 --- a/packages/angular/src/toolkit/sortable-list/sortable-list.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import '../vendor/@carbon/layout/scss/index'; -@import '../vendor/@carbon/themes/scss/index'; -@import '../vendor/@carbon/colors/scss/index'; - -ol { - padding-top: 4px; - padding-bottom: 4px; - position: relative; -} - -.dropzone { - height: carbon--mini-units(5); - margin-top: -28px; // px here to keep alignment correct ... we can't just do 20px (40/2) due to border sizing - position: absolute; - width: 100%; - display: none; - padding-left: carbon--mini-units(2); - padding-right: carbon--mini-units(2); -} - -.dropzone.active .line { - width: 100%; - border-top: 1px solid $interactive-01; - position: relative; - top: 24px; // px here as well for alignment -} - -.visible { - display: block; -} diff --git a/packages/angular/src/toolkit/sortable-list/sortable-list.stories.ts b/packages/angular/src/toolkit/sortable-list/sortable-list.stories.ts deleted file mode 100644 index 67632284d4..0000000000 --- a/packages/angular/src/toolkit/sortable-list/sortable-list.stories.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { withKnobs } from '@storybook/addon-knobs'; -import { moduleMetadata, storiesOf } from '@storybook/angular'; - -import { ListItem } from 'carbon-components-angular'; -import { SortableListModule } from './sortable-list.module'; - -storiesOf('Sterling Toolkit/Sortable list', module) - .addDecorator( - moduleMetadata({ - imports: [SortableListModule], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` -
- -
- - `, - props: { - items: [ - { - content: 'Item one', - selected: false, - }, - { - content: 'Item two', - selected: false, - }, - { - content: 'Item three', - selected: false, - }, - { - content: 'Item four', - selected: false, - }, - ] as ListItem[], - }, - })); diff --git a/packages/angular/src/toolkit/table-settings/index.ts b/packages/angular/src/toolkit/table-settings/index.ts deleted file mode 100644 index 3aab907be6..0000000000 --- a/packages/angular/src/toolkit/table-settings/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './table-settings-modal.component'; -export * from './table-settings-model.class'; -export * from './table-settings.module'; -export * from './table-settings-pane.class'; -export * from './table-settings.service'; -export * from './settings/index'; diff --git a/packages/angular/src/toolkit/table-settings/settings/checkbox-setting.class.ts b/packages/angular/src/toolkit/table-settings/settings/checkbox-setting.class.ts deleted file mode 100644 index 5d30683680..0000000000 --- a/packages/angular/src/toolkit/table-settings/settings/checkbox-setting.class.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { CheckboxSettingComponent } from './checkbox-setting.component'; -import { BaseSetting, SettingOption, SettingOptions } from './setting.class'; - -export interface CheckboxOption extends SettingOption { - checked: boolean; -} - -export interface CheckboxSettingOptions extends SettingOptions { - options: CheckboxOption[]; -} - -export class CheckboxSetting extends BaseSetting { - public component = CheckboxSettingComponent; - - protected options: CheckboxOption[]; - - constructor(options?: CheckboxSettingOptions) { - super(options); - this.options = options.options; - this._inputs.set('options', options.options); - this._outputs.set('optionsChange', this.onChanges.bind(this)); - } -} diff --git a/packages/angular/src/toolkit/table-settings/settings/checkbox-setting.component.ts b/packages/angular/src/toolkit/table-settings/settings/checkbox-setting.component.ts deleted file mode 100644 index 1b75ccb4b6..0000000000 --- a/packages/angular/src/toolkit/table-settings/settings/checkbox-setting.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { CheckboxChange } from 'carbon-components-angular/checkbox/checkbox.component'; -import { isObservable, Observable, of } from 'rxjs'; -import { CheckboxOption } from './checkbox-setting.class'; -import { SettingChanges } from './setting.class'; - -@Component({ - selector: 'sc-checkbox-setting, ai-checkbox-setting', - template: ` - - {{ getContent(option) | async }} - - `, -}) -export class CheckboxSettingComponent { - @Input() options: CheckboxOption[]; - - @Output() optionsChange = new EventEmitter(); - - getContent(option: CheckboxOption): Observable { - if (isObservable(option.content)) { - return option.content; - } - return of(option.content); - } - - onChange(event: CheckboxChange, eventOption: CheckboxOption) { - const changes = { - options: this.options.map((option) => { - if (option === eventOption) { - return Object.assign({}, option, { checked: event.checked }); - } - return option; - }), - }; - this.optionsChange.emit(changes); - } -} diff --git a/packages/angular/src/toolkit/table-settings/settings/component-setting.class.ts b/packages/angular/src/toolkit/table-settings/settings/component-setting.class.ts deleted file mode 100644 index 419b272e26..0000000000 --- a/packages/angular/src/toolkit/table-settings/settings/component-setting.class.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { BaseSetting } from './setting.class'; - -export interface InputMap { - [inputName: string]: any; -} - -export interface OutputMap { - [outputName: string]: (event: any) => void; -} - -export interface ComponentSettingOptions { - component: any; - inputs?: InputMap; - outputs?: OutputMap; -} - -export class ComponentSetting extends BaseSetting { - public component: any; - constructor(options: ComponentSettingOptions) { - super(options as any); - this.component = options.component; - if (options.inputs) { - this._inputs = new Map(Object.entries(options.inputs)); - } - - if (options.outputs) { - this._outputs = new Map(Object.entries(options.outputs)); - } - } - - getInputs() { - return this._inputs; - } - - getOutputs() { - return this._outputs; - } -} diff --git a/packages/angular/src/toolkit/table-settings/settings/index.ts b/packages/angular/src/toolkit/table-settings/settings/index.ts deleted file mode 100644 index 3925221d1b..0000000000 --- a/packages/angular/src/toolkit/table-settings/settings/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './checkbox-setting.class'; -export * from './checkbox-setting.component'; -export * from './radio-setting.class'; -export * from './radio-setting.component'; -export * from './setting.class'; -export * from './component-setting.class'; diff --git a/packages/angular/src/toolkit/table-settings/settings/radio-setting.class.ts b/packages/angular/src/toolkit/table-settings/settings/radio-setting.class.ts deleted file mode 100644 index 699b29c779..0000000000 --- a/packages/angular/src/toolkit/table-settings/settings/radio-setting.class.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { RadioSettingComponent } from './radio-setting.component'; -import { BaseSetting, SettingOption, SettingOptions } from './setting.class'; - -export interface RadioOption extends SettingOption { - value: any; -} - -export interface RadioSettingOptions extends SettingOptions { - options: RadioOption[]; - active: any; -} - -export class RadioSetting extends BaseSetting { - public component = RadioSettingComponent; - - protected options: RadioOption[]; - - protected active: any; - - constructor(options: RadioSettingOptions) { - super(options); - this.options = options.options; - this.active = options.active; - this._inputs.set('options', options.options); - this._inputs.set('active', options.active); - this._outputs.set('activeChange', this.onChanges.bind(this)); - } - - toJSON(): object { - let jsonOptions = null; - if (this.options) { - jsonOptions = this.options.map((option) => - option.toJSON ? option.toJSON() : JSON.parse(JSON.stringify(option)) - ); - } - return { - content: this.content.value, - options: jsonOptions, - active: this.active, - }; - } -} diff --git a/packages/angular/src/toolkit/table-settings/settings/radio-setting.component.ts b/packages/angular/src/toolkit/table-settings/settings/radio-setting.component.ts deleted file mode 100644 index c035f122d9..0000000000 --- a/packages/angular/src/toolkit/table-settings/settings/radio-setting.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { RadioChange } from 'carbon-components-angular'; -import { isObservable, Observable, of } from 'rxjs'; -import { RadioOption } from './radio-setting.class'; -import { SettingChanges } from './setting.class'; - -@Component({ - selector: 'sc-radio-setting, ai-radio-setting', - template: ` - - - {{ getContent(option) | async }} - - - `, -}) -export class RadioSettingComponent { - @Input() options: RadioOption[]; - - @Input() active: any; - - @Output() activeChange = new EventEmitter(); - - getContent(option: RadioOption): Observable { - if (isObservable(option.content)) { - return option.content; - } - return of(option.content); - } - - onChange(event: RadioChange) { - this.activeChange.emit({ active: event.value }); - } -} diff --git a/packages/angular/src/toolkit/table-settings/settings/setting.class.ts b/packages/angular/src/toolkit/table-settings/settings/setting.class.ts deleted file mode 100644 index bf65b36b1a..0000000000 --- a/packages/angular/src/toolkit/table-settings/settings/setting.class.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { TemplateRef } from '@angular/core'; -import { BehaviorSubject, isObservable, Subscription } from 'rxjs'; -import { Content } from '../table-settings-model.class'; - -export interface SettingOption { - content?: Content; - template?: TemplateRef; - toJSON?(): any; -} - -export interface SettingOptions { - content?: Content; - template?: TemplateRef; - options: SettingOption[]; -} - -export interface SettingChanges { - [property: string]: any; -} - -export class BaseSetting { - public readonly component: any; - - protected options: SettingOption[]; - protected staged = {}; - protected content = new BehaviorSubject(null); - protected contentObservable = this.content.asObservable(); - protected contentSubscription = new Subscription(); - protected template?: TemplateRef; - - protected _inputs = new Map(); - protected _outputs = new Map(); - - constructor(options?: SettingOptions) { - this.setContent(options.content); - this.setTemplate(options.template); - this.options = options.options; - } - - getContent() { - return this.contentObservable; - } - - setContent(content: Content) { - if (isObservable(content)) { - this.contentSubscription.unsubscribe(); - this.contentSubscription = content.subscribe((value) => { - this.content.next(value); - }); - } else { - this.content.next(content); - } - } - - getTemplate() { - return this.template; - } - - setTemplate(template: TemplateRef) { - this.template = template; - } - - /** - * gets a map of input names to values - * - * By default returns a map of 'options' to `this.options` - */ - getInputs() { - return this._inputs; - } - - getOutputs() { - return this._outputs; - } - - toJSON(): object { - let jsonOptions = null; - if (this.options) { - jsonOptions = this.options.map((option) => - option.toJSON ? option.toJSON() : JSON.parse(JSON.stringify(option)) - ); - } - return { - content: this.content.value, - options: jsonOptions, - }; - } - - toString(): string { - return JSON.stringify(this.toJSON()); - } - - onChanges(changes: SettingChanges) { - for (const [key, value] of Object.entries(changes)) { - this.staged[key] = value; - } - } - - commit() { - for (const [key, value] of Object.entries(this.staged)) { - this[key] = value; - } - } -} diff --git a/packages/angular/src/toolkit/table-settings/table-settings-modal.component.ts b/packages/angular/src/toolkit/table-settings/table-settings-modal.component.ts deleted file mode 100644 index 9fd4d0eb52..0000000000 --- a/packages/angular/src/toolkit/table-settings/table-settings-modal.component.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { Component, EventEmitter, Inject, Input, OnInit, Optional, Output } from '@angular/core'; -import { BaseModal } from 'carbon-components-angular'; -import { Subject } from 'rxjs'; -import { SortableListComponent } from '../sortable-list/index'; -import { TableSettings } from './table-settings-model.class'; - -@Component({ - selector: 'sc-table-settings-modal, ai-table-settings-modal', - template: ` - - -

{{ model.title }}

-
-
- {{ model.getContent() | async }} - - - - -

{{ pane.getContent() | async }}

-
-

{{ setting.getContent() | async }}

- - - -
-
-
-
- - - - -
- `, - styleUrls: ['./table-settings-modal.scss'], -}) -export class TableSettingsModalComponent extends BaseModal implements OnInit { - listComponent = SortableListComponent; - - @Input() settingsModel: TableSettings; - - @Output() settingsModelChange = new EventEmitter(); - - constructor( - @Optional() @Inject('model') public model: TableSettings, - @Optional() @Inject('modelChange') protected modelChange: Subject - ) { - super(); - } - - ngOnInit() { - if (this.settingsModel) { - this.model = this.settingsModel; - } - } - - cancel() { - this.closeModal(); - } - - acceptChanges() { - this.model.commit(); - this.settingsModelChange.emit(this.model); - if (this.modelChange) { - this.modelChange.next(this.model); - } - this.closeModal(); - } -} diff --git a/packages/angular/src/toolkit/table-settings/table-settings-modal.scss b/packages/angular/src/toolkit/table-settings/table-settings-modal.scss deleted file mode 100644 index cf5c1ec449..0000000000 --- a/packages/angular/src/toolkit/table-settings/table-settings-modal.scss +++ /dev/null @@ -1,4 +0,0 @@ -.content { - padding-right: 1rem; - overflow-y: visible; -} diff --git a/packages/angular/src/toolkit/table-settings/table-settings-model.class.ts b/packages/angular/src/toolkit/table-settings/table-settings-model.class.ts deleted file mode 100644 index ff9c13c14d..0000000000 --- a/packages/angular/src/toolkit/table-settings/table-settings-model.class.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { TemplateRef } from '@angular/core'; -import { isObservable, Observable, of } from 'rxjs'; -import { TableSettingsPane, TableSettingsPaneOptions } from './table-settings-pane.class'; - -export type Content = string | Observable; - -export interface TableSettingsOptions { - panes?: TableSettingsPane[]; - content?: any; - title?: any; - template?: TemplateRef; -} - -// tslint:disable: max-classes-per-file -export class TableSettings { - content: any; - title: any; - template: TemplateRef; - protected panes: TableSettingsPane[] = []; - - constructor(options: TableSettingsOptions) { - if (options.panes) { - this.panes = options.panes; - } - this.content = options.content; - this.title = options.title; - this.template = options.template; - } - - addPane(paneOrOptions: TableSettingsPane | TableSettingsPaneOptions) { - if (paneOrOptions instanceof TableSettingsPane) { - this.panes.push(paneOrOptions); - } else { - this.panes.push(new TableSettingsPane(paneOrOptions)); - } - } - - setPanes(panes: TableSettingsPane[]) { - this.panes = panes; - } - - getPanes() { - return this.panes; - } - - getContent() { - if (isObservable(this.content)) { - return this.content; - } - - return of(this.content); - } - - toJSON() { - let jsonPanes = []; - if (this.panes) { - jsonPanes = this.panes.map((pane) => pane.toJSON()); - } - const jsonContent = this.content ? this.content.toString() : null; - const jsonTitle = this.title ? this.title.toString() : null; - return { - content: jsonContent, - title: jsonTitle, - panes: jsonPanes, - }; - } - - toString() { - return JSON.stringify(this.toJSON()); - } - - commit() { - this.panes.forEach((pane) => pane.commit()); - } -} diff --git a/packages/angular/src/toolkit/table-settings/table-settings-pane.class.ts b/packages/angular/src/toolkit/table-settings/table-settings-pane.class.ts deleted file mode 100644 index 0f0ebe8c88..0000000000 --- a/packages/angular/src/toolkit/table-settings/table-settings-pane.class.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { isObservable, of } from 'rxjs'; -import { BaseSetting } from './settings/index'; -import { Content } from './table-settings-model.class'; - -export interface TableSettingsPaneOptions { - settings?: BaseSetting[]; - content?: any; - title: any; -} - -export class TableSettingsPane { - content?: any; - title: any; - protected settings: BaseSetting[] = []; - - constructor(options: TableSettingsPaneOptions) { - if (options.settings) { - this.settings = options.settings; - } - this.content = options.content; - this.title = options.title; - } - - addSetting(setting: BaseSetting) { - this.settings.push(setting); - } - - setSettings(settings: BaseSetting[]) { - this.settings = settings; - } - - getSettings() { - return this.settings; - } - - getContent() { - if (isObservable(this.content)) { - return this.content; - } - - return of(this.content); - } - - toJSON() { - let jsonSettings = []; - if (this.settings) { - jsonSettings = this.settings.map((setting) => setting.toJSON()); - } - const jsonContent = this.content ? this.content.toString() : null; - return { - settings: jsonSettings, - content: jsonContent, - }; - } - - toString() { - return JSON.stringify(this.toJSON()); - } - - commit() { - this.settings.forEach((setting) => setting.commit()); - } -} diff --git a/packages/angular/src/toolkit/table-settings/table-settings.module.ts b/packages/angular/src/toolkit/table-settings/table-settings.module.ts deleted file mode 100644 index 6faf7564cc..0000000000 --- a/packages/angular/src/toolkit/table-settings/table-settings.module.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { - ButtonModule, - CheckboxModule, - DialogModule, - ModalModule, - RadioModule, - TabsModule, -} from 'carbon-components-angular'; -import { SortableListComponent } from '../sortable-list/sortable-list.component'; -import { SortableListModule } from '../sortable-list/sortable-list.module'; -import { UtilsModule } from '../utils/index'; -import { CheckboxSettingComponent } from './settings/checkbox-setting.component'; -import { RadioSettingComponent } from './settings/radio-setting.component'; -import { TableSettingsModalComponent } from './table-settings-modal.component'; -import { TableSettingsService } from './table-settings.service'; - -@NgModule({ - declarations: [TableSettingsModalComponent, CheckboxSettingComponent, RadioSettingComponent], - exports: [TableSettingsModalComponent, CheckboxSettingComponent, RadioSettingComponent], - providers: [TableSettingsService], - imports: [ - CommonModule, - BrowserAnimationsModule, - SortableListModule, - ModalModule, - ButtonModule, - DialogModule, - UtilsModule, - TabsModule, - CheckboxModule, - RadioModule, - ], - entryComponents: [SortableListComponent, CheckboxSettingComponent, RadioSettingComponent], -}) -export class TableSettingsModule {} diff --git a/packages/angular/src/toolkit/table-settings/table-settings.service.ts b/packages/angular/src/toolkit/table-settings/table-settings.service.ts deleted file mode 100644 index fa918623bc..0000000000 --- a/packages/angular/src/toolkit/table-settings/table-settings.service.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { ComponentRef, Injectable } from '@angular/core'; -import { ModalService } from 'carbon-components-angular'; -import { Observable, Subject } from 'rxjs'; -import { TableSettingsModalComponent } from './table-settings-modal.component'; - -@Injectable() -export class TableSettingsService { - public readonly onClose: Observable; - - protected closeSubject = new Subject(); - - protected modalRef: ComponentRef; - - constructor(protected modalService: ModalService) { - this.onClose = this.closeSubject.asObservable(); - } - - openSettings(settingsModel) { - if (this.modalRef) { - return; - } - - this.modalRef = this.modalService.create({ - component: TableSettingsModalComponent, - inputs: { - model: settingsModel, - }, - }); - - this.modalRef.instance.close.subscribe(() => { - this.closeSubject.next(); - }); - } - - closeSettings() { - if (!this.modalRef) { - return; - } - - this.modalRef.instance.closeModal(); - this.modalRef = null; - } -} diff --git a/packages/angular/src/toolkit/table-settings/table-settings.stories.ts b/packages/angular/src/toolkit/table-settings/table-settings.stories.ts deleted file mode 100644 index 81c8f2cda0..0000000000 --- a/packages/angular/src/toolkit/table-settings/table-settings.stories.ts +++ /dev/null @@ -1,158 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { withKnobs } from '@storybook/addon-knobs'; -import { moduleMetadata, storiesOf } from '@storybook/angular'; -import { SortableList, SortableListOption } from '../sortable-list'; -import { CheckboxSetting, ComponentSetting, RadioSetting } from './settings'; -import { TableSettings } from './table-settings-model.class'; -import { TableSettingsPane } from './table-settings-pane.class'; -import { TableSettingsModule } from './table-settings.module'; - -@Component({ - selector: 'sc-story-custom-component', - template: ` -

This is a custom component

-

- It can have any content within it, and additional data can be passed via inputs, like such: - {{ hello }} -

- `, -}) -class StoryCustomComponent { - @Input() hello; -} - -storiesOf('Sterling Toolkit/Table settings modal', module) - .addDecorator( - moduleMetadata({ - declarations: [StoryCustomComponent], - imports: [TableSettingsModule], - entryComponents: [StoryCustomComponent], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => ({ - template: ` -

hello world

- - - `, - props: { - _model: null, - model() { - if (!this._model) { - this._model = this.initModel(); - } - return this._model; - }, - onChange(model: TableSettings) { - console.log(model.toJSON()); - }, - onCancel() { - console.log(this.model.toJSON()); - }, - initModel() { - const tableSettingsModel = new TableSettings({ - content: 'hello world', - title: 'Table settings', - }); - - const sortableListPane = new TableSettingsPane({ - title: 'Setting pane title', - content: 'Pane content', - settings: [ - new SortableList({ - content: 'Setting content', - options: [ - new SortableListOption({ - content: 'option 1', - order: 0, - disabled: true, - }), - new SortableListOption({ - content: 'option 2', - order: 1, - }), - new SortableListOption({ - content: 'option 3', - order: 2, - }), - new SortableListOption({ - content: 'option 4', - order: 3, - }), - new SortableListOption({ - content: 'option 5', - order: 4, - }), - new SortableListOption({ - content: 'option 6', - order: 5, - }), - ], - }), - ], - }); - - tableSettingsModel.addPane(sortableListPane); - - tableSettingsModel.addPane({ - title: 'Custom component', - settings: [ - new ComponentSetting({ - component: StoryCustomComponent, - inputs: { - hello: 'Hello, world!', - }, - }), - ], - }); - - const checkboxSetting = new CheckboxSetting({ - content: 'This is one checkbox group', - options: [ - { - content: 'hi', - checked: false, - }, - { - content: 'Another option', - checked: false, - }, - ], - }); - - tableSettingsModel.addPane({ - title: 'Checkbox', - settings: [checkboxSetting], - }); - - const radioPane = new TableSettingsPane({ - title: 'Radio', - }); - - radioPane.addSetting( - new RadioSetting({ - content: 'This is a radio setting', - active: 'one', - options: [ - { - content: 'Option one', - value: 'one', - }, - { - content: 'Option two', - value: 'two', - }, - ], - }) - ); - - tableSettingsModel.addPane(radioPane); - - return tableSettingsModel; - }, - }, - })); diff --git a/packages/angular/src/toolkit/table/head/sterling-table-head-cell.component.ts b/packages/angular/src/toolkit/table/head/sterling-table-head-cell.component.ts deleted file mode 100644 index eb47819d0e..0000000000 --- a/packages/angular/src/toolkit/table/head/sterling-table-head-cell.component.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { TableHeadCell } from 'carbon-components-angular'; - -@Component({ - // tslint:disable-next-line: component-selector - selector: '[scTableHeadCell]', - template: ` - - - - {{ column.data }} - - - - - - - - - `, - styleUrls: ['./sterling-table-head-cell.scss'], - encapsulation: ViewEncapsulation.None, -}) -export class SCTableHeadCell extends TableHeadCell {} diff --git a/packages/angular/src/toolkit/table/head/sterling-table-head-cell.scss b/packages/angular/src/toolkit/table/head/sterling-table-head-cell.scss deleted file mode 100644 index 7ab53e1c5f..0000000000 --- a/packages/angular/src/toolkit/table/head/sterling-table-head-cell.scss +++ /dev/null @@ -1,44 +0,0 @@ -// TODO add styling hooks to carbon-components-angular so we can remove scTableHeadCell -.table-head-cell-text, -.table-head-cell-icons { - // position: absolute; - top: 0; - // line-height: 48px; -} - -.bx--data-table--compact { - .table-head-cell-text, - .table-head-cell-icons { - line-height: 24px; - } -} - -.bx--data-table--short { - .table-head-cell-text, - .table-head-cell-icons { - line-height: 32px; - } -} - -.bx--data-table--tall { - .table-head-cell-text, - .table-head-cell-icons { - line-height: 64px; - } -} - -.table-head-cell-icons { - right: 0; - margin-right: 10px; -} - -.bx--table-sort.bx--table-sort--active .bx--table-sort__icon { - top: 16px; -} - -.sc-table { - .bx--table-header-label, - .table-head-cell-text { - padding-left: 16px; - } -} diff --git a/packages/angular/src/toolkit/table/head/sterling-table-head.component.ts b/packages/angular/src/toolkit/table/head/sterling-table-head.component.ts deleted file mode 100644 index 194726a5ec..0000000000 --- a/packages/angular/src/toolkit/table/head/sterling-table-head.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Component, Input, ViewEncapsulation } from '@angular/core'; - -import { TableHead } from 'carbon-components-angular'; - -/** - * A subcomponent that creates the thead of the table - * - * Example - * - * ```html - * - * ``` - */ -@Component({ - // tslint:disable-next-line:component-selector - selector: '[scTableHead]', - template: ` - - - - - - - - - - - - - - `, - styleUrls: ['./sterling-table-head.scss'], - encapsulation: ViewEncapsulation.None, -}) -export class SCTableHeadComponent extends TableHead { - @Input() model: any; -} diff --git a/packages/angular/src/toolkit/table/head/sterling-table-head.scss b/packages/angular/src/toolkit/table/head/sterling-table-head.scss deleted file mode 100644 index 00a0a75ee1..0000000000 --- a/packages/angular/src/toolkit/table/head/sterling-table-head.scss +++ /dev/null @@ -1,21 +0,0 @@ -.table-row:not(:first-of-type) { - border-top: 2px solid white; -} - -th:not(:last-of-type) { - border-right: 2px solid white; - - &.table-selection-column { - border-right: none; - } -} - -.sc-table { - .bx--table-sort, - &.bx--data-table--sort th:first-of-type .bx--table-sort { - padding-left: 0; - } - &.bx--data-table th:last-of-type { - position: inherit; - } -} diff --git a/packages/angular/src/toolkit/table/index.ts b/packages/angular/src/toolkit/table/index.ts deleted file mode 100644 index 842e191899..0000000000 --- a/packages/angular/src/toolkit/table/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './sterling-table.module'; -export * from './sterling-table.component'; -export * from './sterling-table-model.class'; -export * from './head/sterling-table-head.component'; -export * from './head/sterling-table-head-cell.component'; diff --git a/packages/angular/src/toolkit/table/sterling-table-model.class.ts b/packages/angular/src/toolkit/table/sterling-table-model.class.ts deleted file mode 100644 index b0b1ea0475..0000000000 --- a/packages/angular/src/toolkit/table/sterling-table-model.class.ts +++ /dev/null @@ -1,701 +0,0 @@ -import { EventEmitter } from '@angular/core'; -import { TableHeaderItem, TableItem, TableRow } from 'carbon-components-angular'; -import { HeaderType } from 'carbon-components-angular/table/table-model.class'; -import { Subject } from 'rxjs'; - -export class SCTableModel { - /** - * The number of models instantiated, used for (among other things) unique id generation - */ - protected static COUNT = 0; - - headerChange = new Subject(); - dataChange = new EventEmitter(); - rowsSelectedChange = new EventEmitter(); - rowsExpandedChange = new EventEmitter(); - /** - * Gets emitted when `selectAll` is called. Emits false if all rows are deselected and true if - * all rows are selected. - */ - selectAllChange = new Subject(); - - /** - * Contains information about the header cells of the table. - */ - set header(newHeader: any) { - if (!newHeader || (Array.isArray(newHeader) && newHeader.length === 0)) { - newHeader = [[]]; - } - - this._header = newHeader; - - if (this.headerChange) { - this.headerChange.next(); - } - } - - get header() { - return this._header; - } - - /** - * Sets data of the table. - * - * Make sure all rows are the same length to keep the column count accurate. - */ - set data(newData: TableItem[][]) { - if (!newData || (Array.isArray(newData) && newData.length === 0)) { - newData = [[]]; - } - - this._data = newData; - - // init rowsSelected - this.rowsSelected = new Array(this._data.length).fill(false); - this.rowsExpanded = new Array(this._data.length).fill(false); - - // init rowsContext - this.rowsContext = new Array(this._data.length); - - // init rowsClass - this.rowsClass = new Array(this._data.length); - - // only create a fresh header if necessary (header doesn't exist or differs in length) - // this will only create a single level of headers (it will destroy any existing header items) - if ( - this.header == null || - (this.header[0].length !== this._data[0].length && this._data[0].length > 0) - ) { - const newHeader = [[]]; - // disable this tslint here since we don't actually want to - // loop the contents of the data - // tslint:disable-next-line: prefer-for-of - for (let i = 0; i < this._data[0].length; i++) { - newHeader[0].push(new TableHeaderItem()); - } - this.header = newHeader; - } - - this.dataChange.emit(); - } - - /** - * Gets the full data. - * - * You can use it to alter individual `TableItem`s but if you need to change - * table structure, use `addRow()` and/or `addColumn()` - */ - get data() { - return this._data; - } - - /** - * Contains information about selection state of rows in the table. - */ - rowsSelected: boolean[] = []; - - /** - * Contains information about expanded state of rows in the table. - */ - rowsExpanded: boolean[] = []; - - /** - * Contains information about the context of the row. - * - * It affects styling of the row to reflect the context. - * - * string can be one of `"success" | "warning" | "info" | "error" | ""` and it's - * empty or undefined by default - */ - rowsContext: string[] = []; - - /** - * Contains class name(s) of the row. - * - * It affects styling of the row to reflect the appended class name(s). - * - * It's empty or undefined by default - */ - rowsClass: string[] = []; - - /** - * Tracks the current page. - */ - currentPage = 1; - - /** - * Length of page. - */ - pageLength = 10; - - /** - * Set to true when there is no more data to load in the table - */ - isEnd = false; - - /** - * Set to true when lazy loading to show loading indicator - */ - isLoading = false; - - /** - * Absolute total number of rows of the table. - */ - protected _totalDataLength: number; - - /** - * Manually set data length in case the data in the table doesn't - * correctly reflect all the data that table is to display. - * - * Example: if you have multiple pages of data that table will display - * but you're loading one at a time. - * - * Set to `null` to reset to default behavior. - */ - set totalDataLength(length: number) { - // if this function is called without a parameter we need to set to null to avoid having undefined != null - this._totalDataLength = length || null; - } - - /** - * Total length of data that table has access to, or the amount manually set - */ - get totalDataLength() { - // if manually set data length - if (this._totalDataLength !== null && this._totalDataLength >= 0) { - return this._totalDataLength; - } - - // if empty dataset - if (this.data && this.data.length === 1 && this.data[0].length === 0) { - return 0; - } - - return this.data.length; - } - - /** - * Used in `data` - */ - protected _data: TableItem[][] = [[]]; - - protected _header: TableHeaderItem[][] = [[]]; - - /** - * The number of models instantiated, this is to make sure each table has a different - * model count for unique id generation. - */ - protected tableModelCount = 0; - - constructor() { - this.tableModelCount = SCTableModel.COUNT++; - } - - isRowFiltered(index: number): boolean { - const realIndex = this.realRowIndex(index); - return this.header.some((headerRow: TableHeaderItem[]) => - headerRow.some((item, i) => item && item.filter(this.row(realIndex)[i])) - ); - } - - /** - * Returns an id for the given column - * - * @param column the column to generate an id for - * @param row the row of the header to generate an id for - */ - getId(column: HeaderType, row = 0): string { - return `table-header-${row}-${column}-${this.tableModelCount}`; - } - - getHeaderId(column: number | 'select' | 'expand', colSpan = 1): string { - if (column === 'select' || column === 'expand') { - return this.getId(column); - } - - const ids = []; - for (let i = this.header.length - 1; i >= 0; i--) { - for (let j = column; j >= 0; j--) { - if (this.header[i][j]) { - for (let k = 0; k < colSpan; k++) { - ids.push(this.getId(j + k, i)); - } - break; - } - } - } - - return ids.join(' '); - } - - /** - * Finds closest header by trying the lowest cell in header and then work its way to the left - * @param column - */ - getHeader(column) { - if (!this.header) { - return null; - } - - for (let i = this.header.length - 1; i >= 0; i--) { - const headerCell = this.header[i][column]; - - if (headerCell) { - return headerCell; - } - } - - for (let i = column; i >= 0; i--) { - const headerCell = this.header[0][i]; - if (headerCell) { - return headerCell; - } - } - - return null; - } - - /** - * Returns how many rows is currently selected - */ - selectedRowsCount(): number { - let count = 0; - if (this.rowsSelected) { - this.rowsSelected.forEach((rowSelected) => { - if (rowSelected) { - count++; - } - }); - } - return count; - } - - /** - * Returns how many rows is currently expanded - */ - expandedRowsCount(): number { - let count = 0; - if (this.rowsExpanded) { - this.rowsExpanded.forEach((rowExpanded) => { - if (rowExpanded) { - count++; - } - }); - } - return count; - } - - /** - * Returns `index`th row of the table. - * - * Negative index starts from the end. -1 being the last element. - * - * @param index - */ - row(index: number): TableItem[] { - return this.data[this.realRowIndex(index)]; - } - - /** - * Adds a row to the `index`th row or appends to table if index not provided. - * - * If row is shorter than other rows or not provided, it will be padded with - * empty `TableItem` elements. - * - * If row is longer than other rows, others will be extended to match so no data is lost. - * - * If called on an empty table with no parameters, it creates a 1x1 table. - * - * Negative index starts from the end. -1 being the last element. - * - * @param [row] - * @param [index] - */ - addRow(row?: TableItem[], index?: number) { - // if table empty create table with row - if (!this.data || this.data.length === 0 || this.data[0].length === 0) { - let newData = new Array>(); - newData.push(row ? row : [new TableItem()]); // row or one empty one column row - this.data = newData; - - return; - } - - let realRow = row; - const columnCount = this.data[0].length; - - if (row == null) { - realRow = new Array(); - for (let i = 0; i < columnCount; i++) { - realRow.push(new TableItem()); - } - } - - if (realRow.length < columnCount) { - // extend the length of realRow - const difference = columnCount - realRow.length; - for (let i = 0; i < difference; i++) { - realRow.push(new TableItem()); - } - } else if (realRow.length > columnCount) { - // extend the length of header - let difference = realRow.length - this.header.length; - for (let j = 0; j < difference; j++) { - this.header.push(new TableHeaderItem()); - } - // extend the length of every other row - for (let i = 0; i < this.data.length; i++) { - let currentRow = this.data[i]; - difference = realRow.length - currentRow.length; - for (let j = 0; j < difference; j++) { - currentRow.push(new TableItem()); - } - } - } - - if (index == null) { - this.data.push(realRow); - - // update rowsSelected property for length - this.rowsSelected.push(false); - - // update rowsExpanded property for length - this.rowsExpanded.push(false); - - // update rowsContext property for length - this.rowsContext.push(undefined); - - // update rowsClass property for length - this.rowsClass.push(undefined); - } else { - const ri = this.realRowIndex(index); - this.data.splice(ri, 0, realRow); - - // update rowsSelected property for length - this.rowsSelected.splice(ri, 0, false); - - // update rowsExpanded property for length - this.rowsExpanded.splice(ri, 0, false); - - // update rowsContext property for length - this.rowsContext.splice(ri, 0, undefined); - - // update rowsClass property for length - this.rowsClass.splice(ri, 0, undefined); - } - - this.dataChange.emit(); - } - - /** - * Deletes `index`th row. - * - * Negative index starts from the end. -1 being the last element. - * - * @param index - */ - deleteRow(index: number) { - const rri = this.realRowIndex(index); - this.data.splice(rri, 1); - this.rowsSelected.splice(rri, 1); - this.rowsExpanded.splice(rri, 1); - this.rowsContext.splice(rri, 1); - this.rowsClass.splice(rri, 1); - - this.dataChange.emit(); - } - - hasExpandableRows() { - return this.data.some((data) => data.some((d) => d && d.expandedData)); // checking for some in 2D array - } - - isRowExpandable(index: number) { - return this.data[index].some((d) => d && d.expandedData); - } - - isRowExpanded(index: number) { - return this.rowsExpanded[index]; - } - - getRowContext(index: number) { - return this.rowsContext[index]; - } - - /** - * Returns `index`th column of the table. - * - * Negative index starts from the end. -1 being the last element. - * - * @param index - */ - column(index: number): TableItem[] { - let column = new Array(); - const ri = this.realColumnIndex(index); - const rc = this.data.length; - - for (let i = 0; i < rc; i++) { - const row = this.data[i]; - column.push(row[ri]); - } - - return column; - } - - /** - * Adds a column to the `index`th column or appends to table if index not provided. - * - * If column is shorter than other columns or not provided, it will be padded with - * empty `TableItem` elements. - * - * If column is longer than other columns, others will be extended to match so no data is lost. - * - * If called on an empty table with no parameters, it creates a 1x1 table. - * - * Negative index starts from the end. -1 being the last element. - * - * @param [column] - * @param [index] - */ - addColumn(column?: TableItem[], index?: number) { - // if table empty create table with row - if (!this.data || this.data.length === 0 || this.data[0].length === 0) { - let newData = new Array>(); - if (column == null) { - newData.push([new TableItem()]); - } else { - for (let i = 0; i < column.length; i++) { - let item = column[i]; - newData.push([item]); - } - } - this.data = newData; - - return; - } - - let rc = this.data.length; // row count - let ci = this.realColumnIndex(index); - - // append missing rows - for (let i = 0; column != null && i < column.length - rc; i++) { - this.addRow(); - } - rc = this.data.length; - if (index == null) { - // append to end - for (let i = 0; i < rc; i++) { - let row = this.data[i]; - row.push(column == null || column[i] == null ? new TableItem() : column[i]); - } - // update header if not already set by user - if (this.header.length < this.data[0].length) { - this.header.push(new TableHeaderItem()); - } - } else { - if (index >= this.data[0].length) { - // if trying to append - ci++; - } - // insert - for (let i = 0; i < rc; i++) { - let row = this.data[i]; - row.splice(ci, 0, column == null || column[i] == null ? new TableItem() : column[i]); - } - // update header if not already set by user - if (this.header.length < this.data[0].length) { - this.header.splice(ci, 0, new TableHeaderItem()); - } - } - - this.dataChange.emit(); - } - - /** - * Deletes `index`th column. - * - * Negative index starts from the end. -1 being the last element. - * - * @param index - */ - deleteColumn(index: number) { - const rci = this.realColumnIndex(index); - const rowCount = this.data.length; - for (let i = 0; i < rowCount; i++) { - this.data[i].splice(rci, 1); - } - // update header if not already set by user - if (this.header.length > this.data[0].length) { - this.header.splice(rci, 1); - } - - this.dataChange.emit(); - } - - moveColumn(indexFrom: number, indexTo: number) { - const headerFrom = this.header[indexFrom]; - - this.addColumn(this.column(indexFrom), indexTo); - this.deleteColumn(indexFrom + (indexTo < indexFrom ? 1 : 0)); - - this.header[indexTo + (indexTo > indexFrom ? -1 : 0)] = headerFrom; - } - - /** - * Sorts the data currently present in the model based on `compare()` - * - * Direction is set by `ascending` and `descending` properties of `TableHeaderItem` - * in `index`th column. - * - * @param index The column based on which it's sorting - */ - sort(index: number) { - const headerToSort = this.getHeader(index); - this.pushRowStateToModelData(); - this.data.sort( - (a, b) => (headerToSort.descending ? -1 : 1) * headerToSort.compare(a[index], b[index]) - ); - this.popRowStateFromModelData(); - this.header.forEach((headerRow: TableHeaderItem[]) => { - headerRow.forEach((column) => { - if (column) { - column.sorted = false; - } - }); - }); - headerToSort.sorted = true; - } - - /** - * Appends `rowsSelected` and `rowsExpanded` info to model data. - * - * When sorting rows, do this first so information about row selection - * gets sorted with the other row info. - * - * Call `popRowSelectionFromModelData()` after sorting to make everything - * right with the world again. - */ - pushRowStateToModelData() { - for (let i = 0; i < this.data.length; i++) { - const rowSelectedMark = new TableItem(); - rowSelectedMark.data = this.rowsSelected[i]; - this.data[i].push(rowSelectedMark); - - const rowExpandedMark = new TableItem(); - rowExpandedMark.data = this.rowsExpanded[i]; - this.data[i].push(rowExpandedMark); - - const rowContext = new TableItem(); - rowContext.data = this.rowsContext[i]; - this.data[i].push(rowContext); - - const rowClass = new TableItem(); - rowClass.data = this.rowsClass[i]; - this.data[i].push(rowClass); - } - } - - /** - * Restores `rowsSelected` from data pushed by `pushRowSelectionToModelData()` - * - * Call after sorting data (if you previously pushed to maintain selection order) - * to make everything right with the world again. - */ - popRowStateFromModelData() { - for (let i = 0; i < this.data.length; i++) { - this.rowsClass[i] = this.data[i].pop().data; - this.rowsContext[i] = this.data[i].pop().data; - this.rowsExpanded[i] = !!this.data[i].pop().data; - this.rowsSelected[i] = !!this.data[i].pop().data; - } - } - - /** - * Select/deselect `index`th row based on value - * - * @param index index of the row to select - * @param value state to set the row to. Defaults to `true` - */ - selectRow(index: number, value = true) { - if (this.isRowDisabled(index)) { - return; - } - this.rowsSelected[index] = value; - this.rowsSelectedChange.emit(index); - } - - /** - * Selects or deselects all rows in the model - * - * @param value state to set all rows to. Defaults to `true` - */ - selectAll(value = true) { - if (this.data.length >= 1) { - for (let i = 0; i < this.rowsSelected.length; i++) { - this.selectRow(i, value); - } - } - this.selectAllChange.next(value); - } - - isRowSelected(index: number) { - return this.rowsSelected[index]; - } - - /** - * Checks if row is disabled or not. - */ - isRowDisabled(index: number) { - const row = this.data[index] as TableRow; - return !!row.disabled; - } - - /** - * Expands/Collapses `index`th row based on value - * - * @param index index of the row to expand or collapse - * @param value expanded state of the row. `true` is expanded and `false` is collapsed - */ - expandRow(index: number, value = true) { - this.rowsExpanded[index] = value; - this.rowsExpandedChange.emit(index); - } - - /** - * Gets the true index of a row based on it's relative position. - * Like in Python, positive numbers start from the top and - * negative numbers start from the bottom. - * - * @param index - */ - protected realRowIndex(index: number): number { - return this.realIndex(index, this.data.length); - } - - /** - * Gets the true index of a column based on it's relative position. - * Like in Python, positive numbers start from the top and - * negative numbers start from the bottom. - * - * @param index - */ - protected realColumnIndex(index: number): number { - return this.realIndex(index, this.data[0].length); - } - - /** - * Generic function to calculate the real index of something. - * Used by `realRowIndex()` and `realColumnIndex()` - * - * @param index - * @param length - */ - protected realIndex(index: number, length: number): number { - if (index == null) { - return length - 1; - } else if (index >= 0) { - return index >= length ? length - 1 : index; - } else { - return -index >= length ? 0 : length + index; - } - } -} diff --git a/packages/angular/src/toolkit/table/sterling-table.component.ts b/packages/angular/src/toolkit/table/sterling-table.component.ts deleted file mode 100644 index 6ce63da3c5..0000000000 --- a/packages/angular/src/toolkit/table/sterling-table.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { Table } from 'carbon-components-angular'; - -/** - * Sterling specific table component - * - * **Warning:** This component will be deprecated in the future in favour of a spec compliant ai-table component - * - * Example: - * ``` - * - * ``` - */ -@Component({ - selector: 'sc-table', - template: ` - - - - - - - - - - - - - -
-
- - - -
-
-
{{ getEndOfDataText() | async }}
- -
- `, - styleUrls: ['./sterling-table.scss'], - encapsulation: ViewEncapsulation.None, -}) -export class SCTableComponent extends Table {} diff --git a/packages/angular/src/toolkit/table/sterling-table.module.ts b/packages/angular/src/toolkit/table/sterling-table.module.ts deleted file mode 100644 index 2e6104e4d3..0000000000 --- a/packages/angular/src/toolkit/table/sterling-table.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { ButtonModule, DialogModule, TableModule } from 'carbon-components-angular'; - -import { CommonModule } from '@angular/common'; -import { SCTableHeadCell } from './head/sterling-table-head-cell.component'; -import { SCTableHeadComponent } from './head/sterling-table-head.component'; -import { SCTableComponent } from './sterling-table.component'; - -@NgModule({ - declarations: [SCTableComponent, SCTableHeadComponent, SCTableHeadCell], - imports: [DialogModule, ButtonModule, CommonModule, TableModule], - exports: [SCTableComponent, SCTableHeadComponent, SCTableHeadCell], -}) -export class SCTableModule {} diff --git a/packages/angular/src/toolkit/table/sterling-table.scss b/packages/angular/src/toolkit/table/sterling-table.scss deleted file mode 100644 index 15f6ec3d64..0000000000 --- a/packages/angular/src/toolkit/table/sterling-table.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './head/sterling-table-head-cell.scss'; -@import './head/sterling-table-head.scss'; diff --git a/packages/angular/src/toolkit/table/sterling-table.stories.ts b/packages/angular/src/toolkit/table/sterling-table.stories.ts deleted file mode 100644 index a63a36a551..0000000000 --- a/packages/angular/src/toolkit/table/sterling-table.stories.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { boolean, select, withKnobs } from '@storybook/addon-knobs'; -import { action } from '@storybook/addon-actions'; -import { moduleMetadata, storiesOf } from '@storybook/angular'; -import { TableHeaderItem, TableItem } from 'carbon-components-angular'; -import { Action } from 'rxjs/internal/scheduler/Action'; - -import { SCTableModel } from './sterling-table-model.class'; -import { SCTableModule } from './sterling-table.module'; - -const simpleModel = new SCTableModel(); - -simpleModel.header = [ - [ - new TableHeaderItem({ - data: 'Name Name Name Name Name Name Name Name Name Name \ - Name Name Name Name Name Name Name Name Name Name Name Name Name Name Name Name Name \ - Name Name Name Name Name Name Name Name Name Name Name Name Name Name Name Name Name \ - Name Name Name Name Name Name Name Name Name Name \ - Name', - rowSpan: 2, - }), - new TableHeaderItem({ data: 'hwer', colSpan: 2, sortable: false }), - null, - ], - [null, new TableHeaderItem({ data: 'hwer1' }), new TableHeaderItem({ data: 'hwer2' })], -]; - -simpleModel.data = [ - [ - new TableItem({ data: 'Name 1' }), - new TableItem({ data: 'qwer' }), - new TableItem({ data: 'qwer1' }), - ], - [new TableItem({ data: 'Name 3' }), new TableItem({ data: 'zwer', colSpan: 2 }), null], - [ - new TableItem({ data: 'Name 2' }), - new TableItem({ data: 'swer' }), - new TableItem({ data: 'swer1' }), - ], - [ - new TableItem({ data: 'Name 4' }), - new TableItem({ data: 'twer' }), - new TableItem({ data: 'twer1' }), - ], -]; - -storiesOf('Sterling Toolkit/Sterling table', module) - .addDecorator( - moduleMetadata({ - imports: [SCTableModule], - }) - ) - .addDecorator(withKnobs) - .add('Basic', () => { - return { - template: ` - - - `, - props: { - model: simpleModel, - size: select('size', { Small: 'sm', Short: 'sh', Normal: 'md', Large: 'lg' }, 'md'), - showSelectionColumn: boolean('showSelectionColumn', true), - striped: boolean('striped', true), - isDataGrid: boolean('Data grid keyboard interactions', true), - skeleton: boolean('Skeleton mode', false), - rowClick: action('row clicked'), - customSort: (index: number) => { - if (simpleModel.getHeader(index).sorted) { - // if already sorted flip sorting direction - simpleModel.getHeader(index).ascending = simpleModel.getHeader(index).descending; - } - simpleModel.sort(index); - }, - }, - }; - }); diff --git a/packages/angular/src/toolkit/utils/component-outlet.directive.ts b/packages/angular/src/toolkit/utils/component-outlet.directive.ts deleted file mode 100644 index e9c4ad7e20..0000000000 --- a/packages/angular/src/toolkit/utils/component-outlet.directive.ts +++ /dev/null @@ -1,107 +0,0 @@ -import { - ComponentFactoryResolver, - ComponentRef, - Directive, - Injector, - Input, - NgModuleFactory, - NgModuleRef, - OnChanges, - OnDestroy, - SimpleChanges, - Type, - ViewContainerRef, -} from '@angular/core'; - -@Directive({ - selector: '[scComponentOutlet], [aiComponentOutlet]', -}) -export class ComponentOutletDirective implements OnChanges, OnDestroy { - @Input() scComponentOutletInputs = new Map(); - - @Input() scComponentOutletOutputs = new Map(); - - // tslint:disable-next-line - // copied from https://github.com/angular/angular/blob/263bbd43c1808f1201bc4b50fe76e8fbba672c51/packages/common/src/directives/ng_component_outlet.ts#L10-L116 - // TODO(issue/24571): remove '!'. - @Input() scComponentOutlet!: Type; - // TODO(issue/24571): remove '!'. - @Input() scComponentOutletInjector!: Injector; - // TODO(issue/24571): remove '!'. - @Input() scComponentOutletContent!: any[][]; - // TODO(issue/24571): remove '!'. - @Input() scComponentOutletNgModuleFactory!: NgModuleFactory; - - private _componentRef: ComponentRef | null = null; - private _moduleRef: NgModuleRef | null = null; - - constructor(private _viewContainerRef: ViewContainerRef) {} - // end copy - - ngOnChanges(changes: SimpleChanges) { - // tslint:disable-next-line - // copied from https://github.com/angular/angular/blob/263bbd43c1808f1201bc4b50fe76e8fbba672c51/packages/common/src/directives/ng_component_outlet.ts#L10-L116 - this._viewContainerRef.clear(); - this._componentRef = null; - - if (this.scComponentOutlet) { - const elInjector = this.scComponentOutletInjector || this._viewContainerRef.parentInjector; - - if (changes['scComponentOutletNgModuleFactory']) { - if (this._moduleRef) { - this._moduleRef.destroy(); - } - - if (this.scComponentOutletNgModuleFactory) { - const parentModule = elInjector.get(NgModuleRef); - this._moduleRef = this.scComponentOutletNgModuleFactory.create(parentModule.injector); - } else { - this._moduleRef = null; - } - } - - const componentFactoryResolver = this._moduleRef - ? this._moduleRef.componentFactoryResolver - : elInjector.get(ComponentFactoryResolver); - - const componentFactory = componentFactoryResolver.resolveComponentFactory( - this.scComponentOutlet - ); - - this._componentRef = this._viewContainerRef.createComponent( - componentFactory, - this._viewContainerRef.length, - elInjector, - this.scComponentOutletContent - ); - } - // end copy - - if (changes.scComponentOutletInputs) { - const inputs: Array<[string, any]> = Array.from(changes.scComponentOutletInputs.currentValue); - for (const [key, value] of inputs) { - this['_componentRef']['instance'][key] = value; - } - } - - if (changes.scComponentOutletOutputs) { - const outputs: Array<[string, any]> = Array.from( - changes.scComponentOutletOutputs.currentValue - ); - for (const [key, value] of outputs) { - this['_componentRef']['instance'][key].subscribe((event) => { - value(event); - }); - } - } - } - - // tslint:disable-next-line - // copied from https://github.com/angular/angular/blob/263bbd43c1808f1201bc4b50fe76e8fbba672c51/packages/common/src/directives/ng_component_outlet.ts#L10-L116 - ngOnDestroy() { - if (this._moduleRef) { - this._moduleRef.destroy(); - } - } - // end copy -} diff --git a/packages/angular/src/toolkit/utils/index.ts b/packages/angular/src/toolkit/utils/index.ts deleted file mode 100644 index 6ac8224713..0000000000 --- a/packages/angular/src/toolkit/utils/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './component-outlet.directive'; -export * from './utils.module'; diff --git a/packages/angular/src/toolkit/utils/utils.module.ts b/packages/angular/src/toolkit/utils/utils.module.ts deleted file mode 100644 index bb93c50107..0000000000 --- a/packages/angular/src/toolkit/utils/utils.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { ComponentOutletDirective } from './component-outlet.directive'; - -@NgModule({ - declarations: [ComponentOutletDirective], - exports: [ComponentOutletDirective], - imports: [CommonModule], -}) -export class UtilsModule {} diff --git a/packages/angular/src/toolkit/vendor/@carbon/colors/LICENSE b/packages/angular/src/toolkit/vendor/@carbon/colors/LICENSE deleted file mode 100644 index 78e09cfabf..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/colors/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "{}" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright 2015 IBM Corp. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/packages/angular/src/toolkit/vendor/@carbon/colors/README.md b/packages/angular/src/toolkit/vendor/@carbon/colors/README.md deleted file mode 100644 index 5369541c97..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/colors/README.md +++ /dev/null @@ -1,154 +0,0 @@ -# @carbon/colors - -> Colors for digital and software products using the Carbon Design System - -## Getting started - -To install `@carbon/colors` in your project, you will need to run the following -command using [npm](https://www.npmjs.com/): - -```bash -npm install -S @carbon/colors -``` - -If you prefer [Yarn](https://yarnpkg.com/en/), use the following command -instead: - -```bash -yarn add @carbon/colors -``` - -## Usage - -You can use the `@carbon/colors` module in your JavaScript, in addition to your -Sass. - -### Sass - -In Sass, you can import the files individual by doing: - -```scss -@import '@carbon/colors/scss/colors'; -``` - -This file automatically includes the `carbon--colors` mixin which initializes -all the color variables for the IBM Design Language. - -These color variables follow the naming convention: `$carbon---`. -For example: - -```scss -$carbon--blue-50; -$carbon--cool-gray-10; -$carbon--black-100; -$carbon--white-0; -``` - -You can also use the shorthand form of these colors by dropping the `carbon--` -namespace: - -```scss -$blue-50; -$cool-gray-10; -$black-100; -$white-0; -``` - -_Note: the shorthand variables require that you do not have any other -conflicting variables in your setup. Namespaced variables are always preferred -for this reason, unless you are confident that no collisions will occur._ - -If you would like you choose when these variables are defined, then you can call -the `carbon--colors` mixin directly by importing the following file: - -```scss -@import '@carbon/colors/scss/mixins'; - -// ... -@include carbon--colors(); -``` - -Alongside the color variables detailed above, we also provide a map of colors so -that you can programmatically use these values. This map is called -`$carbon--colors` and each key is the name of a swatch. The value of these -swatches is also a map, but each key is now the grade. In code, this looks like -the following: - - - -```scss -$carbon--colors: ( - 'blue': ( - 10: #edf4ff, - // ... - ) -); -``` - - - -You can include this variable by including `@carbon/colors/scss/colors` or -calling the `carbon--colors()` mixin directly. - -#### Migrating from previous versions - -If you were originally using a project that had color variables defined as -`$ibm-color__-`, or are relying on `$ibm-color-map`, you can also -use the entrypoint described above to access these colors. They are meant as an -easier way to help adopt these packages. However, these variables will be -removed in the next release of Carbon. - -Similar to previous efforts, we also provide colors in the formats mentioned -above. For example: - -```scss -$ibm-color__blue-50; -$ibm-color__warm-gray-100; -``` - -If you would like a mixin to conditionally include these variables, you can -include the mixin by using: - -```scss -@import '@carbon/colors/scss/mixins'; - -@include ibm--colors(); -``` - -### JavaScript - -For JavaScript, you can import and use this module by doing the following in -your code: - -```js -// ESM -import { black, blue, warmGray } from '@carbon/colors'; - -// CommonJS -const { black, blue, warmGray } = require('@carbon/colors'); -``` - -Each color swatch is exported as a variable, and each color name is also -exported as an object that can be called by specifying grade, for example: - -```js -black; -blue[50]; // Using the `blue` object. -warmGray100; // Using the `warmGray100` variable. -``` - -## 📖 API Documentation - -If you're looking for `@carbon/colors` API documentation, check out: - -- [Sass](./docs/sass.md) - -## 🙌 Contributing - -We're always looking for contributors to help us fix bugs, build new features, -or help us improve the project documentation. If you're interested, definitely -check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀 - -## 📝 License - -Licensed under the [Apache 2.0 License](/LICENSE). diff --git a/packages/angular/src/toolkit/vendor/@carbon/colors/package.json b/packages/angular/src/toolkit/vendor/@carbon/colors/package.json deleted file mode 100644 index fb4d8ad230..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/colors/package.json +++ /dev/null @@ -1,83 +0,0 @@ -{ - "_from": "@carbon/colors@10.8.1", - "_id": "@carbon/colors@10.8.1", - "_inBundle": false, - "_integrity": "sha512-p/dSgmdW18CAy3VA1+GXL6s9W/u9fd+mFVnwepUYg9cCHDKA2t1rpeFP9HZd/96JvTFysjJqBl5HamkRVM03pA==", - "_location": "/@carbon/colors", - "_phantomChildren": {}, - "_requested": { - "type": "version", - "registry": true, - "raw": "@carbon/colors@10.8.1", - "name": "@carbon/colors", - "escapedName": "@carbon%2fcolors", - "scope": "@carbon", - "rawSpec": "10.8.1", - "saveSpec": null, - "fetchSpec": "10.8.1" - }, - "_requiredBy": [ - "#DEV:/", - "/@carbon/themes" - ], - "_resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-10.8.1.tgz", - "_shasum": "6b10d3ecedd145e62f9fe8db2156d4f45b81d99c", - "_spec": "@carbon/colors@10.8.1", - "_where": "/Users/cal/Sites/peretz/fed-resources/toolkit", - "bugs": { - "url": "https://github.com/carbon-design-system/carbon/issues" - }, - "bundleDependencies": false, - "deprecated": false, - "description": "Colors for digital and software products using the Carbon Design System", - "devDependencies": { - "@carbon/bundler": "^10.6.0", - "@carbon/cli-reporter": "^10.3.0", - "@carbon/scss-generator": "^10.6.0", - "@carbon/test-utils": "^10.7.1", - "change-case": "^4.1.1", - "core-js": "^3.0.1", - "fs-extra": "^8.1.0", - "node-sass": "^4.13.1", - "rimraf": "^5.0.5" - }, - "eyeglass": { - "exports": false, - "name": "@carbon/colors", - "sassDir": "scss", - "needs": "^1.3.0" - }, - "files": [ - "es", - "lib", - "scss", - "umd" - ], - "gitHead": "319eca70647f2534a48f65cabf3c569b26b3eb51", - "keywords": [ - "eyeglass-module", - "ibm", - "elements", - "carbon", - "carbon-elements", - "carbon-design-system", - "components", - "react" - ], - "license": "Apache-2.0", - "main": "lib/index.js", - "module": "es/index.js", - "name": "@carbon/colors", - "publishConfig": { - "access": "public" - }, - "repository": { - "type": "git", - "url": "https://github.com/carbon-design-system/carbon/tree/master/packages/colors" - }, - "scripts": { - "build": "yarn clean && bundler bundle src/index.js --name CarbonColors && node tasks/build.js && bundler check \"scss/*.scss\" && bundler sassdoc \"scss/*.scss\"", - "clean": "rimraf css es lib umd scss" - }, - "version": "10.8.1" -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/colors/scss/colors.scss b/packages/angular/src/toolkit/vendor/@carbon/colors/scss/colors.scss deleted file mode 100644 index d84d1424df..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/colors/scss/colors.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Code generated by @carbon/colors. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// -@import './mixins'; -// Deprecated ☠️ -@include ibm--colors(); -// Preferred -@include carbon--colors(); diff --git a/packages/angular/src/toolkit/vendor/@carbon/colors/scss/index.scss b/packages/angular/src/toolkit/vendor/@carbon/colors/scss/index.scss deleted file mode 100644 index d84d1424df..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/colors/scss/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Code generated by @carbon/colors. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// -@import './mixins'; -// Deprecated ☠️ -@include ibm--colors(); -// Preferred -@include carbon--colors(); diff --git a/packages/angular/src/toolkit/vendor/@carbon/colors/scss/mixins.scss b/packages/angular/src/toolkit/vendor/@carbon/colors/scss/mixins.scss deleted file mode 100644 index ea7a4b3685..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/colors/scss/mixins.scss +++ /dev/null @@ -1,651 +0,0 @@ -// Code generated by @carbon/colors. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// -/// Define color variables -/// @access public -/// @group @carbon/colors -/// @deprecated Use `$carbon--colors` going forward -@mixin ibm--colors() { - $ibm-color__black-100: #000000 !default !global; - $ibm-color__blue-10: #edf5ff !default !global; - $ibm-color__blue-20: #d0e2ff !default !global; - $ibm-color__blue-30: #a6c8ff !default !global; - $ibm-color__blue-40: #78a9ff !default !global; - $ibm-color__blue-50: #4589ff !default !global; - $ibm-color__blue-60: #0f62fe !default !global; - $ibm-color__blue-70: #0043ce !default !global; - $ibm-color__blue-80: #002d9c !default !global; - $ibm-color__blue-90: #001d6c !default !global; - $ibm-color__blue-100: #001141 !default !global; - $ibm-color__cool-gray-10: #f2f4f8 !default !global; - $ibm-color__cool-gray-20: #dde1e6 !default !global; - $ibm-color__cool-gray-30: #c1c7cd !default !global; - $ibm-color__cool-gray-40: #a2a9b0 !default !global; - $ibm-color__cool-gray-50: #878d96 !default !global; - $ibm-color__cool-gray-60: #697077 !default !global; - $ibm-color__cool-gray-70: #4d5358 !default !global; - $ibm-color__cool-gray-80: #343a3f !default !global; - $ibm-color__cool-gray-90: #21272a !default !global; - $ibm-color__cool-gray-100: #121619 !default !global; - $ibm-color__cyan-10: #e5f6ff !default !global; - $ibm-color__cyan-20: #bae6ff !default !global; - $ibm-color__cyan-30: #82cfff !default !global; - $ibm-color__cyan-40: #33b1ff !default !global; - $ibm-color__cyan-50: #1192e8 !default !global; - $ibm-color__cyan-60: #0072c3 !default !global; - $ibm-color__cyan-70: #00539a !default !global; - $ibm-color__cyan-80: #003a6d !default !global; - $ibm-color__cyan-90: #012749 !default !global; - $ibm-color__cyan-100: #061727 !default !global; - $ibm-color__gray-10: #f4f4f4 !default !global; - $ibm-color__gray-20: #e0e0e0 !default !global; - $ibm-color__gray-30: #c6c6c6 !default !global; - $ibm-color__gray-40: #a8a8a8 !default !global; - $ibm-color__gray-50: #8d8d8d !default !global; - $ibm-color__gray-60: #6f6f6f !default !global; - $ibm-color__gray-70: #525252 !default !global; - $ibm-color__gray-80: #393939 !default !global; - $ibm-color__gray-90: #262626 !default !global; - $ibm-color__gray-100: #161616 !default !global; - $ibm-color__green-10: #defbe6 !default !global; - $ibm-color__green-20: #a7f0ba !default !global; - $ibm-color__green-30: #6fdc8c !default !global; - $ibm-color__green-40: #42be65 !default !global; - $ibm-color__green-50: #24a148 !default !global; - $ibm-color__green-60: #198038 !default !global; - $ibm-color__green-70: #0e6027 !default !global; - $ibm-color__green-80: #044317 !default !global; - $ibm-color__green-90: #022d0d !default !global; - $ibm-color__green-100: #071908 !default !global; - $ibm-color__magenta-10: #fff0f7 !default !global; - $ibm-color__magenta-20: #ffd6e8 !default !global; - $ibm-color__magenta-30: #ffafd2 !default !global; - $ibm-color__magenta-40: #ff7eb6 !default !global; - $ibm-color__magenta-50: #ee5396 !default !global; - $ibm-color__magenta-60: #d12771 !default !global; - $ibm-color__magenta-70: #9f1853 !default !global; - $ibm-color__magenta-80: #740937 !default !global; - $ibm-color__magenta-90: #510224 !default !global; - $ibm-color__magenta-100: #2a0a18 !default !global; - $ibm-color__orange-40: #ff832b !default !global; - $ibm-color__purple-10: #f6f2ff !default !global; - $ibm-color__purple-20: #e8daff !default !global; - $ibm-color__purple-30: #d4bbff !default !global; - $ibm-color__purple-40: #be95ff !default !global; - $ibm-color__purple-50: #a56eff !default !global; - $ibm-color__purple-60: #8a3ffc !default !global; - $ibm-color__purple-70: #6929c4 !default !global; - $ibm-color__purple-80: #491d8b !default !global; - $ibm-color__purple-90: #31135e !default !global; - $ibm-color__purple-100: #1c0f30 !default !global; - $ibm-color__red-10: #fff1f1 !default !global; - $ibm-color__red-20: #ffd7d9 !default !global; - $ibm-color__red-30: #ffb3b8 !default !global; - $ibm-color__red-40: #ff8389 !default !global; - $ibm-color__red-50: #fa4d56 !default !global; - $ibm-color__red-60: #da1e28 !default !global; - $ibm-color__red-70: #a2191f !default !global; - $ibm-color__red-80: #750e13 !default !global; - $ibm-color__red-90: #520408 !default !global; - $ibm-color__red-100: #2d0709 !default !global; - $ibm-color__teal-10: #d9fbfb !default !global; - $ibm-color__teal-20: #9ef0f0 !default !global; - $ibm-color__teal-30: #3ddbd9 !default !global; - $ibm-color__teal-40: #08bdba !default !global; - $ibm-color__teal-50: #009d9a !default !global; - $ibm-color__teal-60: #007d79 !default !global; - $ibm-color__teal-70: #005d5d !default !global; - $ibm-color__teal-80: #004144 !default !global; - $ibm-color__teal-90: #022b30 !default !global; - $ibm-color__teal-100: #081a1c !default !global; - $ibm-color__warm-gray-10: #f7f3f2 !default !global; - $ibm-color__warm-gray-20: #e5e0df !default !global; - $ibm-color__warm-gray-30: #cac5c4 !default !global; - $ibm-color__warm-gray-40: #ada8a8 !default !global; - $ibm-color__warm-gray-50: #8f8b8b !default !global; - $ibm-color__warm-gray-60: #736f6f !default !global; - $ibm-color__warm-gray-70: #565151 !default !global; - $ibm-color__warm-gray-80: #3c3838 !default !global; - $ibm-color__warm-gray-90: #272525 !default !global; - $ibm-color__warm-gray-100: #171414 !default !global; - $ibm-color__white-0: #ffffff !default !global; - $ibm-color__yellow-20: #fdd13a !default !global; - $ibm-color__yellow-30: #f1c21b !default !global; - $ibm-color-map: ( - 'black': ( - 100: #000000, - ), - 'blue': ( - 10: #edf5ff, - 20: #d0e2ff, - 30: #a6c8ff, - 40: #78a9ff, - 50: #4589ff, - 60: #0f62fe, - 70: #0043ce, - 80: #002d9c, - 90: #001d6c, - 100: #001141, - ), - 'cool-gray': ( - 10: #f2f4f8, - 20: #dde1e6, - 30: #c1c7cd, - 40: #a2a9b0, - 50: #878d96, - 60: #697077, - 70: #4d5358, - 80: #343a3f, - 90: #21272a, - 100: #121619, - ), - 'coolGray': ( - 10: #f2f4f8, - 20: #dde1e6, - 30: #c1c7cd, - 40: #a2a9b0, - 50: #878d96, - 60: #697077, - 70: #4d5358, - 80: #343a3f, - 90: #21272a, - 100: #121619, - ), - 'cyan': ( - 10: #e5f6ff, - 20: #bae6ff, - 30: #82cfff, - 40: #33b1ff, - 50: #1192e8, - 60: #0072c3, - 70: #00539a, - 80: #003a6d, - 90: #012749, - 100: #061727, - ), - 'gray': ( - 10: #f4f4f4, - 20: #e0e0e0, - 30: #c6c6c6, - 40: #a8a8a8, - 50: #8d8d8d, - 60: #6f6f6f, - 70: #525252, - 80: #393939, - 90: #262626, - 100: #161616, - ), - 'green': ( - 10: #defbe6, - 20: #a7f0ba, - 30: #6fdc8c, - 40: #42be65, - 50: #24a148, - 60: #198038, - 70: #0e6027, - 80: #044317, - 90: #022d0d, - 100: #071908, - ), - 'magenta': ( - 10: #fff0f7, - 20: #ffd6e8, - 30: #ffafd2, - 40: #ff7eb6, - 50: #ee5396, - 60: #d12771, - 70: #9f1853, - 80: #740937, - 90: #510224, - 100: #2a0a18, - ), - 'orange': ( - 40: #ff832b, - ), - 'purple': ( - 10: #f6f2ff, - 20: #e8daff, - 30: #d4bbff, - 40: #be95ff, - 50: #a56eff, - 60: #8a3ffc, - 70: #6929c4, - 80: #491d8b, - 90: #31135e, - 100: #1c0f30, - ), - 'red': ( - 10: #fff1f1, - 20: #ffd7d9, - 30: #ffb3b8, - 40: #ff8389, - 50: #fa4d56, - 60: #da1e28, - 70: #a2191f, - 80: #750e13, - 90: #520408, - 100: #2d0709, - ), - 'teal': ( - 10: #d9fbfb, - 20: #9ef0f0, - 30: #3ddbd9, - 40: #08bdba, - 50: #009d9a, - 60: #007d79, - 70: #005d5d, - 80: #004144, - 90: #022b30, - 100: #081a1c, - ), - 'warm-gray': ( - 10: #f7f3f2, - 20: #e5e0df, - 30: #cac5c4, - 40: #ada8a8, - 50: #8f8b8b, - 60: #736f6f, - 70: #565151, - 80: #3c3838, - 90: #272525, - 100: #171414, - ), - 'warmGray': ( - 10: #f7f3f2, - 20: #e5e0df, - 30: #cac5c4, - 40: #ada8a8, - 50: #8f8b8b, - 60: #736f6f, - 70: #565151, - 80: #3c3838, - 90: #272525, - 100: #171414, - ), - 'white': ( - 0: #ffffff, - ), - 'yellow': ( - 20: #fdd13a, - 30: #f1c21b, - ), - ) !default !global; -} -/// Define color variables -/// @access public -/// @group @carbon/colors -@mixin carbon--colors() { - $carbon--black-100: #000000 !default !global; - $carbon--blue-10: #edf5ff !default !global; - $carbon--blue-20: #d0e2ff !default !global; - $carbon--blue-30: #a6c8ff !default !global; - $carbon--blue-40: #78a9ff !default !global; - $carbon--blue-50: #4589ff !default !global; - $carbon--blue-60: #0f62fe !default !global; - $carbon--blue-70: #0043ce !default !global; - $carbon--blue-80: #002d9c !default !global; - $carbon--blue-90: #001d6c !default !global; - $carbon--blue-100: #001141 !default !global; - $carbon--cool-gray-10: #f2f4f8 !default !global; - $carbon--cool-gray-20: #dde1e6 !default !global; - $carbon--cool-gray-30: #c1c7cd !default !global; - $carbon--cool-gray-40: #a2a9b0 !default !global; - $carbon--cool-gray-50: #878d96 !default !global; - $carbon--cool-gray-60: #697077 !default !global; - $carbon--cool-gray-70: #4d5358 !default !global; - $carbon--cool-gray-80: #343a3f !default !global; - $carbon--cool-gray-90: #21272a !default !global; - $carbon--cool-gray-100: #121619 !default !global; - $carbon--cyan-10: #e5f6ff !default !global; - $carbon--cyan-20: #bae6ff !default !global; - $carbon--cyan-30: #82cfff !default !global; - $carbon--cyan-40: #33b1ff !default !global; - $carbon--cyan-50: #1192e8 !default !global; - $carbon--cyan-60: #0072c3 !default !global; - $carbon--cyan-70: #00539a !default !global; - $carbon--cyan-80: #003a6d !default !global; - $carbon--cyan-90: #012749 !default !global; - $carbon--cyan-100: #061727 !default !global; - $carbon--gray-10: #f4f4f4 !default !global; - $carbon--gray-20: #e0e0e0 !default !global; - $carbon--gray-30: #c6c6c6 !default !global; - $carbon--gray-40: #a8a8a8 !default !global; - $carbon--gray-50: #8d8d8d !default !global; - $carbon--gray-60: #6f6f6f !default !global; - $carbon--gray-70: #525252 !default !global; - $carbon--gray-80: #393939 !default !global; - $carbon--gray-90: #262626 !default !global; - $carbon--gray-100: #161616 !default !global; - $carbon--green-10: #defbe6 !default !global; - $carbon--green-20: #a7f0ba !default !global; - $carbon--green-30: #6fdc8c !default !global; - $carbon--green-40: #42be65 !default !global; - $carbon--green-50: #24a148 !default !global; - $carbon--green-60: #198038 !default !global; - $carbon--green-70: #0e6027 !default !global; - $carbon--green-80: #044317 !default !global; - $carbon--green-90: #022d0d !default !global; - $carbon--green-100: #071908 !default !global; - $carbon--magenta-10: #fff0f7 !default !global; - $carbon--magenta-20: #ffd6e8 !default !global; - $carbon--magenta-30: #ffafd2 !default !global; - $carbon--magenta-40: #ff7eb6 !default !global; - $carbon--magenta-50: #ee5396 !default !global; - $carbon--magenta-60: #d12771 !default !global; - $carbon--magenta-70: #9f1853 !default !global; - $carbon--magenta-80: #740937 !default !global; - $carbon--magenta-90: #510224 !default !global; - $carbon--magenta-100: #2a0a18 !default !global; - $carbon--orange-40: #ff832b !default !global; - $carbon--purple-10: #f6f2ff !default !global; - $carbon--purple-20: #e8daff !default !global; - $carbon--purple-30: #d4bbff !default !global; - $carbon--purple-40: #be95ff !default !global; - $carbon--purple-50: #a56eff !default !global; - $carbon--purple-60: #8a3ffc !default !global; - $carbon--purple-70: #6929c4 !default !global; - $carbon--purple-80: #491d8b !default !global; - $carbon--purple-90: #31135e !default !global; - $carbon--purple-100: #1c0f30 !default !global; - $carbon--red-10: #fff1f1 !default !global; - $carbon--red-20: #ffd7d9 !default !global; - $carbon--red-30: #ffb3b8 !default !global; - $carbon--red-40: #ff8389 !default !global; - $carbon--red-50: #fa4d56 !default !global; - $carbon--red-60: #da1e28 !default !global; - $carbon--red-70: #a2191f !default !global; - $carbon--red-80: #750e13 !default !global; - $carbon--red-90: #520408 !default !global; - $carbon--red-100: #2d0709 !default !global; - $carbon--teal-10: #d9fbfb !default !global; - $carbon--teal-20: #9ef0f0 !default !global; - $carbon--teal-30: #3ddbd9 !default !global; - $carbon--teal-40: #08bdba !default !global; - $carbon--teal-50: #009d9a !default !global; - $carbon--teal-60: #007d79 !default !global; - $carbon--teal-70: #005d5d !default !global; - $carbon--teal-80: #004144 !default !global; - $carbon--teal-90: #022b30 !default !global; - $carbon--teal-100: #081a1c !default !global; - $carbon--warm-gray-10: #f7f3f2 !default !global; - $carbon--warm-gray-20: #e5e0df !default !global; - $carbon--warm-gray-30: #cac5c4 !default !global; - $carbon--warm-gray-40: #ada8a8 !default !global; - $carbon--warm-gray-50: #8f8b8b !default !global; - $carbon--warm-gray-60: #736f6f !default !global; - $carbon--warm-gray-70: #565151 !default !global; - $carbon--warm-gray-80: #3c3838 !default !global; - $carbon--warm-gray-90: #272525 !default !global; - $carbon--warm-gray-100: #171414 !default !global; - $carbon--white-0: #ffffff !default !global; - $carbon--yellow-20: #fdd13a !default !global; - $carbon--yellow-30: #f1c21b !default !global; - $black-100: #000000 !default !global; - $blue-10: #edf5ff !default !global; - $blue-20: #d0e2ff !default !global; - $blue-30: #a6c8ff !default !global; - $blue-40: #78a9ff !default !global; - $blue-50: #4589ff !default !global; - $blue-60: #0f62fe !default !global; - $blue-70: #0043ce !default !global; - $blue-80: #002d9c !default !global; - $blue-90: #001d6c !default !global; - $blue-100: #001141 !default !global; - $cool-gray-10: #f2f4f8 !default !global; - $cool-gray-20: #dde1e6 !default !global; - $cool-gray-30: #c1c7cd !default !global; - $cool-gray-40: #a2a9b0 !default !global; - $cool-gray-50: #878d96 !default !global; - $cool-gray-60: #697077 !default !global; - $cool-gray-70: #4d5358 !default !global; - $cool-gray-80: #343a3f !default !global; - $cool-gray-90: #21272a !default !global; - $cool-gray-100: #121619 !default !global; - $cyan-10: #e5f6ff !default !global; - $cyan-20: #bae6ff !default !global; - $cyan-30: #82cfff !default !global; - $cyan-40: #33b1ff !default !global; - $cyan-50: #1192e8 !default !global; - $cyan-60: #0072c3 !default !global; - $cyan-70: #00539a !default !global; - $cyan-80: #003a6d !default !global; - $cyan-90: #012749 !default !global; - $cyan-100: #061727 !default !global; - $gray-10: #f4f4f4 !default !global; - $gray-20: #e0e0e0 !default !global; - $gray-30: #c6c6c6 !default !global; - $gray-40: #a8a8a8 !default !global; - $gray-50: #8d8d8d !default !global; - $gray-60: #6f6f6f !default !global; - $gray-70: #525252 !default !global; - $gray-80: #393939 !default !global; - $gray-90: #262626 !default !global; - $gray-100: #161616 !default !global; - $green-10: #defbe6 !default !global; - $green-20: #a7f0ba !default !global; - $green-30: #6fdc8c !default !global; - $green-40: #42be65 !default !global; - $green-50: #24a148 !default !global; - $green-60: #198038 !default !global; - $green-70: #0e6027 !default !global; - $green-80: #044317 !default !global; - $green-90: #022d0d !default !global; - $green-100: #071908 !default !global; - $magenta-10: #fff0f7 !default !global; - $magenta-20: #ffd6e8 !default !global; - $magenta-30: #ffafd2 !default !global; - $magenta-40: #ff7eb6 !default !global; - $magenta-50: #ee5396 !default !global; - $magenta-60: #d12771 !default !global; - $magenta-70: #9f1853 !default !global; - $magenta-80: #740937 !default !global; - $magenta-90: #510224 !default !global; - $magenta-100: #2a0a18 !default !global; - $orange-40: #ff832b !default !global; - $purple-10: #f6f2ff !default !global; - $purple-20: #e8daff !default !global; - $purple-30: #d4bbff !default !global; - $purple-40: #be95ff !default !global; - $purple-50: #a56eff !default !global; - $purple-60: #8a3ffc !default !global; - $purple-70: #6929c4 !default !global; - $purple-80: #491d8b !default !global; - $purple-90: #31135e !default !global; - $purple-100: #1c0f30 !default !global; - $red-10: #fff1f1 !default !global; - $red-20: #ffd7d9 !default !global; - $red-30: #ffb3b8 !default !global; - $red-40: #ff8389 !default !global; - $red-50: #fa4d56 !default !global; - $red-60: #da1e28 !default !global; - $red-70: #a2191f !default !global; - $red-80: #750e13 !default !global; - $red-90: #520408 !default !global; - $red-100: #2d0709 !default !global; - $teal-10: #d9fbfb !default !global; - $teal-20: #9ef0f0 !default !global; - $teal-30: #3ddbd9 !default !global; - $teal-40: #08bdba !default !global; - $teal-50: #009d9a !default !global; - $teal-60: #007d79 !default !global; - $teal-70: #005d5d !default !global; - $teal-80: #004144 !default !global; - $teal-90: #022b30 !default !global; - $teal-100: #081a1c !default !global; - $warm-gray-10: #f7f3f2 !default !global; - $warm-gray-20: #e5e0df !default !global; - $warm-gray-30: #cac5c4 !default !global; - $warm-gray-40: #ada8a8 !default !global; - $warm-gray-50: #8f8b8b !default !global; - $warm-gray-60: #736f6f !default !global; - $warm-gray-70: #565151 !default !global; - $warm-gray-80: #3c3838 !default !global; - $warm-gray-90: #272525 !default !global; - $warm-gray-100: #171414 !default !global; - $white-0: #ffffff !default !global; - $yellow-20: #fdd13a !default !global; - $yellow-30: #f1c21b !default !global; - $carbon--colors: ( - 'black': ( - 100: #000000, - ), - 'blue': ( - 10: #edf5ff, - 20: #d0e2ff, - 30: #a6c8ff, - 40: #78a9ff, - 50: #4589ff, - 60: #0f62fe, - 70: #0043ce, - 80: #002d9c, - 90: #001d6c, - 100: #001141, - ), - 'cool-gray': ( - 10: #f2f4f8, - 20: #dde1e6, - 30: #c1c7cd, - 40: #a2a9b0, - 50: #878d96, - 60: #697077, - 70: #4d5358, - 80: #343a3f, - 90: #21272a, - 100: #121619, - ), - 'coolGray': ( - 10: #f2f4f8, - 20: #dde1e6, - 30: #c1c7cd, - 40: #a2a9b0, - 50: #878d96, - 60: #697077, - 70: #4d5358, - 80: #343a3f, - 90: #21272a, - 100: #121619, - ), - 'cyan': ( - 10: #e5f6ff, - 20: #bae6ff, - 30: #82cfff, - 40: #33b1ff, - 50: #1192e8, - 60: #0072c3, - 70: #00539a, - 80: #003a6d, - 90: #012749, - 100: #061727, - ), - 'gray': ( - 10: #f4f4f4, - 20: #e0e0e0, - 30: #c6c6c6, - 40: #a8a8a8, - 50: #8d8d8d, - 60: #6f6f6f, - 70: #525252, - 80: #393939, - 90: #262626, - 100: #161616, - ), - 'green': ( - 10: #defbe6, - 20: #a7f0ba, - 30: #6fdc8c, - 40: #42be65, - 50: #24a148, - 60: #198038, - 70: #0e6027, - 80: #044317, - 90: #022d0d, - 100: #071908, - ), - 'magenta': ( - 10: #fff0f7, - 20: #ffd6e8, - 30: #ffafd2, - 40: #ff7eb6, - 50: #ee5396, - 60: #d12771, - 70: #9f1853, - 80: #740937, - 90: #510224, - 100: #2a0a18, - ), - 'orange': ( - 40: #ff832b, - ), - 'purple': ( - 10: #f6f2ff, - 20: #e8daff, - 30: #d4bbff, - 40: #be95ff, - 50: #a56eff, - 60: #8a3ffc, - 70: #6929c4, - 80: #491d8b, - 90: #31135e, - 100: #1c0f30, - ), - 'red': ( - 10: #fff1f1, - 20: #ffd7d9, - 30: #ffb3b8, - 40: #ff8389, - 50: #fa4d56, - 60: #da1e28, - 70: #a2191f, - 80: #750e13, - 90: #520408, - 100: #2d0709, - ), - 'teal': ( - 10: #d9fbfb, - 20: #9ef0f0, - 30: #3ddbd9, - 40: #08bdba, - 50: #009d9a, - 60: #007d79, - 70: #005d5d, - 80: #004144, - 90: #022b30, - 100: #081a1c, - ), - 'warm-gray': ( - 10: #f7f3f2, - 20: #e5e0df, - 30: #cac5c4, - 40: #ada8a8, - 50: #8f8b8b, - 60: #736f6f, - 70: #565151, - 80: #3c3838, - 90: #272525, - 100: #171414, - ), - 'warmGray': ( - 10: #f7f3f2, - 20: #e5e0df, - 30: #cac5c4, - 40: #ada8a8, - 50: #8f8b8b, - 60: #736f6f, - 70: #565151, - 80: #3c3838, - 90: #272525, - 100: #171414, - ), - 'white': ( - 0: #ffffff, - ), - 'yellow': ( - 20: #fdd13a, - 30: #f1c21b, - ), - ) !default !global; -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/LICENSE b/packages/angular/src/toolkit/vendor/@carbon/layout/LICENSE deleted file mode 100644 index 78e09cfabf..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "{}" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright 2015 IBM Corp. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/README.md b/packages/angular/src/toolkit/vendor/@carbon/layout/README.md deleted file mode 100644 index f1d32e9ac1..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/README.md +++ /dev/null @@ -1,58 +0,0 @@ -# @carbon/layout - -> Layout helpers for digital and software products using the Carbon Design -> System - -## Getting started - -To install `@carbon/layout` in your project, you will need to run the following -command using [npm](https://www.npmjs.com/): - -```bash -npm install -S @carbon/layout -``` - -If you prefer [Yarn](https://yarnpkg.com/en/), use the following command -instead: - -```bash -yarn add @carbon/layout -``` - -## Usage - -`@carbon/layout` provides a couple of useful utilities alongside the -specification for the grid system for the IBM Design Language. This package -includes: - -| Feature | Description | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| Breakpoints | Variables and settings for the IBM Design Grid, including gutter and breakpoints. It also includes helpers for working with breakpoints | -| Unit conversion | Helpers for converting from `px` to `rem` or `em`. | -| Key heights | Helpers for working with key heights at different breakpoints | -| Mini unit | Helpers for working in multiples of the mini-unit | -| Spacing | Provides a spacing scale and helper for using steps in the scale | - -One important thing to remember is that `@carbon/layout` is not responsible for -the grid itself. If you are looking for a grid implementation to use, definitely -checkout the [`@carbon/grid`](../grid) package. - -`@carbon/layout` provides the above features in both Sass and JavaScript. If -you're looking for support in a different language, feel free to file an issue -proposing the new addition! - -## 📖 API Documentation - -If you're looking for `@carbon/layout` API documentation, check out: - -- [Sass](./docs/sass.md) - -## 🙌 Contributing - -We're always looking for contributors to help us fix bugs, build new features, -or help us improve the project documentation. If you're interested, definitely -check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀 - -## 📝 License - -Licensed under the [Apache 2.0 License](/LICENSE). diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/package.json b/packages/angular/src/toolkit/vendor/@carbon/layout/package.json deleted file mode 100644 index c19fd93e28..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/package.json +++ /dev/null @@ -1,74 +0,0 @@ -{ - "_from": "@carbon/layout@10.8.2", - "_id": "@carbon/layout@10.8.2", - "_inBundle": false, - "_integrity": "sha512-ak78dHILgmWGgRZfIWhCRQRrP/tfJWY1iIjnlq2+cfD18gMUCtR0F8TSZLGTrH3h7jxQzLj0LoaRLe1u6o1iyA==", - "_location": "/@carbon/layout", - "_phantomChildren": {}, - "_requested": { - "type": "version", - "registry": true, - "raw": "@carbon/layout@10.8.2", - "name": "@carbon/layout", - "escapedName": "@carbon%2flayout", - "scope": "@carbon", - "rawSpec": "10.8.2", - "saveSpec": null, - "fetchSpec": "10.8.2" - }, - "_requiredBy": [ - "#DEV:/", - "/@carbon/themes" - ], - "_resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-10.8.2.tgz", - "_shasum": "7a2c781892dc062f3d6913291be7cfd8b210d266", - "_spec": "@carbon/layout@10.8.2", - "_where": "/Users/cal/Sites/peretz/fed-resources/toolkit", - "bugs": { - "url": "https://github.com/carbon-design-system/carbon/issues" - }, - "bundleDependencies": false, - "deprecated": false, - "description": "Layout helpers for digital and software products using the Carbon Design System", - "devDependencies": { - "@carbon/bundler": "^10.6.0", - "@carbon/cli-reporter": "^10.3.0", - "@carbon/scss-generator": "^10.6.0", - "@carbon/test-utils": "^10.7.1", - "core-js": "^3.4.0", - "rimraf": "^5.0.5" - }, - "eyeglass": { - "exports": false, - "name": "@carbon/layout", - "sassDir": "scss", - "needs": "^1.3.0" - }, - "gitHead": "319eca70647f2534a48f65cabf3c569b26b3eb51", - "keywords": [ - "eyeglass-module", - "ibm", - "elements", - "carbon", - "carbon-elements", - "carbon-design-system", - "components", - "react" - ], - "license": "Apache-2.0", - "main": "lib/index.js", - "module": "es/index.js", - "name": "@carbon/layout", - "publishConfig": { - "access": "public" - }, - "repository": { - "type": "git", - "url": "https://github.com/carbon-design-system/carbon/tree/master/packages/layout" - }, - "scripts": { - "build": "yarn clean && bundler bundle src/index.js --name CarbonLayout && node tasks/build.js && bundler sassdoc \"scss/**/*.scss\"", - "clean": "rimraf es lib umd scss/generated" - }, - "version": "10.8.2" -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_breakpoint.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_breakpoint.scss deleted file mode 100644 index 206054abaf..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_breakpoint.scss +++ /dev/null @@ -1,224 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss -@import 'convert'; -@import 'utilities'; - -/// Carbon gutter size in rem -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--grid-gutter: carbon--rem(32px); - -/// Carbon condensed gutter size in rem -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--grid-gutter--condensed: carbon--rem(2px); - -// Initial map of our breakpoints and their values -/// @type Map -/// @access public -/// @group @carbon/layout -$carbon--grid-breakpoints: ( - sm: ( - columns: 4, - margin: 0, - width: carbon--rem(320px), - ), - md: ( - columns: 8, - margin: carbon--rem(16px), - width: carbon--rem(672px), - ), - lg: ( - columns: 16, - margin: carbon--rem(16px), - width: carbon--rem(1056px), - ), - xlg: ( - columns: 16, - margin: carbon--rem(16px), - width: carbon--rem(1312px), - ), - max: ( - columns: 16, - margin: carbon--rem(24px), - width: carbon--rem(1584px), - ), -) !default; - -/// Get the value of the next breakpoint, or null for the last breakpoint -/// @param {String} $name - The name of the brekapoint -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint -/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map -/// @return {String} -/// @access public -/// @group @carbon/layout -@function carbon--breakpoint-next( - $name, - $breakpoints: $carbon--grid-breakpoints, - $breakpoint-names: map-keys($breakpoints) -) { - $n: index($breakpoint-names, $name); - @if $n != null and $n < length($breakpoint-names) { - @return nth($breakpoint-names, $n + 1); - } - @return null; -} - -/// Get the value of the previous breakpoint, or null for the first breakpoint -/// @param {String} $name - The name of the brekapoint -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint -/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map -/// @return {String} -/// @access public -/// @group @carbon/layout -@function carbon--breakpoint-prev( - $name, - $breakpoints: $carbon--grid-breakpoints, - $breakpoint-names: map-keys($breakpoints) -) { - $n: index($breakpoint-names, $name); - @if $n != null and $n > 1 { - @return nth($breakpoint-names, $n - 1); - } - @return null; -} - -/// Check to see if the given breakpoint name -/// @param {String} $name - The name of the brekapoint -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint -/// @return {Bool} -/// @access public -/// @group @carbon/layout -@function carbon--is-smallest-breakpoint($name, $breakpoints: $carbon--grid-breakpoints) { - @return index(map-keys($breakpoints), $name) == 1; -} - -/// Returns the largest breakpoint name -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name -/// @return {String} -/// @access public -/// @group @carbon/layout -@function carbon--largest-breakpoint-name($breakpoints: $carbon--grid-breakpoints) { - $total-breakpoints: length($breakpoints); - @return carbon--key-by-index($breakpoints, $total-breakpoints); -} - -/// Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: `.prefix--col-sm-2`. -/// @param {String} $name - The name of the breakpoint -/// @return {String} -/// @access public -/// @group @carbon/layout -@function carbon--breakpoint-infix($name) { - @return '-#{$name}'; -} - -/// Generate a media query up to the width of the given breakpoint name -/// @param {String | Number} $name -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) { - @if type-of($name) == 'number' { - @media (min-width: $name) { - @content; - } - } @else if map-has-key($breakpoints, $name) { - $breakpoint: map-get($breakpoints, $name); - $width: map-get($breakpoint, width); - @if carbon--is-smallest-breakpoint($name, $breakpoints) { - @content; - } @else { - @media (min-width: $width) { - @content; - } - } - } @else { - @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; - } -} - -/// Generate a media query for the maximum width of the given styles -/// @param {String | Number} $name -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) { - @if type-of($name) == 'number' { - @media (max-width: $name) { - @content; - } - } @else if map-has-key($breakpoints, $name) { - $breakpoint: map-get($breakpoints, $name); - $width: map-get($breakpoint, width); - @media (max-width: $width) { - @content; - } - } @else { - @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; - } -} - -/// Generate a media query for the range between the lower and upper breakpoints -/// @param {String | Number} $lower -/// @param {String | Number} $upper -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin carbon--breakpoint-between($lower, $upper, $breakpoints: $carbon--grid-breakpoints) { - $is-number-lower: type-of($lower) == 'number'; - $is-number-upper: type-of($upper) == 'number'; - $min: if($is-number-lower, $lower, map-get($breakpoints, $lower)); - $max: if($is-number-upper, $upper, map-get($breakpoints, $upper)); - - @if $min and $max { - $min-width: if(not $is-number-lower and $min, map-get($min, width), $min); - $max-width: if(not $is-number-upper and $max, map-get($max, width), $max); - @media (min-width: $min-width) and (max-width: $max-width) { - @content; - } - } @else if $min != null and $max == null { - @include carbon--breakpoint-up($lower) { - @content; - } - } @else if $min == null and $max != null { - @include carbon--breakpoint-down($upper) { - @content; - } - } @else { - @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).'; - } -} - -/// Generate media query for the largest breakpoint -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { - @include carbon--breakpoint(carbon--largest-breakpoint-name()) { - @content; - } -} - -/// Generate a media query for a given breakpoint -/// @param {String | Number} $name -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) { - @include carbon--breakpoint-up($name, $breakpoints) { - @content; - } -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_convert.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_convert.scss deleted file mode 100644 index c83dfd823a..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_convert.scss +++ /dev/null @@ -1,40 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -/// Default font size -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--base-font-size: 16px !default; - -/// Convert a given px unit to a rem unit -/// @param {Number} $px - Number with px unit -/// @return {Number} Number with rem unit -/// @access public -/// @group @carbon/layout -@function carbon--rem($px) { - @if unit($px) != 'px' { - // TODO: update to @error in v11 - @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; - } - - @return ($px / $carbon--base-font-size) * 1rem; -} - -/// Convert a given px unit to a em unit -/// @param {Number} $px - Number with px unit -/// @return {Number} Number with em unit -/// @access public -/// @group @carbon/layout -@function carbon--em($px) { - @if unit($px) != 'px' { - // TODO: update to @error in v11 - @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; - } - - @return ($px / $carbon--base-font-size) * 1em; -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_key-height.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_key-height.scss deleted file mode 100644 index eee32de96d..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_key-height.scss +++ /dev/null @@ -1,94 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import 'breakpoint'; -@import 'utilities'; - -/// Get the column width for a given breakpoint -/// @param {String} $breakpoint -/// @param {Map} $breakpoints [$carbon--grid-breakpoints] -/// @return {Number} In rem -/// @access public -/// @group @carbon/layout -@function carbon--get-column-width($breakpoint, $breakpoints: $carbon--grid-breakpoints) { - @if map-has-key($breakpoints, $breakpoint) { - $values: map-get($breakpoints, $breakpoint); - $width: map-get($values, width); - $margin: map-get($values, margin); - $columns: map-get($values, columns); - - @return ($width - (2 * $margin)) / $columns; - } @else { - @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; - } -} - -/// @type Map -/// @access public -/// @group @carbon/layout -$carbon--key-height-scales: ( - sm: ( - carbon--get-column-width(sm), - carbon--get-column-width(sm) * 2, - carbon--get-column-width(sm) * 3, - carbon--get-column-width(sm) * 4, - carbon--get-column-width(sm) * 5, - carbon--get-column-width(sm) * 6, - ), - md: ( - carbon--get-column-width(md), - carbon--get-column-width(md) * 2, - carbon--get-column-width(md) * 3, - carbon--get-column-width(md) * 4, - carbon--get-column-width(md) * 5, - carbon--get-column-width(md) * 6, - ), - lg: ( - carbon--get-column-width(lg), - carbon--get-column-width(lg) * 2, - carbon--get-column-width(lg) * 3, - carbon--get-column-width(lg) * 4, - carbon--get-column-width(lg) * 5, - carbon--get-column-width(lg) * 6, - carbon--get-column-width(lg) * 7, - carbon--get-column-width(lg) * 8, - ), - xlg: ( - carbon--get-column-width(xlg), - carbon--get-column-width(xlg) * 2, - carbon--get-column-width(xlg) * 3, - carbon--get-column-width(xlg) * 4, - carbon--get-column-width(xlg) * 5, - carbon--get-column-width(xlg) * 6, - carbon--get-column-width(xlg) * 7, - carbon--get-column-width(xlg) * 8, - ), - max: ( - carbon--get-column-width(max), - carbon--get-column-width(max) * 2, - carbon--get-column-width(max) * 3, - carbon--get-column-width(max) * 4, - carbon--get-column-width(max) * 5, - carbon--get-column-width(max) * 6, - carbon--get-column-width(max) * 7, - carbon--get-column-width(max) * 8, - ), -); - -/// Get the value of a key height step at a given breakpoint -/// @param {String} $breakpoint -/// @param {Number} $step -/// @return {Number} In rem -/// @access public -/// @group @carbon/layout -@function carbon--key-height($breakpoint, $step) { - @if map-has-key($carbon--key-height-scales, $breakpoint) { - @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); - } @else { - @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; - } -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_mini-unit.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_mini-unit.scss deleted file mode 100644 index f25e7fc55d..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_mini-unit.scss +++ /dev/null @@ -1,23 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import 'convert'; - -/// Default mini-unit value -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--mini-unit-size: 8px !default; - -/// Get the value of the corresponding number of units -/// @param {Number} $count - The number of units to get the value for -/// @return {Number} In rem units -/// @access public -/// @group @carbon/layout -@function carbon--mini-units($count) { - @return carbon--rem($carbon--mini-unit-size * $count); -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_spacing.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_spacing.scss deleted file mode 100644 index ae11fb9e45..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_spacing.scss +++ /dev/null @@ -1,12 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import './generated/spacing'; -@import './generated/layout'; -@import './generated/fluid-spacing'; -@import './generated/container'; -@import './generated/icon-size'; diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_utilities.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_utilities.scss deleted file mode 100644 index 084048bcc1..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/_utilities.scss +++ /dev/null @@ -1,41 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -/// Map deep get -/// @author Hugo Giraudel -/// @access public -/// @param {Map} $map - Map -/// @param {Arglist} $keys - Key chain -/// @return {*} Desired value -/// @group @carbon/layout -@function map-deep-get($map, $keys...) { - @each $key in $keys { - $map: map-get($map, $key); - } - @return $map; -} - -/// Provide a map and index, and get back the relevant key value -/// @access public -/// @param {Map} $map - Map -/// @param {Integer} $index - Key chain -/// @return {String} Desired value -/// @group @carbon/layout -@function carbon--key-by-index($map, $index) { - $keys: map-keys($map); - @return nth($keys, $index); -} - -/// Pass in a map, and get the last one in the list back -/// @access public -/// @param {Map} $map - Map -/// @return {*} Desired value -/// @group @carbon/layout -@function last-map-item($map) { - $total-length: length($map); - @return map-get($map, carbon--key-by-index($map, $total-length)); -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_container.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_container.scss deleted file mode 100644 index b37e68b37a..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_container.scss +++ /dev/null @@ -1,73 +0,0 @@ -// Code generated by @carbon/layout. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2019 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--container-01: 1.5rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--container-02: 2rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--container-03: 2.5rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--container-04: 3rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--container-05: 4rem !default; - -/// @type List -/// @access public -/// @group @carbon/layout -$carbon--container: ( - $carbon--container-01, - $carbon--container-02, - $carbon--container-03, - $carbon--container-04, - $carbon--container-05 -); - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--container-01 -$container-01: $carbon--container-01 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--container-02 -$container-02: $carbon--container-02 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--container-03 -$container-03: $carbon--container-03 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--container-04 -$container-04: $carbon--container-04 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--container-05 -$container-05: $carbon--container-05 !default; diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_fluid-spacing.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_fluid-spacing.scss deleted file mode 100644 index 335562555f..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_fluid-spacing.scss +++ /dev/null @@ -1,61 +0,0 @@ -// Code generated by @carbon/layout. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2019 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--fluid-spacing-01: 0 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--fluid-spacing-02: 2vw !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--fluid-spacing-03: 5vw !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--fluid-spacing-04: 10vw !default; - -/// @type List -/// @access public -/// @group @carbon/layout -$carbon--fluid-spacing: ( - $carbon--fluid-spacing-01, - $carbon--fluid-spacing-02, - $carbon--fluid-spacing-03, - $carbon--fluid-spacing-04 -); - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--fluid-spacing-01 -$fluid-spacing-01: $carbon--fluid-spacing-01 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--fluid-spacing-02 -$fluid-spacing-02: $carbon--fluid-spacing-02 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--fluid-spacing-03 -$fluid-spacing-03: $carbon--fluid-spacing-03 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--fluid-spacing-04 -$fluid-spacing-04: $carbon--fluid-spacing-04 !default; diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_icon-size.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_icon-size.scss deleted file mode 100644 index a3537a1185..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_icon-size.scss +++ /dev/null @@ -1,34 +0,0 @@ -// Code generated by @carbon/layout. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2019 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--icon-size-01: 1rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--icon-size-02: 1.25rem !default; - -/// @type List -/// @access public -/// @group @carbon/layout -$carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02); - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--icon-size-01 -$icon-size-01: $carbon--icon-size-01 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--icon-size-02 -$icon-size-02: $carbon--icon-size-02 !default; diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_layout.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_layout.scss deleted file mode 100644 index 941169aa33..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_layout.scss +++ /dev/null @@ -1,97 +0,0 @@ -// Code generated by @carbon/layout. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2019 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--layout-01: 1rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--layout-02: 1.5rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--layout-03: 2rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--layout-04: 3rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--layout-05: 4rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--layout-06: 6rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--layout-07: 10rem !default; - -/// @type List -/// @access public -/// @group @carbon/layout -$carbon--layout: ( - $carbon--layout-01, - $carbon--layout-02, - $carbon--layout-03, - $carbon--layout-04, - $carbon--layout-05, - $carbon--layout-06, - $carbon--layout-07 -); - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--layout-01 -$layout-01: $carbon--layout-01 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--layout-02 -$layout-02: $carbon--layout-02 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--layout-03 -$layout-03: $carbon--layout-03 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--layout-04 -$layout-04: $carbon--layout-04 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--layout-05 -$layout-05: $carbon--layout-05 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--layout-06 -$layout-06: $carbon--layout-06 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--layout-07 -$layout-07: $carbon--layout-07 !default; diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_spacing.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_spacing.scss deleted file mode 100644 index 83b475d0aa..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/generated/_spacing.scss +++ /dev/null @@ -1,157 +0,0 @@ -// Code generated by @carbon/layout. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2019 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-01: 0.125rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-02: 0.25rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-03: 0.5rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-04: 0.75rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-05: 1rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-06: 1.5rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-07: 2rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-08: 2.5rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-09: 3rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-10: 4rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-11: 5rem !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -$carbon--spacing-12: 6rem !default; - -/// @type List -/// @access public -/// @group @carbon/layout -$carbon--spacing: ( - $carbon--spacing-01, - $carbon--spacing-02, - $carbon--spacing-03, - $carbon--spacing-04, - $carbon--spacing-05, - $carbon--spacing-06, - $carbon--spacing-07, - $carbon--spacing-08, - $carbon--spacing-09, - $carbon--spacing-10, - $carbon--spacing-11, - $carbon--spacing-12 -); - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-01 -$spacing-01: $carbon--spacing-01 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-02 -$spacing-02: $carbon--spacing-02 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-03 -$spacing-03: $carbon--spacing-03 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-04 -$spacing-04: $carbon--spacing-04 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-05 -$spacing-05: $carbon--spacing-05 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-06 -$spacing-06: $carbon--spacing-06 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-07 -$spacing-07: $carbon--spacing-07 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-08 -$spacing-08: $carbon--spacing-08 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-09 -$spacing-09: $carbon--spacing-09 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-10 -$spacing-10: $carbon--spacing-10 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-11 -$spacing-11: $carbon--spacing-11 !default; - -/// @type Number -/// @access public -/// @group @carbon/layout -/// @alias carbon--spacing-12 -$spacing-12: $carbon--spacing-12 !default; diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/index.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/index.scss deleted file mode 100644 index 7c7fe0aca3..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/index.scss +++ /dev/null @@ -1,8 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import 'layout'; diff --git a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/layout.scss b/packages/angular/src/toolkit/vendor/@carbon/layout/scss/layout.scss deleted file mode 100644 index acc1f1e8f7..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/layout/scss/layout.scss +++ /dev/null @@ -1,12 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import 'convert'; -@import 'breakpoint'; -@import 'mini-unit'; -@import 'spacing'; -@import 'key-height'; diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/LICENSE b/packages/angular/src/toolkit/vendor/@carbon/themes/LICENSE deleted file mode 100644 index 78e09cfabf..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "{}" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright 2015 IBM Corp. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/README.md b/packages/angular/src/toolkit/vendor/@carbon/themes/README.md deleted file mode 100644 index 5a5f9ffd56..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/README.md +++ /dev/null @@ -1,125 +0,0 @@ -# @carbon/themes - -> Themes for applying color in the Carbon Design System - -## Getting started - -To install `@carbon/themes` in your project, you will need to run the following -command using [npm](https://www.npmjs.com/): - -```bash -npm install -S @carbon/themes -``` - -If you prefer [Yarn](https://yarnpkg.com/en/), use the following command -instead: - -```bash -yarn add @carbon/themes -``` - -## Usage - -You can use `@carbon/themes` in JavaScript or Sass by including this package in -your project. By default, `@carbon/themes` provides a set of color tokens that -are pre-defined for a specific theme. Currently, we offer the following color -themes: white, gray 10, gray 90, gray 100 . - -You can preview all of the token values for this on the -[Carbon Design System website](https://www.carbondesignsystem.com/guidelines/color/usage) -. - -### Sass - -If you're project is using Sass, you can include this package and the -corresponding default theme by writing the following in your Sass file: - -```scss -@import '@carbon/themes/scss/themes'; -``` - -By default, the white theme will be initialized. If you would like to include -another theme, you can do so by calling our mixin. For example: - -```scss -@import '@carbon/themes/scss/themes'; - -// Use the gray 10 theme -@include carbon--theme($carbon--theme--g10); - -// Use the gray 90 theme -@include carbon--theme($carbon--theme--g90); - -// Use the gray 100 theme -@include carbon--theme($carbon--theme--g100); -``` - -Alternatively, you can set the global theme variable then call the mixin without -passing in a theme name. - -```scss -@import '@carbon/themes/scss/themes'; - -$carbon--theme: $carbon--theme--g10; - -// Use the gray 10 theme -@include carbon--theme(); -``` - -Inline theming can be done by using the mixin. For example: - -```scss -@import '@carbon/themes/scss/themes'; - -// Use the default white theme here - -.my-dark-theme { - @include carbon--theme($carbon--theme--g90) { - // Use the dark theme here - } -} - -.my-darker-theme { - @include carbon--theme($carbon--theme--g100) { - // Use the darker theme here - } -} -``` - -### JavaScript - -If you're looking to use these themes in JavaScript, we export a variety of -bindings for you to use, including: - -```js -import { - // An object of all themes - themes, - - // Direct theme values - white, - g10, - g90, - g100, - - // Specific token values - interactive01, - interactive02, -} from '@carbon/themes'; -``` - -## 📖 API Documentation - -If you're looking for `@carbon/themes` API documentation, check out: - -- [Sass](./docs/sass.md) - -## 🙌 Contributing - -We're always looking for contributors to help us fix bugs, build new features, -or help us improve the project documentation. If you're interested, definitely -check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀 - -## 📝 License - -Licensed under the [Apache 2.0 License](/LICENSE). diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/metadata.yml b/packages/angular/src/toolkit/vendor/@carbon/themes/metadata.yml deleted file mode 100644 index 0dda81b7aa..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/metadata.yml +++ /dev/null @@ -1,214 +0,0 @@ -tokens: - - name: interactive01 - role: - - Primary interactive color - - Primary buttons - - name: interactive02 - role: - - Secondary interactive color - - Secondary button - - name: interactive03 - role: - - 4.5:1 AA contrast - - Tertiary button - - name: interactive04 - role: - - 3:1 AA contrast - - Selected elements - - Active elements - - Accent icons - - name: uiBackground - role: - - Default page background - - name: ui01 - role: - - Primary container background - - Secondary page background - - name: ui02 - role: - - Primary page background - - Secondary container background - - name: ui03 - role: - - Subtle border - - Tertiary background color - - name: ui04 - role: - - 3:1 AA element contrast - - Medium contrast border - - name: ui05 - role: - - 4.5:1 AA element contrast - - High contrast border - - Emphasis elements - - name: text01 - role: - - Primary text - - Body copy - - Headers - - Hover text color for text02 - - name: text02 - role: - - Secondary text - - Input labels - - Help text - - name: text03 - role: - - Placeholder text - - name: text04 - role: - - Text on interactive colors - - name: icon01 - role: - - Primary icons - - name: icon02 - role: - - Secondary icons - - name: icon03 - role: - - Tertiary icons - - Icons on interactive colors - - Icons on non-ui colors - - name: link01 - role: - - Primary links - - Ghost button - - name: field01 - role: - - Default input fields - - Field color on $ui-backgrounds - - name: field02 - role: - - Input field color on ui02 backgrounds - - - name: inverse01 - role: - - Inverse text color - - Inverse icon color - - name: inverse02 - role: - - High contrast backgrounds - - High contrast elements - - name: support01 - role: - - Error - - name: support02 - role: - - Success - - name: support03 - role: - - Warning - - name: support04 - role: - - Information - - name: inverseSupport01 - role: - - Error on high contrast backgrounds - - name: inverseSupport02 - role: - - Success on high contrast backgrounds - - name: inverseSupport03 - role: - - Warning on high contrast backgrounds - - name: inverseSupport04 - role: - - Information on high contrast backgrounds - - name: overlay01 - role: - - Background overlay - - name: focus - role: - - Focus border - - Focus underline - - name: hoverPrimary - role: - - interactive01 hover - - name: activePrimary - role: - - interactive01 active - - name: hoverPrimaryText - role: - - interactive01 text hover - - name: hoverSecondary - role: - - interactive02 hover - - name: activeSecondary - role: - - interactive02 active - - inverse01 active - - name: hoverTertiary - role: - - interactive03 hover - - inverse01 hover - - name: activeTertiary - role: - - interactive03 active - - name: hoverUI - role: - - ui01 hover - - ui02 hover - - Transparent background hover - - name: activeUI - role: - - ui01 active - - ui02 active - - name: selectedUI - role: - - Selected UI elements - - name: hoverSelectedUI - role: - - Data table selected row hover - - name: hoverDanger - role: - - Danger hover - - support01 hover - - name: activeDanger - role: - - Danger active - - support01 active - - name: hoverRow - role: - - Row hover - - name: visitedLink - role: - - Visited links - - name: disabled01 - role: - - Disabled fields - - Disabled backgrounds - - Disabled border - - name: disabled02 - role: - - Disabled elements on disabled01 - - Disabled label - - Disabled text on disabled01 - - Disabled icons - - Disabled border - - name: disabled03 - role: - - Disabled text on disabled02 - - Disabled icons on disabled02 - - name: highlight - role: - - interactive01 high light - - name: skeleton01 - role: - - Skeleton state of graphics - - name: skeleton02 - role: - - Skeleton state of text - - name: brand01 - alias: interactive01 - deprecated: true - - name: brand02 - alias: interactive02 - deprecated: true - - name: brand03 - alias: interactive03 - deprecated: true - - name: active01 - alias: activeUI - deprecated: true - - name: hoverField - alias: hoverUI - deprecated: true diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/package.json b/packages/angular/src/toolkit/vendor/@carbon/themes/package.json deleted file mode 100644 index 00fd8c3931..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/package.json +++ /dev/null @@ -1,75 +0,0 @@ -{ - "_from": "@carbon/themes@10.10.3", - "_id": "@carbon/themes@10.10.3", - "_inBundle": false, - "_integrity": "sha512-46i8WL1GWP80PWRvldYC9iNRxVdWX1CT6pVgCx2rNxLuqkCYmn/yEQ7mrkxD/4A4PvpCY1KVlRnSBzeviwSNHg==", - "_location": "/@carbon/themes", - "_phantomChildren": {}, - "_requested": { - "type": "version", - "registry": true, - "raw": "@carbon/themes@10.10.3", - "name": "@carbon/themes", - "escapedName": "@carbon%2fthemes", - "scope": "@carbon", - "rawSpec": "10.10.3", - "saveSpec": null, - "fetchSpec": "10.10.3" - }, - "_requiredBy": [ - "#DEV:/" - ], - "_resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-10.10.3.tgz", - "_shasum": "1bf09122306587edbbf2a855346e8ac383176022", - "_spec": "@carbon/themes@10.10.3", - "_where": "/Users/cal/Sites/peretz/fed-resources/toolkit", - "bugs": { - "url": "https://github.com/carbon-design-system/carbon/issues" - }, - "bundleDependencies": false, - "dependencies": { - "@carbon/colors": "^10.8.1", - "@carbon/layout": "^10.8.2", - "@carbon/type": "^10.9.3", - "color": "^3.1.2" - }, - "deprecated": false, - "description": "Themes for applying color in the Carbon Design System", - "devDependencies": { - "@carbon/cli-reporter": "^10.3.0", - "@carbon/scss-generator": "^10.6.0", - "@carbon/test-utils": "^10.7.1", - "change-case": "^4.1.1", - "core-js": "^3.0.1", - "fs-extra": "^8.1.0", - "js-yaml": "^3.13.0", - "node-sass": "^4.13.1", - "rimraf": "^5.0.5" - }, - "gitHead": "10963409141c46b204e83fd5ba7672ce49d66fe7", - "keywords": [ - "ibm", - "elements", - "carbon", - "carbon-elements", - "carbon-design-system", - "components", - "react" - ], - "license": "Apache-2.0", - "main": "lib/index.js", - "module": "es/index.js", - "name": "@carbon/themes", - "publishConfig": { - "access": "public" - }, - "repository": { - "type": "git", - "url": "https://github.com/carbon-design-system/carbon/tree/master/packages/themes" - }, - "scripts": { - "build": "yarn clean && bundler bundle src/index.js --name CarbonThemes && node tasks/build.js && bundler check \"scss/*.scss\" && bundler sassdoc \"scss/**/*.scss\"", - "clean": "rimraf es lib umd scss/generated" - }, - "version": "10.10.3" -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/_mixins.scss b/packages/angular/src/toolkit/vendor/@carbon/themes/scss/_mixins.scss deleted file mode 100644 index 1a482daef0..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/_mixins.scss +++ /dev/null @@ -1,39 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -/// @access private -/// @group @carbon/themes -$custom-property-prefix: 'cds' !default; - -/// @access private -/// @group @carbon/themes -@mixin custom-property($name, $value, $prefix: $custom-property-prefix) { - @if type-of($value) == map { - @each $property, $property-value in $value { - // Only support one-level of depth for values that are maps. This is to - // avoid bringing properties like `breakpoints` on type tokens - @if type-of($property-value) != map { - @include custom-property('#{$name}-#{$property}', $property-value); - } - } - } @else { - --#{$prefix}-#{$name}: #{$value}; - } -} - -/// @access private -/// @group @carbon/themes -@function should-emit($theme-a, $theme-b, $token, $emit-difference) { - @if $emit-difference == false { - @return true; - } - @return map-get($theme-a, $token) != map-get($theme-b, $token); -} - -// We import mixins last so that these methods are made available to the -// carbon--theme mixin -@import './generated/mixins'; diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/_theme-maps.scss b/packages/angular/src/toolkit/vendor/@carbon/themes/scss/_theme-maps.scss deleted file mode 100644 index dd8c574ee6..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/_theme-maps.scss +++ /dev/null @@ -1,9 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import './generated/tokens'; -@import './generated/themes'; diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/_tokens.scss b/packages/angular/src/toolkit/vendor/@carbon/themes/scss/_tokens.scss deleted file mode 100644 index 0d6a099bfa..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/_tokens.scss +++ /dev/null @@ -1,8 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import './generated/tokens'; diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/generated/_mixins.scss b/packages/angular/src/toolkit/vendor/@carbon/themes/scss/generated/_mixins.scss deleted file mode 100644 index e137dd5fd7..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/generated/_mixins.scss +++ /dev/null @@ -1,1028 +0,0 @@ -// Code generated by @carbon/themes. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2019 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import './themes'; - -/// Define theme variables from a map of tokens -/// @access public -/// @param {Map} $theme [$carbon--theme] - Map of theme tokens -/// @param {Bool} $emit-custom-properties [false] - Output CSS Custom Properties for theme tokens -/// @content Pass in your custom declaration blocks to be used after the token maps set theming variables. -/// -/// @example scss -/// // Default usage -/// @include carbon--theme(); -/// -/// // Alternate styling (not white theme) -/// @include carbon--theme($carbon--theme--g90) { -/// // declarations... -/// } -/// -/// // Inline styling -/// @include carbon--theme($carbon--theme--g90) { -/// .my-dark-theme { -/// // declarations... -/// } -/// } -/// -/// @group @carbon/themes -@mixin carbon--theme( - $theme: $carbon--theme, - $emit-custom-properties: false, - $emit-difference: false -) { - $interactive-01: map-get($theme, 'interactive-01') !global; - $interactive-02: map-get($theme, 'interactive-02') !global; - $interactive-03: map-get($theme, 'interactive-03') !global; - $interactive-04: map-get($theme, 'interactive-04') !global; - $ui-background: map-get($theme, 'ui-background') !global; - $ui-01: map-get($theme, 'ui-01') !global; - $ui-02: map-get($theme, 'ui-02') !global; - $ui-03: map-get($theme, 'ui-03') !global; - $ui-04: map-get($theme, 'ui-04') !global; - $ui-05: map-get($theme, 'ui-05') !global; - $text-01: map-get($theme, 'text-01') !global; - $text-02: map-get($theme, 'text-02') !global; - $text-03: map-get($theme, 'text-03') !global; - $text-04: map-get($theme, 'text-04') !global; - $text-05: map-get($theme, 'text-05') !global; - $text-error: map-get($theme, 'text-error') !global; - $icon-01: map-get($theme, 'icon-01') !global; - $icon-02: map-get($theme, 'icon-02') !global; - $icon-03: map-get($theme, 'icon-03') !global; - $link-01: map-get($theme, 'link-01') !global; - $inverse-link: map-get($theme, 'inverse-link') !global; - $field-01: map-get($theme, 'field-01') !global; - $field-02: map-get($theme, 'field-02') !global; - $inverse-01: map-get($theme, 'inverse-01') !global; - $inverse-02: map-get($theme, 'inverse-02') !global; - $support-01: map-get($theme, 'support-01') !global; - $support-02: map-get($theme, 'support-02') !global; - $support-03: map-get($theme, 'support-03') !global; - $support-04: map-get($theme, 'support-04') !global; - $inverse-support-01: map-get($theme, 'inverse-support-01') !global; - $inverse-support-02: map-get($theme, 'inverse-support-02') !global; - $inverse-support-03: map-get($theme, 'inverse-support-03') !global; - $inverse-support-04: map-get($theme, 'inverse-support-04') !global; - $overlay-01: map-get($theme, 'overlay-01') !global; - $danger: map-get($theme, 'danger') !global; - $focus: map-get($theme, 'focus') !global; - $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global; - $hover-primary: map-get($theme, 'hover-primary') !global; - $active-primary: map-get($theme, 'active-primary') !global; - $hover-primary-text: map-get($theme, 'hover-primary-text') !global; - $hover-secondary: map-get($theme, 'hover-secondary') !global; - $active-secondary: map-get($theme, 'active-secondary') !global; - $hover-tertiary: map-get($theme, 'hover-tertiary') !global; - $active-tertiary: map-get($theme, 'active-tertiary') !global; - $hover-ui: map-get($theme, 'hover-ui') !global; - $active-ui: map-get($theme, 'active-ui') !global; - $selected-ui: map-get($theme, 'selected-ui') !global; - $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global; - $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global; - $hover-danger: map-get($theme, 'hover-danger') !global; - $active-danger: map-get($theme, 'active-danger') !global; - $hover-row: map-get($theme, 'hover-row') !global; - $visited-link: map-get($theme, 'visited-link') !global; - $disabled-01: map-get($theme, 'disabled-01') !global; - $disabled-02: map-get($theme, 'disabled-02') !global; - $disabled-03: map-get($theme, 'disabled-03') !global; - $highlight: map-get($theme, 'highlight') !global; - $skeleton-01: map-get($theme, 'skeleton-01') !global; - $skeleton-02: map-get($theme, 'skeleton-02') !global; - $brand-01: map-get($theme, 'brand-01') !global; - $brand-02: map-get($theme, 'brand-02') !global; - $brand-03: map-get($theme, 'brand-03') !global; - $active-01: map-get($theme, 'active-01') !global; - $hover-field: map-get($theme, 'hover-field') !global; - $caption-01: map-get($theme, 'caption-01') !global; - $label-01: map-get($theme, 'label-01') !global; - $helper-text-01: map-get($theme, 'helper-text-01') !global; - $body-short-01: map-get($theme, 'body-short-01') !global; - $body-long-01: map-get($theme, 'body-long-01') !global; - $body-short-02: map-get($theme, 'body-short-02') !global; - $body-long-02: map-get($theme, 'body-long-02') !global; - $code-01: map-get($theme, 'code-01') !global; - $code-02: map-get($theme, 'code-02') !global; - $heading-01: map-get($theme, 'heading-01') !global; - $productive-heading-01: map-get($theme, 'productive-heading-01') !global; - $heading-02: map-get($theme, 'heading-02') !global; - $productive-heading-02: map-get($theme, 'productive-heading-02') !global; - $productive-heading-03: map-get($theme, 'productive-heading-03') !global; - $productive-heading-04: map-get($theme, 'productive-heading-04') !global; - $productive-heading-05: map-get($theme, 'productive-heading-05') !global; - $productive-heading-06: map-get($theme, 'productive-heading-06') !global; - $productive-heading-07: map-get($theme, 'productive-heading-07') !global; - $expressive-heading-01: map-get($theme, 'expressive-heading-01') !global; - $expressive-heading-02: map-get($theme, 'expressive-heading-02') !global; - $expressive-heading-03: map-get($theme, 'expressive-heading-03') !global; - $expressive-heading-04: map-get($theme, 'expressive-heading-04') !global; - $expressive-heading-05: map-get($theme, 'expressive-heading-05') !global; - $expressive-heading-06: map-get($theme, 'expressive-heading-06') !global; - $expressive-paragraph-01: map-get($theme, 'expressive-paragraph-01') !global; - $quotation-01: map-get($theme, 'quotation-01') !global; - $quotation-02: map-get($theme, 'quotation-02') !global; - $display-01: map-get($theme, 'display-01') !global; - $display-02: map-get($theme, 'display-02') !global; - $display-03: map-get($theme, 'display-03') !global; - $display-04: map-get($theme, 'display-04') !global; - $spacing-01: map-get($theme, 'spacing-01') !global; - $spacing-02: map-get($theme, 'spacing-02') !global; - $spacing-03: map-get($theme, 'spacing-03') !global; - $spacing-04: map-get($theme, 'spacing-04') !global; - $spacing-05: map-get($theme, 'spacing-05') !global; - $spacing-06: map-get($theme, 'spacing-06') !global; - $spacing-07: map-get($theme, 'spacing-07') !global; - $spacing-08: map-get($theme, 'spacing-08') !global; - $spacing-09: map-get($theme, 'spacing-09') !global; - $spacing-10: map-get($theme, 'spacing-10') !global; - $spacing-11: map-get($theme, 'spacing-11') !global; - $spacing-12: map-get($theme, 'spacing-12') !global; - $fluid-spacing-01: map-get($theme, 'fluid-spacing-01') !global; - $fluid-spacing-02: map-get($theme, 'fluid-spacing-02') !global; - $fluid-spacing-03: map-get($theme, 'fluid-spacing-03') !global; - $fluid-spacing-04: map-get($theme, 'fluid-spacing-04') !global; - $layout-01: map-get($theme, 'layout-01') !global; - $layout-02: map-get($theme, 'layout-02') !global; - $layout-03: map-get($theme, 'layout-03') !global; - $layout-04: map-get($theme, 'layout-04') !global; - $layout-05: map-get($theme, 'layout-05') !global; - $layout-06: map-get($theme, 'layout-06') !global; - $layout-07: map-get($theme, 'layout-07') !global; - $container-01: map-get($theme, 'container-01') !global; - $container-02: map-get($theme, 'container-02') !global; - $container-03: map-get($theme, 'container-03') !global; - $container-04: map-get($theme, 'container-04') !global; - $container-05: map-get($theme, 'container-05') !global; - $icon-size-01: map-get($theme, 'icon-size-01') !global; - $icon-size-02: map-get($theme, 'icon-size-02') !global; - - @if global-variable-exists('feature-flags') and - map-get($feature-flags, 'enable-css-custom-properties') - { - $interactive-01: var( - --#{$custom-property-prefix}-interactive-01, - map-get($theme, 'interactive-01') - ) !global; - $interactive-02: var( - --#{$custom-property-prefix}-interactive-02, - map-get($theme, 'interactive-02') - ) !global; - $interactive-03: var( - --#{$custom-property-prefix}-interactive-03, - map-get($theme, 'interactive-03') - ) !global; - $interactive-04: var( - --#{$custom-property-prefix}-interactive-04, - map-get($theme, 'interactive-04') - ) !global; - $ui-background: var( - --#{$custom-property-prefix}-ui-background, - map-get($theme, 'ui-background') - ) !global; - $ui-01: var(--#{$custom-property-prefix}-ui-01, map-get($theme, 'ui-01')) !global; - $ui-02: var(--#{$custom-property-prefix}-ui-02, map-get($theme, 'ui-02')) !global; - $ui-03: var(--#{$custom-property-prefix}-ui-03, map-get($theme, 'ui-03')) !global; - $ui-04: var(--#{$custom-property-prefix}-ui-04, map-get($theme, 'ui-04')) !global; - $ui-05: var(--#{$custom-property-prefix}-ui-05, map-get($theme, 'ui-05')) !global; - $text-01: var(--#{$custom-property-prefix}-text-01, map-get($theme, 'text-01')) !global; - $text-02: var(--#{$custom-property-prefix}-text-02, map-get($theme, 'text-02')) !global; - $text-03: var(--#{$custom-property-prefix}-text-03, map-get($theme, 'text-03')) !global; - $text-04: var(--#{$custom-property-prefix}-text-04, map-get($theme, 'text-04')) !global; - $text-05: var(--#{$custom-property-prefix}-text-05, map-get($theme, 'text-05')) !global; - $text-error: var( - --#{$custom-property-prefix}-text-error, - map-get($theme, 'text-error') - ) !global; - $icon-01: var(--#{$custom-property-prefix}-icon-01, map-get($theme, 'icon-01')) !global; - $icon-02: var(--#{$custom-property-prefix}-icon-02, map-get($theme, 'icon-02')) !global; - $icon-03: var(--#{$custom-property-prefix}-icon-03, map-get($theme, 'icon-03')) !global; - $link-01: var(--#{$custom-property-prefix}-link-01, map-get($theme, 'link-01')) !global; - $inverse-link: var( - --#{$custom-property-prefix}-inverse-link, - map-get($theme, 'inverse-link') - ) !global; - $field-01: var(--#{$custom-property-prefix}-field-01, map-get($theme, 'field-01')) !global; - $field-02: var(--#{$custom-property-prefix}-field-02, map-get($theme, 'field-02')) !global; - $inverse-01: var( - --#{$custom-property-prefix}-inverse-01, - map-get($theme, 'inverse-01') - ) !global; - $inverse-02: var( - --#{$custom-property-prefix}-inverse-02, - map-get($theme, 'inverse-02') - ) !global; - $support-01: var( - --#{$custom-property-prefix}-support-01, - map-get($theme, 'support-01') - ) !global; - $support-02: var( - --#{$custom-property-prefix}-support-02, - map-get($theme, 'support-02') - ) !global; - $support-03: var( - --#{$custom-property-prefix}-support-03, - map-get($theme, 'support-03') - ) !global; - $support-04: var( - --#{$custom-property-prefix}-support-04, - map-get($theme, 'support-04') - ) !global; - $inverse-support-01: var( - --#{$custom-property-prefix}-inverse-support-01, - map-get($theme, 'inverse-support-01') - ) !global; - $inverse-support-02: var( - --#{$custom-property-prefix}-inverse-support-02, - map-get($theme, 'inverse-support-02') - ) !global; - $inverse-support-03: var( - --#{$custom-property-prefix}-inverse-support-03, - map-get($theme, 'inverse-support-03') - ) !global; - $inverse-support-04: var( - --#{$custom-property-prefix}-inverse-support-04, - map-get($theme, 'inverse-support-04') - ) !global; - $overlay-01: var( - --#{$custom-property-prefix}-overlay-01, - map-get($theme, 'overlay-01') - ) !global; - $danger: var(--#{$custom-property-prefix}-danger, map-get($theme, 'danger')) !global; - $focus: var(--#{$custom-property-prefix}-focus, map-get($theme, 'focus')) !global; - $inverse-focus-ui: var( - --#{$custom-property-prefix}-inverse-focus-ui, - map-get($theme, 'inverse-focus-ui') - ) !global; - $hover-primary: var( - --#{$custom-property-prefix}-hover-primary, - map-get($theme, 'hover-primary') - ) !global; - $active-primary: var( - --#{$custom-property-prefix}-active-primary, - map-get($theme, 'active-primary') - ) !global; - $hover-primary-text: var( - --#{$custom-property-prefix}-hover-primary-text, - map-get($theme, 'hover-primary-text') - ) !global; - $hover-secondary: var( - --#{$custom-property-prefix}-hover-secondary, - map-get($theme, 'hover-secondary') - ) !global; - $active-secondary: var( - --#{$custom-property-prefix}-active-secondary, - map-get($theme, 'active-secondary') - ) !global; - $hover-tertiary: var( - --#{$custom-property-prefix}-hover-tertiary, - map-get($theme, 'hover-tertiary') - ) !global; - $active-tertiary: var( - --#{$custom-property-prefix}-active-tertiary, - map-get($theme, 'active-tertiary') - ) !global; - $hover-ui: var(--#{$custom-property-prefix}-hover-ui, map-get($theme, 'hover-ui')) !global; - $active-ui: var( - --#{$custom-property-prefix}-active-ui, - map-get($theme, 'active-ui') - ) !global; - $selected-ui: var( - --#{$custom-property-prefix}-selected-ui, - map-get($theme, 'selected-ui') - ) !global; - $hover-selected-ui: var( - --#{$custom-property-prefix}-hover-selected-ui, - map-get($theme, 'hover-selected-ui') - ) !global; - $inverse-hover-ui: var( - --#{$custom-property-prefix}-inverse-hover-ui, - map-get($theme, 'inverse-hover-ui') - ) !global; - $hover-danger: var( - --#{$custom-property-prefix}-hover-danger, - map-get($theme, 'hover-danger') - ) !global; - $active-danger: var( - --#{$custom-property-prefix}-active-danger, - map-get($theme, 'active-danger') - ) !global; - $hover-row: var( - --#{$custom-property-prefix}-hover-row, - map-get($theme, 'hover-row') - ) !global; - $visited-link: var( - --#{$custom-property-prefix}-visited-link, - map-get($theme, 'visited-link') - ) !global; - $disabled-01: var( - --#{$custom-property-prefix}-disabled-01, - map-get($theme, 'disabled-01') - ) !global; - $disabled-02: var( - --#{$custom-property-prefix}-disabled-02, - map-get($theme, 'disabled-02') - ) !global; - $disabled-03: var( - --#{$custom-property-prefix}-disabled-03, - map-get($theme, 'disabled-03') - ) !global; - $highlight: var( - --#{$custom-property-prefix}-highlight, - map-get($theme, 'highlight') - ) !global; - $skeleton-01: var( - --#{$custom-property-prefix}-skeleton-01, - map-get($theme, 'skeleton-01') - ) !global; - $skeleton-02: var( - --#{$custom-property-prefix}-skeleton-02, - map-get($theme, 'skeleton-02') - ) !global; - $brand-01: var(--#{$custom-property-prefix}-brand-01, map-get($theme, 'brand-01')) !global; - $brand-02: var(--#{$custom-property-prefix}-brand-02, map-get($theme, 'brand-02')) !global; - $brand-03: var(--#{$custom-property-prefix}-brand-03, map-get($theme, 'brand-03')) !global; - $active-01: var( - --#{$custom-property-prefix}-active-01, - map-get($theme, 'active-01') - ) !global; - $hover-field: var( - --#{$custom-property-prefix}-hover-field, - map-get($theme, 'hover-field') - ) !global; - $spacing-01: var( - --#{$custom-property-prefix}-spacing-01, - map-get($theme, 'spacing-01') - ) !global; - $spacing-02: var( - --#{$custom-property-prefix}-spacing-02, - map-get($theme, 'spacing-02') - ) !global; - $spacing-03: var( - --#{$custom-property-prefix}-spacing-03, - map-get($theme, 'spacing-03') - ) !global; - $spacing-04: var( - --#{$custom-property-prefix}-spacing-04, - map-get($theme, 'spacing-04') - ) !global; - $spacing-05: var( - --#{$custom-property-prefix}-spacing-05, - map-get($theme, 'spacing-05') - ) !global; - $spacing-06: var( - --#{$custom-property-prefix}-spacing-06, - map-get($theme, 'spacing-06') - ) !global; - $spacing-07: var( - --#{$custom-property-prefix}-spacing-07, - map-get($theme, 'spacing-07') - ) !global; - $spacing-08: var( - --#{$custom-property-prefix}-spacing-08, - map-get($theme, 'spacing-08') - ) !global; - $spacing-09: var( - --#{$custom-property-prefix}-spacing-09, - map-get($theme, 'spacing-09') - ) !global; - $spacing-10: var( - --#{$custom-property-prefix}-spacing-10, - map-get($theme, 'spacing-10') - ) !global; - $spacing-11: var( - --#{$custom-property-prefix}-spacing-11, - map-get($theme, 'spacing-11') - ) !global; - $spacing-12: var( - --#{$custom-property-prefix}-spacing-12, - map-get($theme, 'spacing-12') - ) !global; - $fluid-spacing-01: var( - --#{$custom-property-prefix}-fluid-spacing-01, - map-get($theme, 'fluid-spacing-01') - ) !global; - $fluid-spacing-02: var( - --#{$custom-property-prefix}-fluid-spacing-02, - map-get($theme, 'fluid-spacing-02') - ) !global; - $fluid-spacing-03: var( - --#{$custom-property-prefix}-fluid-spacing-03, - map-get($theme, 'fluid-spacing-03') - ) !global; - $fluid-spacing-04: var( - --#{$custom-property-prefix}-fluid-spacing-04, - map-get($theme, 'fluid-spacing-04') - ) !global; - $layout-01: var( - --#{$custom-property-prefix}-layout-01, - map-get($theme, 'layout-01') - ) !global; - $layout-02: var( - --#{$custom-property-prefix}-layout-02, - map-get($theme, 'layout-02') - ) !global; - $layout-03: var( - --#{$custom-property-prefix}-layout-03, - map-get($theme, 'layout-03') - ) !global; - $layout-04: var( - --#{$custom-property-prefix}-layout-04, - map-get($theme, 'layout-04') - ) !global; - $layout-05: var( - --#{$custom-property-prefix}-layout-05, - map-get($theme, 'layout-05') - ) !global; - $layout-06: var( - --#{$custom-property-prefix}-layout-06, - map-get($theme, 'layout-06') - ) !global; - $layout-07: var( - --#{$custom-property-prefix}-layout-07, - map-get($theme, 'layout-07') - ) !global; - $container-01: var( - --#{$custom-property-prefix}-container-01, - map-get($theme, 'container-01') - ) !global; - $container-02: var( - --#{$custom-property-prefix}-container-02, - map-get($theme, 'container-02') - ) !global; - $container-03: var( - --#{$custom-property-prefix}-container-03, - map-get($theme, 'container-03') - ) !global; - $container-04: var( - --#{$custom-property-prefix}-container-04, - map-get($theme, 'container-04') - ) !global; - $container-05: var( - --#{$custom-property-prefix}-container-05, - map-get($theme, 'container-05') - ) !global; - $icon-size-01: var( - --#{$custom-property-prefix}-icon-size-01, - map-get($theme, 'icon-size-01') - ) !global; - $icon-size-02: var( - --#{$custom-property-prefix}-icon-size-02, - map-get($theme, 'icon-size-02') - ) !global; - } - @if $emit-custom-properties == true { - @if should-emit($theme, $carbon--theme, 'interactive-01', $emit-difference) { - @include custom-property('interactive-01', map-get($theme, 'interactive-01')); - } - - @if should-emit($theme, $carbon--theme, 'interactive-02', $emit-difference) { - @include custom-property('interactive-02', map-get($theme, 'interactive-02')); - } - - @if should-emit($theme, $carbon--theme, 'interactive-03', $emit-difference) { - @include custom-property('interactive-03', map-get($theme, 'interactive-03')); - } - - @if should-emit($theme, $carbon--theme, 'interactive-04', $emit-difference) { - @include custom-property('interactive-04', map-get($theme, 'interactive-04')); - } - - @if should-emit($theme, $carbon--theme, 'ui-background', $emit-difference) { - @include custom-property('ui-background', map-get($theme, 'ui-background')); - } - - @if should-emit($theme, $carbon--theme, 'ui-01', $emit-difference) { - @include custom-property('ui-01', map-get($theme, 'ui-01')); - } - - @if should-emit($theme, $carbon--theme, 'ui-02', $emit-difference) { - @include custom-property('ui-02', map-get($theme, 'ui-02')); - } - - @if should-emit($theme, $carbon--theme, 'ui-03', $emit-difference) { - @include custom-property('ui-03', map-get($theme, 'ui-03')); - } - - @if should-emit($theme, $carbon--theme, 'ui-04', $emit-difference) { - @include custom-property('ui-04', map-get($theme, 'ui-04')); - } - - @if should-emit($theme, $carbon--theme, 'ui-05', $emit-difference) { - @include custom-property('ui-05', map-get($theme, 'ui-05')); - } - - @if should-emit($theme, $carbon--theme, 'text-01', $emit-difference) { - @include custom-property('text-01', map-get($theme, 'text-01')); - } - - @if should-emit($theme, $carbon--theme, 'text-02', $emit-difference) { - @include custom-property('text-02', map-get($theme, 'text-02')); - } - - @if should-emit($theme, $carbon--theme, 'text-03', $emit-difference) { - @include custom-property('text-03', map-get($theme, 'text-03')); - } - - @if should-emit($theme, $carbon--theme, 'text-04', $emit-difference) { - @include custom-property('text-04', map-get($theme, 'text-04')); - } - - @if should-emit($theme, $carbon--theme, 'text-05', $emit-difference) { - @include custom-property('text-05', map-get($theme, 'text-05')); - } - - @if should-emit($theme, $carbon--theme, 'text-error', $emit-difference) { - @include custom-property('text-error', map-get($theme, 'text-error')); - } - - @if should-emit($theme, $carbon--theme, 'icon-01', $emit-difference) { - @include custom-property('icon-01', map-get($theme, 'icon-01')); - } - - @if should-emit($theme, $carbon--theme, 'icon-02', $emit-difference) { - @include custom-property('icon-02', map-get($theme, 'icon-02')); - } - - @if should-emit($theme, $carbon--theme, 'icon-03', $emit-difference) { - @include custom-property('icon-03', map-get($theme, 'icon-03')); - } - - @if should-emit($theme, $carbon--theme, 'link-01', $emit-difference) { - @include custom-property('link-01', map-get($theme, 'link-01')); - } - - @if should-emit($theme, $carbon--theme, 'inverse-link', $emit-difference) { - @include custom-property('inverse-link', map-get($theme, 'inverse-link')); - } - - @if should-emit($theme, $carbon--theme, 'field-01', $emit-difference) { - @include custom-property('field-01', map-get($theme, 'field-01')); - } - - @if should-emit($theme, $carbon--theme, 'field-02', $emit-difference) { - @include custom-property('field-02', map-get($theme, 'field-02')); - } - - @if should-emit($theme, $carbon--theme, 'inverse-01', $emit-difference) { - @include custom-property('inverse-01', map-get($theme, 'inverse-01')); - } - - @if should-emit($theme, $carbon--theme, 'inverse-02', $emit-difference) { - @include custom-property('inverse-02', map-get($theme, 'inverse-02')); - } - - @if should-emit($theme, $carbon--theme, 'support-01', $emit-difference) { - @include custom-property('support-01', map-get($theme, 'support-01')); - } - - @if should-emit($theme, $carbon--theme, 'support-02', $emit-difference) { - @include custom-property('support-02', map-get($theme, 'support-02')); - } - - @if should-emit($theme, $carbon--theme, 'support-03', $emit-difference) { - @include custom-property('support-03', map-get($theme, 'support-03')); - } - - @if should-emit($theme, $carbon--theme, 'support-04', $emit-difference) { - @include custom-property('support-04', map-get($theme, 'support-04')); - } - - @if should-emit($theme, $carbon--theme, 'inverse-support-01', $emit-difference) { - @include custom-property('inverse-support-01', map-get($theme, 'inverse-support-01')); - } - - @if should-emit($theme, $carbon--theme, 'inverse-support-02', $emit-difference) { - @include custom-property('inverse-support-02', map-get($theme, 'inverse-support-02')); - } - - @if should-emit($theme, $carbon--theme, 'inverse-support-03', $emit-difference) { - @include custom-property('inverse-support-03', map-get($theme, 'inverse-support-03')); - } - - @if should-emit($theme, $carbon--theme, 'inverse-support-04', $emit-difference) { - @include custom-property('inverse-support-04', map-get($theme, 'inverse-support-04')); - } - - @if should-emit($theme, $carbon--theme, 'overlay-01', $emit-difference) { - @include custom-property('overlay-01', map-get($theme, 'overlay-01')); - } - - @if should-emit($theme, $carbon--theme, 'danger', $emit-difference) { - @include custom-property('danger', map-get($theme, 'danger')); - } - - @if should-emit($theme, $carbon--theme, 'focus', $emit-difference) { - @include custom-property('focus', map-get($theme, 'focus')); - } - - @if should-emit($theme, $carbon--theme, 'inverse-focus-ui', $emit-difference) { - @include custom-property('inverse-focus-ui', map-get($theme, 'inverse-focus-ui')); - } - - @if should-emit($theme, $carbon--theme, 'hover-primary', $emit-difference) { - @include custom-property('hover-primary', map-get($theme, 'hover-primary')); - } - - @if should-emit($theme, $carbon--theme, 'active-primary', $emit-difference) { - @include custom-property('active-primary', map-get($theme, 'active-primary')); - } - - @if should-emit($theme, $carbon--theme, 'hover-primary-text', $emit-difference) { - @include custom-property('hover-primary-text', map-get($theme, 'hover-primary-text')); - } - - @if should-emit($theme, $carbon--theme, 'hover-secondary', $emit-difference) { - @include custom-property('hover-secondary', map-get($theme, 'hover-secondary')); - } - - @if should-emit($theme, $carbon--theme, 'active-secondary', $emit-difference) { - @include custom-property('active-secondary', map-get($theme, 'active-secondary')); - } - - @if should-emit($theme, $carbon--theme, 'hover-tertiary', $emit-difference) { - @include custom-property('hover-tertiary', map-get($theme, 'hover-tertiary')); - } - - @if should-emit($theme, $carbon--theme, 'active-tertiary', $emit-difference) { - @include custom-property('active-tertiary', map-get($theme, 'active-tertiary')); - } - - @if should-emit($theme, $carbon--theme, 'hover-ui', $emit-difference) { - @include custom-property('hover-ui', map-get($theme, 'hover-ui')); - } - - @if should-emit($theme, $carbon--theme, 'active-ui', $emit-difference) { - @include custom-property('active-ui', map-get($theme, 'active-ui')); - } - - @if should-emit($theme, $carbon--theme, 'selected-ui', $emit-difference) { - @include custom-property('selected-ui', map-get($theme, 'selected-ui')); - } - - @if should-emit($theme, $carbon--theme, 'hover-selected-ui', $emit-difference) { - @include custom-property('hover-selected-ui', map-get($theme, 'hover-selected-ui')); - } - - @if should-emit($theme, $carbon--theme, 'inverse-hover-ui', $emit-difference) { - @include custom-property('inverse-hover-ui', map-get($theme, 'inverse-hover-ui')); - } - - @if should-emit($theme, $carbon--theme, 'hover-danger', $emit-difference) { - @include custom-property('hover-danger', map-get($theme, 'hover-danger')); - } - - @if should-emit($theme, $carbon--theme, 'active-danger', $emit-difference) { - @include custom-property('active-danger', map-get($theme, 'active-danger')); - } - - @if should-emit($theme, $carbon--theme, 'hover-row', $emit-difference) { - @include custom-property('hover-row', map-get($theme, 'hover-row')); - } - - @if should-emit($theme, $carbon--theme, 'visited-link', $emit-difference) { - @include custom-property('visited-link', map-get($theme, 'visited-link')); - } - - @if should-emit($theme, $carbon--theme, 'disabled-01', $emit-difference) { - @include custom-property('disabled-01', map-get($theme, 'disabled-01')); - } - - @if should-emit($theme, $carbon--theme, 'disabled-02', $emit-difference) { - @include custom-property('disabled-02', map-get($theme, 'disabled-02')); - } - - @if should-emit($theme, $carbon--theme, 'disabled-03', $emit-difference) { - @include custom-property('disabled-03', map-get($theme, 'disabled-03')); - } - - @if should-emit($theme, $carbon--theme, 'highlight', $emit-difference) { - @include custom-property('highlight', map-get($theme, 'highlight')); - } - - @if should-emit($theme, $carbon--theme, 'skeleton-01', $emit-difference) { - @include custom-property('skeleton-01', map-get($theme, 'skeleton-01')); - } - - @if should-emit($theme, $carbon--theme, 'skeleton-02', $emit-difference) { - @include custom-property('skeleton-02', map-get($theme, 'skeleton-02')); - } - - @if should-emit($theme, $carbon--theme, 'brand-01', $emit-difference) { - @include custom-property('brand-01', map-get($theme, 'brand-01')); - } - - @if should-emit($theme, $carbon--theme, 'brand-02', $emit-difference) { - @include custom-property('brand-02', map-get($theme, 'brand-02')); - } - - @if should-emit($theme, $carbon--theme, 'brand-03', $emit-difference) { - @include custom-property('brand-03', map-get($theme, 'brand-03')); - } - - @if should-emit($theme, $carbon--theme, 'active-01', $emit-difference) { - @include custom-property('active-01', map-get($theme, 'active-01')); - } - - @if should-emit($theme, $carbon--theme, 'hover-field', $emit-difference) { - @include custom-property('hover-field', map-get($theme, 'hover-field')); - } - - @if should-emit($theme, $carbon--theme, 'caption-01', $emit-difference) { - @include custom-property('caption-01', map-get($theme, 'caption-01')); - } - - @if should-emit($theme, $carbon--theme, 'label-01', $emit-difference) { - @include custom-property('label-01', map-get($theme, 'label-01')); - } - - @if should-emit($theme, $carbon--theme, 'helper-text-01', $emit-difference) { - @include custom-property('helper-text-01', map-get($theme, 'helper-text-01')); - } - - @if should-emit($theme, $carbon--theme, 'body-short-01', $emit-difference) { - @include custom-property('body-short-01', map-get($theme, 'body-short-01')); - } - - @if should-emit($theme, $carbon--theme, 'body-long-01', $emit-difference) { - @include custom-property('body-long-01', map-get($theme, 'body-long-01')); - } - - @if should-emit($theme, $carbon--theme, 'body-short-02', $emit-difference) { - @include custom-property('body-short-02', map-get($theme, 'body-short-02')); - } - - @if should-emit($theme, $carbon--theme, 'body-long-02', $emit-difference) { - @include custom-property('body-long-02', map-get($theme, 'body-long-02')); - } - - @if should-emit($theme, $carbon--theme, 'code-01', $emit-difference) { - @include custom-property('code-01', map-get($theme, 'code-01')); - } - - @if should-emit($theme, $carbon--theme, 'code-02', $emit-difference) { - @include custom-property('code-02', map-get($theme, 'code-02')); - } - - @if should-emit($theme, $carbon--theme, 'heading-01', $emit-difference) { - @include custom-property('heading-01', map-get($theme, 'heading-01')); - } - - @if should-emit($theme, $carbon--theme, 'productive-heading-01', $emit-difference) { - @include custom-property( - 'productive-heading-01', - map-get($theme, 'productive-heading-01') - ); - } - - @if should-emit($theme, $carbon--theme, 'heading-02', $emit-difference) { - @include custom-property('heading-02', map-get($theme, 'heading-02')); - } - - @if should-emit($theme, $carbon--theme, 'productive-heading-02', $emit-difference) { - @include custom-property( - 'productive-heading-02', - map-get($theme, 'productive-heading-02') - ); - } - - @if should-emit($theme, $carbon--theme, 'productive-heading-03', $emit-difference) { - @include custom-property( - 'productive-heading-03', - map-get($theme, 'productive-heading-03') - ); - } - - @if should-emit($theme, $carbon--theme, 'productive-heading-04', $emit-difference) { - @include custom-property( - 'productive-heading-04', - map-get($theme, 'productive-heading-04') - ); - } - - @if should-emit($theme, $carbon--theme, 'productive-heading-05', $emit-difference) { - @include custom-property( - 'productive-heading-05', - map-get($theme, 'productive-heading-05') - ); - } - - @if should-emit($theme, $carbon--theme, 'productive-heading-06', $emit-difference) { - @include custom-property( - 'productive-heading-06', - map-get($theme, 'productive-heading-06') - ); - } - - @if should-emit($theme, $carbon--theme, 'productive-heading-07', $emit-difference) { - @include custom-property( - 'productive-heading-07', - map-get($theme, 'productive-heading-07') - ); - } - - @if should-emit($theme, $carbon--theme, 'expressive-heading-01', $emit-difference) { - @include custom-property( - 'expressive-heading-01', - map-get($theme, 'expressive-heading-01') - ); - } - - @if should-emit($theme, $carbon--theme, 'expressive-heading-02', $emit-difference) { - @include custom-property( - 'expressive-heading-02', - map-get($theme, 'expressive-heading-02') - ); - } - - @if should-emit($theme, $carbon--theme, 'expressive-heading-03', $emit-difference) { - @include custom-property( - 'expressive-heading-03', - map-get($theme, 'expressive-heading-03') - ); - } - - @if should-emit($theme, $carbon--theme, 'expressive-heading-04', $emit-difference) { - @include custom-property( - 'expressive-heading-04', - map-get($theme, 'expressive-heading-04') - ); - } - - @if should-emit($theme, $carbon--theme, 'expressive-heading-05', $emit-difference) { - @include custom-property( - 'expressive-heading-05', - map-get($theme, 'expressive-heading-05') - ); - } - - @if should-emit($theme, $carbon--theme, 'expressive-heading-06', $emit-difference) { - @include custom-property( - 'expressive-heading-06', - map-get($theme, 'expressive-heading-06') - ); - } - - @if should-emit($theme, $carbon--theme, 'expressive-paragraph-01', $emit-difference) { - @include custom-property( - 'expressive-paragraph-01', - map-get($theme, 'expressive-paragraph-01') - ); - } - - @if should-emit($theme, $carbon--theme, 'quotation-01', $emit-difference) { - @include custom-property('quotation-01', map-get($theme, 'quotation-01')); - } - - @if should-emit($theme, $carbon--theme, 'quotation-02', $emit-difference) { - @include custom-property('quotation-02', map-get($theme, 'quotation-02')); - } - - @if should-emit($theme, $carbon--theme, 'display-01', $emit-difference) { - @include custom-property('display-01', map-get($theme, 'display-01')); - } - - @if should-emit($theme, $carbon--theme, 'display-02', $emit-difference) { - @include custom-property('display-02', map-get($theme, 'display-02')); - } - - @if should-emit($theme, $carbon--theme, 'display-03', $emit-difference) { - @include custom-property('display-03', map-get($theme, 'display-03')); - } - - @if should-emit($theme, $carbon--theme, 'display-04', $emit-difference) { - @include custom-property('display-04', map-get($theme, 'display-04')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-01', $emit-difference) { - @include custom-property('spacing-01', map-get($theme, 'spacing-01')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-02', $emit-difference) { - @include custom-property('spacing-02', map-get($theme, 'spacing-02')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-03', $emit-difference) { - @include custom-property('spacing-03', map-get($theme, 'spacing-03')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-04', $emit-difference) { - @include custom-property('spacing-04', map-get($theme, 'spacing-04')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-05', $emit-difference) { - @include custom-property('spacing-05', map-get($theme, 'spacing-05')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-06', $emit-difference) { - @include custom-property('spacing-06', map-get($theme, 'spacing-06')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-07', $emit-difference) { - @include custom-property('spacing-07', map-get($theme, 'spacing-07')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-08', $emit-difference) { - @include custom-property('spacing-08', map-get($theme, 'spacing-08')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-09', $emit-difference) { - @include custom-property('spacing-09', map-get($theme, 'spacing-09')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-10', $emit-difference) { - @include custom-property('spacing-10', map-get($theme, 'spacing-10')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-11', $emit-difference) { - @include custom-property('spacing-11', map-get($theme, 'spacing-11')); - } - - @if should-emit($theme, $carbon--theme, 'spacing-12', $emit-difference) { - @include custom-property('spacing-12', map-get($theme, 'spacing-12')); - } - - @if should-emit($theme, $carbon--theme, 'fluid-spacing-01', $emit-difference) { - @include custom-property('fluid-spacing-01', map-get($theme, 'fluid-spacing-01')); - } - - @if should-emit($theme, $carbon--theme, 'fluid-spacing-02', $emit-difference) { - @include custom-property('fluid-spacing-02', map-get($theme, 'fluid-spacing-02')); - } - - @if should-emit($theme, $carbon--theme, 'fluid-spacing-03', $emit-difference) { - @include custom-property('fluid-spacing-03', map-get($theme, 'fluid-spacing-03')); - } - - @if should-emit($theme, $carbon--theme, 'fluid-spacing-04', $emit-difference) { - @include custom-property('fluid-spacing-04', map-get($theme, 'fluid-spacing-04')); - } - - @if should-emit($theme, $carbon--theme, 'layout-01', $emit-difference) { - @include custom-property('layout-01', map-get($theme, 'layout-01')); - } - - @if should-emit($theme, $carbon--theme, 'layout-02', $emit-difference) { - @include custom-property('layout-02', map-get($theme, 'layout-02')); - } - - @if should-emit($theme, $carbon--theme, 'layout-03', $emit-difference) { - @include custom-property('layout-03', map-get($theme, 'layout-03')); - } - - @if should-emit($theme, $carbon--theme, 'layout-04', $emit-difference) { - @include custom-property('layout-04', map-get($theme, 'layout-04')); - } - - @if should-emit($theme, $carbon--theme, 'layout-05', $emit-difference) { - @include custom-property('layout-05', map-get($theme, 'layout-05')); - } - - @if should-emit($theme, $carbon--theme, 'layout-06', $emit-difference) { - @include custom-property('layout-06', map-get($theme, 'layout-06')); - } - - @if should-emit($theme, $carbon--theme, 'layout-07', $emit-difference) { - @include custom-property('layout-07', map-get($theme, 'layout-07')); - } - - @if should-emit($theme, $carbon--theme, 'container-01', $emit-difference) { - @include custom-property('container-01', map-get($theme, 'container-01')); - } - - @if should-emit($theme, $carbon--theme, 'container-02', $emit-difference) { - @include custom-property('container-02', map-get($theme, 'container-02')); - } - - @if should-emit($theme, $carbon--theme, 'container-03', $emit-difference) { - @include custom-property('container-03', map-get($theme, 'container-03')); - } - - @if should-emit($theme, $carbon--theme, 'container-04', $emit-difference) { - @include custom-property('container-04', map-get($theme, 'container-04')); - } - - @if should-emit($theme, $carbon--theme, 'container-05', $emit-difference) { - @include custom-property('container-05', map-get($theme, 'container-05')); - } - - @if should-emit($theme, $carbon--theme, 'icon-size-01', $emit-difference) { - @include custom-property('icon-size-01', map-get($theme, 'icon-size-01')); - } - - @if should-emit($theme, $carbon--theme, 'icon-size-02', $emit-difference) { - @include custom-property('icon-size-02', map-get($theme, 'icon-size-02')); - } - } - - @content; - // Reset to default theme after apply in content - @if $theme != $carbon--theme { - @include carbon--theme(); - } -} diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/generated/_themes.scss b/packages/angular/src/toolkit/vendor/@carbon/themes/scss/generated/_themes.scss deleted file mode 100644 index 4cc7d9cdc3..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/generated/_themes.scss +++ /dev/null @@ -1,1378 +0,0 @@ -// Code generated by @carbon/themes. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2019 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -$carbon--theme--white: ( - interactive-01: #0f62fe, - interactive-02: #393939, - interactive-03: #0f62fe, - interactive-04: #0f62fe, - ui-background: #ffffff, - ui-01: #f4f4f4, - ui-02: #ffffff, - ui-03: #e0e0e0, - ui-04: #8d8d8d, - ui-05: #161616, - text-01: #161616, - text-02: #393939, - text-03: #a8a8a8, - text-04: #ffffff, - text-05: #6f6f6f, - text-error: #da1e28, - icon-01: #161616, - icon-02: #525252, - icon-03: #ffffff, - link-01: #0f62fe, - inverse-link: #78a9ff, - field-01: #f4f4f4, - field-02: #ffffff, - inverse-01: #ffffff, - inverse-02: #393939, - support-01: #da1e28, - support-02: #24a148, - support-03: #f1c21b, - support-04: #0043ce, - inverse-support-01: #fa4d56, - inverse-support-02: #42be65, - inverse-support-03: #f1c21b, - inverse-support-04: #4589ff, - overlay-01: rgba(22, 22, 22, 0.5), - danger: #da1e28, - focus: #0f62fe, - inverse-focus-ui: #ffffff, - hover-primary: #0353e9, - active-primary: #002d9c, - hover-primary-text: #0043ce, - hover-secondary: #4c4c4c, - active-secondary: #6f6f6f, - hover-tertiary: #0353e9, - active-tertiary: #002d9c, - hover-ui: #e5e5e5, - active-ui: #c6c6c6, - selected-ui: #e0e0e0, - inverse-hover-ui: #4c4c4c, - hover-selected-ui: #cacaca, - hover-danger: #b81921, - active-danger: #750e13, - hover-row: #e5e5e5, - visited-link: #8a3ffc, - disabled-01: #f4f4f4, - disabled-02: #c6c6c6, - disabled-03: #8d8d8d, - highlight: #d0e2ff, - skeleton-01: #e5e5e5, - skeleton-02: #c6c6c6, - brand-01: #0f62fe, - brand-02: #393939, - brand-03: #0f62fe, - active-01: #c6c6c6, - hover-field: #e5e5e5, - caption-01: ( - font-size: 0.75rem, - font-weight: 400, - line-height: 1rem, - letter-spacing: 0.32px, - ), - label-01: ( - font-size: 0.75rem, - font-weight: 400, - line-height: 1rem, - letter-spacing: 0.32px, - ), - helper-text-01: ( - font-size: 0.75rem, - line-height: 1rem, - letter-spacing: 0.32px, - ), - body-short-01: ( - font-size: 0.875rem, - font-weight: 400, - line-height: 1.125rem, - letter-spacing: 0.16px, - ), - body-long-01: ( - font-size: 0.875rem, - font-weight: 400, - line-height: 1.25rem, - letter-spacing: 0.16px, - ), - body-short-02: ( - font-size: 1rem, - font-weight: 400, - line-height: 1.375rem, - letter-spacing: 0, - ), - body-long-02: ( - font-size: 1rem, - font-weight: 400, - line-height: 1.5rem, - letter-spacing: 0, - ), - code-01: ( - font-family: - unquote( - "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" - ), - font-size: 0.75rem, - font-weight: 400, - line-height: 1rem, - letter-spacing: 0.32px, - ), - code-02: ( - font-family: - unquote( - "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" - ), - font-size: 0.875rem, - font-weight: 400, - line-height: 1.25rem, - letter-spacing: 0.32px, - ), - heading-01: ( - font-size: 0.875rem, - font-weight: 600, - line-height: 1.125rem, - letter-spacing: 0.16px, - ), - productive-heading-01: ( - font-size: 0.875rem, - font-weight: 600, - line-height: 1.125rem, - letter-spacing: 0.16px, - ), - heading-02: ( - font-size: 1rem, - font-weight: 600, - line-height: 1.375rem, - letter-spacing: 0, - ), - productive-heading-02: ( - font-size: 1rem, - font-weight: 600, - line-height: 1.375rem, - letter-spacing: 0, - ), - productive-heading-03: ( - font-size: 1.25rem, - font-weight: 400, - line-height: 1.625rem, - letter-spacing: 0, - ), - productive-heading-04: ( - font-size: 1.75rem, - font-weight: 400, - line-height: 2.25rem, - letter-spacing: 0, - ), - productive-heading-05: ( - font-size: 2rem, - font-weight: 400, - line-height: 2.5rem, - letter-spacing: 0, - ), - productive-heading-06: ( - font-size: 2.625rem, - font-weight: 300, - line-height: 3.125rem, - letter-spacing: 0, - ), - productive-heading-07: ( - font-size: 3.375rem, - font-weight: 300, - line-height: 4rem, - letter-spacing: 0, - ), - expressive-heading-01: ( - font-size: 0.875rem, - font-weight: 600, - line-height: 1.25rem, - letter-spacing: 0.16px, - ), - expressive-heading-02: ( - font-size: 1rem, - font-weight: 600, - line-height: 1.5rem, - letter-spacing: 0, - ), - expressive-heading-03: ( - font-size: 1.25rem, - font-weight: 400, - line-height: 130%, - letter-spacing: 0, - breakpoints: ( - xlg: ( - font-size: 1.25rem, - line-height: 125%, - ), - max: ( - font-size: 1.5rem, - ), - ), - ), - expressive-heading-04: ( - font-size: 1.75rem, - font-weight: 400, - line-height: 129%, - letter-spacing: 0, - breakpoints: ( - xlg: ( - font-size: 1.75rem, - line-height: 125%, - ), - max: ( - font-size: 2rem, - ), - ), - ), - expressive-heading-05: ( - font-size: 2rem, - font-weight: 400, - line-height: 125%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.25rem, - font-weight: 300, - line-height: 122%, - letter-spacing: 0, - ), - lg: ( - font-size: 2.625rem, - font-weight: 300, - line-height: 119%, - letter-spacing: 0, - ), - xlg: ( - font-size: 3rem, - font-weight: 300, - line-height: 117%, - letter-spacing: 0, - ), - max: ( - font-size: 3.75rem, - font-weight: 300, - line-height: 4.375rem, - letter-spacing: 0, - ), - ), - ), - expressive-heading-06: ( - font-size: 2rem, - font-weight: 600, - line-height: 125%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.25rem, - font-weight: 600, - line-height: 122%, - letter-spacing: 0, - ), - lg: ( - font-size: 2.625rem, - font-weight: 600, - line-height: 119%, - letter-spacing: 0, - ), - xlg: ( - font-size: 3rem, - font-weight: 600, - line-height: 117%, - letter-spacing: 0, - ), - max: ( - font-size: 3.75rem, - font-weight: 600, - line-height: 4.375rem, - letter-spacing: 0, - ), - ), - ), - expressive-paragraph-01: ( - font-size: 1.5rem, - font-weight: 300, - line-height: 125%, - letter-spacing: 0, - lg: ( - font-size: 1.75rem, - line-height: 129%, - ), - max: ( - font-size: 2rem, - line-height: 125%, - ), - ), - quotation-01: ( - font-size: 1.25rem, - font-weight: 400, - line-height: 130%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 1.25rem, - font-weight: 400, - letter-spacing: 0, - ), - lg: ( - font-size: 1.5rem, - font-weight: 400, - line-height: 125%, - letter-spacing: 0, - ), - xlg: ( - font-size: 1.75rem, - font-weight: 400, - line-height: 129%, - letter-spacing: 0, - ), - max: ( - font-size: 2rem, - font-weight: 400, - line-height: 125%, - letter-spacing: 0, - ), - ), - ), - quotation-02: ( - font-size: 2rem, - font-weight: 300, - line-height: 125%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.25rem, - line-height: 122%, - ), - lg: ( - font-size: 2.625rem, - line-height: 119%, - ), - xlg: ( - font-size: 3rem, - line-height: 117%, - ), - max: ( - font-size: 3.75rem, - ), - ), - ), - display-01: ( - font-size: 2.625rem, - font-weight: 300, - line-height: 119%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.625rem, - ), - lg: ( - font-size: 3.375rem, - ), - xlg: ( - font-size: 3.75rem, - line-height: 117%, - ), - max: ( - font-size: 4.75rem, - line-height: 113%, - ), - ), - ), - display-02: ( - font-size: 2.625rem, - font-weight: 600, - line-height: 119%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.625rem, - ), - lg: ( - font-size: 3.375rem, - ), - xlg: ( - font-size: 3.75rem, - line-height: 116%, - ), - max: ( - font-size: 4.75rem, - line-height: 113%, - ), - ), - ), - display-03: ( - font-size: 2.625rem, - font-weight: 300, - line-height: 119%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 4.25rem, - line-height: 115%, - ), - lg: ( - font-size: 5.75rem, - line-height: 111%, - letter-spacing: -0.64px, - ), - xlg: ( - font-size: 7.625rem, - line-height: 107%, - ), - max: ( - font-size: 9.75rem, - line-height: 105%, - letter-spacing: -0.96px, - ), - ), - ), - display-04: ( - font-size: 2.625rem, - font-weight: 600, - line-height: 119%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 4.25rem, - line-height: 115%, - ), - lg: ( - font-size: 5.75rem, - line-height: 111%, - letter-spacing: -0.64px, - ), - xlg: ( - font-size: 7.625rem, - line-height: 107%, - letter-spacing: -0.64px, - ), - max: ( - font-size: 9.75rem, - line-height: 105%, - letter-spacing: -0.96px, - ), - ), - ), - spacing-01: 0.125rem, - spacing-02: 0.25rem, - spacing-03: 0.5rem, - spacing-04: 0.75rem, - spacing-05: 1rem, - spacing-06: 1.5rem, - spacing-07: 2rem, - spacing-08: 2.5rem, - spacing-09: 3rem, - spacing-10: 4rem, - spacing-11: 5rem, - spacing-12: 6rem, - fluid-spacing-01: 0, - fluid-spacing-02: 2vw, - fluid-spacing-03: 5vw, - fluid-spacing-04: 10vw, - layout-01: 1rem, - layout-02: 1.5rem, - layout-03: 2rem, - layout-04: 3rem, - layout-05: 4rem, - layout-06: 6rem, - layout-07: 10rem, - container-01: 1.5rem, - container-02: 2rem, - container-03: 2.5rem, - container-04: 3rem, - container-05: 4rem, - icon-size-01: 1rem, - icon-size-02: 1.25rem, -) !default; - -/// Carbon's g10 color theme -/// @type Map -/// @access public -/// @group @carbon/themes -$carbon--theme--g10: map-merge( - $carbon--theme--white, - ( - ui-background: #f4f4f4, - ui-01: #ffffff, - ui-02: #f4f4f4, - field-01: #ffffff, - field-02: #f4f4f4, - disabled-01: #ffffff, - ) -) !default; - -/// Carbon's g90 color theme -/// @type Map -/// @access public -/// @group @carbon/themes -$carbon--theme--g90: map-merge( - $carbon--theme--white, - ( - interactive-02: #6f6f6f, - interactive-03: #ffffff, - interactive-04: #4589ff, - ui-background: #262626, - ui-01: #393939, - ui-02: #525252, - ui-03: #525252, - ui-05: #f4f4f4, - text-01: #f4f4f4, - text-02: #c6c6c6, - text-03: #6f6f6f, - text-05: #8d8d8d, - text-error: #ffb3b8, - icon-01: #f4f4f4, - icon-02: #c6c6c6, - link-01: #78a9ff, - inverse-link: #0f62fe, - field-01: #393939, - field-02: #525252, - inverse-01: #161616, - inverse-02: #f4f4f4, - support-01: #ff8389, - support-02: #42be65, - support-04: #4589ff, - inverse-support-01: #da1e28, - inverse-support-02: #24a148, - inverse-support-04: #0f62fe, - overlay-01: rgba(22, 22, 22, 0.7), - focus: #ffffff, - inverse-focus-ui: #0f62fe, - hover-primary-text: #a6c8ff, - hover-secondary: #606060, - active-secondary: #393939, - hover-tertiary: #f4f4f4, - active-tertiary: #c6c6c6, - hover-ui: #4c4c4c, - active-ui: #6f6f6f, - selected-ui: #525252, - inverse-hover-ui: #e5e5e5, - hover-selected-ui: #656565, - hover-row: #4c4c4c, - visited-link: #be95ff, - disabled-01: #393939, - disabled-02: #6f6f6f, - disabled-03: #a8a8a8, - highlight: #0043ce, - skeleton-01: #353535, - skeleton-02: #525252, - brand-02: #6f6f6f, - brand-03: #ffffff, - active-01: #6f6f6f, - hover-field: #4c4c4c, - ) -) !default; - -/// Carbon's g100 color theme -/// @type Map -/// @access public -/// @group @carbon/themes -$carbon--theme--g100: map-merge( - $carbon--theme--white, - ( - interactive-02: #6f6f6f, - interactive-03: #ffffff, - interactive-04: #4589ff, - ui-background: #161616, - ui-01: #262626, - ui-02: #393939, - ui-03: #393939, - ui-04: #6f6f6f, - ui-05: #f4f4f4, - text-01: #f4f4f4, - text-02: #c6c6c6, - text-03: #6f6f6f, - text-05: #8d8d8d, - text-error: #ff8389, - icon-01: #f4f4f4, - icon-02: #c6c6c6, - link-01: #78a9ff, - inverse-link: #0f62fe, - field-01: #262626, - field-02: #393939, - inverse-01: #161616, - inverse-02: #f4f4f4, - support-01: #fa4d56, - support-02: #42be65, - support-04: #4589ff, - inverse-support-01: #da1e28, - inverse-support-02: #24a148, - inverse-support-04: #0f62fe, - overlay-01: rgba(22, 22, 22, 0.7), - focus: #ffffff, - inverse-focus-ui: #0f62fe, - hover-primary-text: #a6c8ff, - hover-secondary: #606060, - active-secondary: #393939, - hover-tertiary: #f4f4f4, - active-tertiary: #c6c6c6, - hover-ui: #353535, - active-ui: #525252, - selected-ui: #393939, - inverse-hover-ui: #e5e5e5, - hover-selected-ui: #4c4c4c, - hover-row: #353535, - visited-link: #be95ff, - disabled-01: #262626, - disabled-02: #525252, - highlight: #002d9c, - skeleton-01: #353535, - skeleton-02: #393939, - brand-02: #6f6f6f, - brand-03: #ffffff, - active-01: #525252, - hover-field: #353535, - ) -) !default; - -/// Carbon's v9 color theme -/// @type Map -/// @access public -/// @group @carbon/themes -$carbon--theme--v9: map-merge( - $carbon--theme--white, - ( - interactive-01: #3d70b2, - interactive-02: #4d5358, - interactive-03: #3d70b2, - interactive-04: #3d70b2, - ui-background: #f4f7fb, - ui-01: #ffffff, - ui-02: #f4f7fb, - ui-03: #dfe3e6, - ui-04: #8897a2, - ui-05: #5a6872, - text-01: #152935, - text-02: #5a6872, - text-03: #cdd1d4, - text-05: #5a6872, - text-error: #e0182d, - icon-01: #3d70b2, - icon-02: #5a6872, - link-01: #3d70b2, - inverse-link: #5596e6, - field-01: #ffffff, - field-02: #f4f7fb, - inverse-02: #272d33, - support-01: #e0182d, - support-02: #5aa700, - support-03: #efc100, - support-04: #5aaafa, - inverse-support-01: #ff5050, - inverse-support-02: #8cd211, - inverse-support-03: #fdd600, - inverse-support-04: #5aaafa, - overlay-01: rgba(223, 227, 230, 0.5), - focus: #3d70b2, - inverse-focus-ui: #3d70b2, - hover-primary: #30588c, - active-primary: #30588c, - hover-primary-text: #294c86, - hover-secondary: #4d5b65, - active-secondary: #414f59, - hover-tertiary: #5a6872, - active-tertiary: #414f59, - hover-ui: #eef4fc, - active-ui: #dfeafa, - selected-ui: #eef4fc, - hover-selected-ui: #dfeafa, - hover-danger: #c70014, - active-danger: #ad1625, - hover-row: #eef4fc, - visited-link: #294c86, - disabled-01: #fafbfd, - disabled-02: #dfe3e6, - disabled-03: #cdd1d4, - highlight: #f4f7fb, - skeleton-01: rgba(61, 112, 178, 0.1), - skeleton-02: rgba(61, 112, 178, 0.1), - brand-01: #3d70b2, - brand-02: #4d5358, - brand-03: #3d70b2, - active-01: #dfeafa, - hover-field: #eef4fc, - ) -) !default; - -/// Carbon's default theme -/// @type Map -/// @access public -/// @alias carbon--theme--white -/// @group @carbon/themes -$carbon--theme: ( - interactive-01: - if( - global-variable-exists('interactive-01'), - $interactive-01, - map-get($carbon--theme--white, 'interactive-01') - ), - interactive-02: - if( - global-variable-exists('interactive-02'), - $interactive-02, - map-get($carbon--theme--white, 'interactive-02') - ), - interactive-03: - if( - global-variable-exists('interactive-03'), - $interactive-03, - map-get($carbon--theme--white, 'interactive-03') - ), - interactive-04: - if( - global-variable-exists('interactive-04'), - $interactive-04, - map-get($carbon--theme--white, 'interactive-04') - ), - ui-background: - if( - global-variable-exists('ui-background'), - $ui-background, - map-get($carbon--theme--white, 'ui-background') - ), - ui-01: if(global-variable-exists('ui-01'), $ui-01, map-get($carbon--theme--white, 'ui-01')), - ui-02: if(global-variable-exists('ui-02'), $ui-02, map-get($carbon--theme--white, 'ui-02')), - ui-03: if(global-variable-exists('ui-03'), $ui-03, map-get($carbon--theme--white, 'ui-03')), - ui-04: if(global-variable-exists('ui-04'), $ui-04, map-get($carbon--theme--white, 'ui-04')), - ui-05: if(global-variable-exists('ui-05'), $ui-05, map-get($carbon--theme--white, 'ui-05')), - text-01: - if(global-variable-exists('text-01'), $text-01, map-get($carbon--theme--white, 'text-01')), - text-02: - if(global-variable-exists('text-02'), $text-02, map-get($carbon--theme--white, 'text-02')), - text-03: - if(global-variable-exists('text-03'), $text-03, map-get($carbon--theme--white, 'text-03')), - text-04: - if(global-variable-exists('text-04'), $text-04, map-get($carbon--theme--white, 'text-04')), - text-05: - if(global-variable-exists('text-05'), $text-05, map-get($carbon--theme--white, 'text-05')), - text-error: - if( - global-variable-exists('text-error'), - $text-error, - map-get($carbon--theme--white, 'text-error') - ), - icon-01: - if(global-variable-exists('icon-01'), $icon-01, map-get($carbon--theme--white, 'icon-01')), - icon-02: - if(global-variable-exists('icon-02'), $icon-02, map-get($carbon--theme--white, 'icon-02')), - icon-03: - if(global-variable-exists('icon-03'), $icon-03, map-get($carbon--theme--white, 'icon-03')), - link-01: - if(global-variable-exists('link-01'), $link-01, map-get($carbon--theme--white, 'link-01')), - inverse-link: - if( - global-variable-exists('inverse-link'), - $inverse-link, - map-get($carbon--theme--white, 'inverse-link') - ), - field-01: - if( - global-variable-exists('field-01'), - $field-01, - map-get($carbon--theme--white, 'field-01') - ), - field-02: - if( - global-variable-exists('field-02'), - $field-02, - map-get($carbon--theme--white, 'field-02') - ), - inverse-01: - if( - global-variable-exists('inverse-01'), - $inverse-01, - map-get($carbon--theme--white, 'inverse-01') - ), - inverse-02: - if( - global-variable-exists('inverse-02'), - $inverse-02, - map-get($carbon--theme--white, 'inverse-02') - ), - support-01: - if( - global-variable-exists('support-01'), - $support-01, - map-get($carbon--theme--white, 'support-01') - ), - support-02: - if( - global-variable-exists('support-02'), - $support-02, - map-get($carbon--theme--white, 'support-02') - ), - support-03: - if( - global-variable-exists('support-03'), - $support-03, - map-get($carbon--theme--white, 'support-03') - ), - support-04: - if( - global-variable-exists('support-04'), - $support-04, - map-get($carbon--theme--white, 'support-04') - ), - inverse-support-01: - if( - global-variable-exists('inverse-support-01'), - $inverse-support-01, - map-get($carbon--theme--white, 'inverse-support-01') - ), - inverse-support-02: - if( - global-variable-exists('inverse-support-02'), - $inverse-support-02, - map-get($carbon--theme--white, 'inverse-support-02') - ), - inverse-support-03: - if( - global-variable-exists('inverse-support-03'), - $inverse-support-03, - map-get($carbon--theme--white, 'inverse-support-03') - ), - inverse-support-04: - if( - global-variable-exists('inverse-support-04'), - $inverse-support-04, - map-get($carbon--theme--white, 'inverse-support-04') - ), - overlay-01: - if( - global-variable-exists('overlay-01'), - $overlay-01, - map-get($carbon--theme--white, 'overlay-01') - ), - danger: if(global-variable-exists('danger'), $danger, map-get($carbon--theme--white, 'danger')), - focus: if(global-variable-exists('focus'), $focus, map-get($carbon--theme--white, 'focus')), - inverse-focus-ui: - if( - global-variable-exists('inverse-focus-ui'), - $inverse-focus-ui, - map-get($carbon--theme--white, 'inverse-focus-ui') - ), - hover-primary: - if( - global-variable-exists('hover-primary'), - $hover-primary, - map-get($carbon--theme--white, 'hover-primary') - ), - active-primary: - if( - global-variable-exists('active-primary'), - $active-primary, - map-get($carbon--theme--white, 'active-primary') - ), - hover-primary-text: - if( - global-variable-exists('hover-primary-text'), - $hover-primary-text, - map-get($carbon--theme--white, 'hover-primary-text') - ), - hover-secondary: - if( - global-variable-exists('hover-secondary'), - $hover-secondary, - map-get($carbon--theme--white, 'hover-secondary') - ), - active-secondary: - if( - global-variable-exists('active-secondary'), - $active-secondary, - map-get($carbon--theme--white, 'active-secondary') - ), - hover-tertiary: - if( - global-variable-exists('hover-tertiary'), - $hover-tertiary, - map-get($carbon--theme--white, 'hover-tertiary') - ), - active-tertiary: - if( - global-variable-exists('active-tertiary'), - $active-tertiary, - map-get($carbon--theme--white, 'active-tertiary') - ), - hover-ui: - if( - global-variable-exists('hover-ui'), - $hover-ui, - map-get($carbon--theme--white, 'hover-ui') - ), - active-ui: - if( - global-variable-exists('active-ui'), - $active-ui, - map-get($carbon--theme--white, 'active-ui') - ), - selected-ui: - if( - global-variable-exists('selected-ui'), - $selected-ui, - map-get($carbon--theme--white, 'selected-ui') - ), - hover-selected-ui: - if( - global-variable-exists('hover-selected-ui'), - $hover-selected-ui, - map-get($carbon--theme--white, 'hover-selected-ui') - ), - inverse-hover-ui: - if( - global-variable-exists('inverse-hover-ui'), - $inverse-hover-ui, - map-get($carbon--theme--white, 'inverse-hover-ui') - ), - hover-danger: - if( - global-variable-exists('hover-danger'), - $hover-danger, - map-get($carbon--theme--white, 'hover-danger') - ), - active-danger: - if( - global-variable-exists('active-danger'), - $active-danger, - map-get($carbon--theme--white, 'active-danger') - ), - hover-row: - if( - global-variable-exists('hover-row'), - $hover-row, - map-get($carbon--theme--white, 'hover-row') - ), - visited-link: - if( - global-variable-exists('visited-link'), - $visited-link, - map-get($carbon--theme--white, 'visited-link') - ), - disabled-01: - if( - global-variable-exists('disabled-01'), - $disabled-01, - map-get($carbon--theme--white, 'disabled-01') - ), - disabled-02: - if( - global-variable-exists('disabled-02'), - $disabled-02, - map-get($carbon--theme--white, 'disabled-02') - ), - disabled-03: - if( - global-variable-exists('disabled-03'), - $disabled-03, - map-get($carbon--theme--white, 'disabled-03') - ), - highlight: - if( - global-variable-exists('highlight'), - $highlight, - map-get($carbon--theme--white, 'highlight') - ), - skeleton-01: - if( - global-variable-exists('skeleton-01'), - $skeleton-01, - map-get($carbon--theme--white, 'skeleton-01') - ), - skeleton-02: - if( - global-variable-exists('skeleton-02'), - $skeleton-02, - map-get($carbon--theme--white, 'skeleton-02') - ), - brand-01: - if( - global-variable-exists('brand-01'), - $brand-01, - map-get($carbon--theme--white, 'brand-01') - ), - brand-02: - if( - global-variable-exists('brand-02'), - $brand-02, - map-get($carbon--theme--white, 'brand-02') - ), - brand-03: - if( - global-variable-exists('brand-03'), - $brand-03, - map-get($carbon--theme--white, 'brand-03') - ), - active-01: - if( - global-variable-exists('active-01'), - $active-01, - map-get($carbon--theme--white, 'active-01') - ), - hover-field: - if( - global-variable-exists('hover-field'), - $hover-field, - map-get($carbon--theme--white, 'hover-field') - ), - caption-01: - if( - global-variable-exists('caption-01'), - $caption-01, - map-get($carbon--theme--white, 'caption-01') - ), - label-01: - if( - global-variable-exists('label-01'), - $label-01, - map-get($carbon--theme--white, 'label-01') - ), - helper-text-01: - if( - global-variable-exists('helper-text-01'), - $helper-text-01, - map-get($carbon--theme--white, 'helper-text-01') - ), - body-short-01: - if( - global-variable-exists('body-short-01'), - $body-short-01, - map-get($carbon--theme--white, 'body-short-01') - ), - body-long-01: - if( - global-variable-exists('body-long-01'), - $body-long-01, - map-get($carbon--theme--white, 'body-long-01') - ), - body-short-02: - if( - global-variable-exists('body-short-02'), - $body-short-02, - map-get($carbon--theme--white, 'body-short-02') - ), - body-long-02: - if( - global-variable-exists('body-long-02'), - $body-long-02, - map-get($carbon--theme--white, 'body-long-02') - ), - code-01: - if(global-variable-exists('code-01'), $code-01, map-get($carbon--theme--white, 'code-01')), - code-02: - if(global-variable-exists('code-02'), $code-02, map-get($carbon--theme--white, 'code-02')), - heading-01: - if( - global-variable-exists('heading-01'), - $heading-01, - map-get($carbon--theme--white, 'heading-01') - ), - productive-heading-01: - if( - global-variable-exists('productive-heading-01'), - $productive-heading-01, - map-get($carbon--theme--white, 'productive-heading-01') - ), - heading-02: - if( - global-variable-exists('heading-02'), - $heading-02, - map-get($carbon--theme--white, 'heading-02') - ), - productive-heading-02: - if( - global-variable-exists('productive-heading-02'), - $productive-heading-02, - map-get($carbon--theme--white, 'productive-heading-02') - ), - productive-heading-03: - if( - global-variable-exists('productive-heading-03'), - $productive-heading-03, - map-get($carbon--theme--white, 'productive-heading-03') - ), - productive-heading-04: - if( - global-variable-exists('productive-heading-04'), - $productive-heading-04, - map-get($carbon--theme--white, 'productive-heading-04') - ), - productive-heading-05: - if( - global-variable-exists('productive-heading-05'), - $productive-heading-05, - map-get($carbon--theme--white, 'productive-heading-05') - ), - productive-heading-06: - if( - global-variable-exists('productive-heading-06'), - $productive-heading-06, - map-get($carbon--theme--white, 'productive-heading-06') - ), - productive-heading-07: - if( - global-variable-exists('productive-heading-07'), - $productive-heading-07, - map-get($carbon--theme--white, 'productive-heading-07') - ), - expressive-heading-01: - if( - global-variable-exists('expressive-heading-01'), - $expressive-heading-01, - map-get($carbon--theme--white, 'expressive-heading-01') - ), - expressive-heading-02: - if( - global-variable-exists('expressive-heading-02'), - $expressive-heading-02, - map-get($carbon--theme--white, 'expressive-heading-02') - ), - expressive-heading-03: - if( - global-variable-exists('expressive-heading-03'), - $expressive-heading-03, - map-get($carbon--theme--white, 'expressive-heading-03') - ), - expressive-heading-04: - if( - global-variable-exists('expressive-heading-04'), - $expressive-heading-04, - map-get($carbon--theme--white, 'expressive-heading-04') - ), - expressive-heading-05: - if( - global-variable-exists('expressive-heading-05'), - $expressive-heading-05, - map-get($carbon--theme--white, 'expressive-heading-05') - ), - expressive-heading-06: - if( - global-variable-exists('expressive-heading-06'), - $expressive-heading-06, - map-get($carbon--theme--white, 'expressive-heading-06') - ), - expressive-paragraph-01: - if( - global-variable-exists('expressive-paragraph-01'), - $expressive-paragraph-01, - map-get($carbon--theme--white, 'expressive-paragraph-01') - ), - quotation-01: - if( - global-variable-exists('quotation-01'), - $quotation-01, - map-get($carbon--theme--white, 'quotation-01') - ), - quotation-02: - if( - global-variable-exists('quotation-02'), - $quotation-02, - map-get($carbon--theme--white, 'quotation-02') - ), - display-01: - if( - global-variable-exists('display-01'), - $display-01, - map-get($carbon--theme--white, 'display-01') - ), - display-02: - if( - global-variable-exists('display-02'), - $display-02, - map-get($carbon--theme--white, 'display-02') - ), - display-03: - if( - global-variable-exists('display-03'), - $display-03, - map-get($carbon--theme--white, 'display-03') - ), - display-04: - if( - global-variable-exists('display-04'), - $display-04, - map-get($carbon--theme--white, 'display-04') - ), - spacing-01: - if( - global-variable-exists('spacing-01'), - $spacing-01, - map-get($carbon--theme--white, 'spacing-01') - ), - spacing-02: - if( - global-variable-exists('spacing-02'), - $spacing-02, - map-get($carbon--theme--white, 'spacing-02') - ), - spacing-03: - if( - global-variable-exists('spacing-03'), - $spacing-03, - map-get($carbon--theme--white, 'spacing-03') - ), - spacing-04: - if( - global-variable-exists('spacing-04'), - $spacing-04, - map-get($carbon--theme--white, 'spacing-04') - ), - spacing-05: - if( - global-variable-exists('spacing-05'), - $spacing-05, - map-get($carbon--theme--white, 'spacing-05') - ), - spacing-06: - if( - global-variable-exists('spacing-06'), - $spacing-06, - map-get($carbon--theme--white, 'spacing-06') - ), - spacing-07: - if( - global-variable-exists('spacing-07'), - $spacing-07, - map-get($carbon--theme--white, 'spacing-07') - ), - spacing-08: - if( - global-variable-exists('spacing-08'), - $spacing-08, - map-get($carbon--theme--white, 'spacing-08') - ), - spacing-09: - if( - global-variable-exists('spacing-09'), - $spacing-09, - map-get($carbon--theme--white, 'spacing-09') - ), - spacing-10: - if( - global-variable-exists('spacing-10'), - $spacing-10, - map-get($carbon--theme--white, 'spacing-10') - ), - spacing-11: - if( - global-variable-exists('spacing-11'), - $spacing-11, - map-get($carbon--theme--white, 'spacing-11') - ), - spacing-12: - if( - global-variable-exists('spacing-12'), - $spacing-12, - map-get($carbon--theme--white, 'spacing-12') - ), - fluid-spacing-01: - if( - global-variable-exists('fluid-spacing-01'), - $fluid-spacing-01, - map-get($carbon--theme--white, 'fluid-spacing-01') - ), - fluid-spacing-02: - if( - global-variable-exists('fluid-spacing-02'), - $fluid-spacing-02, - map-get($carbon--theme--white, 'fluid-spacing-02') - ), - fluid-spacing-03: - if( - global-variable-exists('fluid-spacing-03'), - $fluid-spacing-03, - map-get($carbon--theme--white, 'fluid-spacing-03') - ), - fluid-spacing-04: - if( - global-variable-exists('fluid-spacing-04'), - $fluid-spacing-04, - map-get($carbon--theme--white, 'fluid-spacing-04') - ), - layout-01: - if( - global-variable-exists('layout-01'), - $layout-01, - map-get($carbon--theme--white, 'layout-01') - ), - layout-02: - if( - global-variable-exists('layout-02'), - $layout-02, - map-get($carbon--theme--white, 'layout-02') - ), - layout-03: - if( - global-variable-exists('layout-03'), - $layout-03, - map-get($carbon--theme--white, 'layout-03') - ), - layout-04: - if( - global-variable-exists('layout-04'), - $layout-04, - map-get($carbon--theme--white, 'layout-04') - ), - layout-05: - if( - global-variable-exists('layout-05'), - $layout-05, - map-get($carbon--theme--white, 'layout-05') - ), - layout-06: - if( - global-variable-exists('layout-06'), - $layout-06, - map-get($carbon--theme--white, 'layout-06') - ), - layout-07: - if( - global-variable-exists('layout-07'), - $layout-07, - map-get($carbon--theme--white, 'layout-07') - ), - container-01: - if( - global-variable-exists('container-01'), - $container-01, - map-get($carbon--theme--white, 'container-01') - ), - container-02: - if( - global-variable-exists('container-02'), - $container-02, - map-get($carbon--theme--white, 'container-02') - ), - container-03: - if( - global-variable-exists('container-03'), - $container-03, - map-get($carbon--theme--white, 'container-03') - ), - container-04: - if( - global-variable-exists('container-04'), - $container-04, - map-get($carbon--theme--white, 'container-04') - ), - container-05: - if( - global-variable-exists('container-05'), - $container-05, - map-get($carbon--theme--white, 'container-05') - ), - icon-size-01: - if( - global-variable-exists('icon-size-01'), - $icon-size-01, - map-get($carbon--theme--white, 'icon-size-01') - ), - icon-size-02: - if( - global-variable-exists('icon-size-02'), - $icon-size-02, - map-get($carbon--theme--white, 'icon-size-02') - ), -) !default; diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/generated/_tokens.scss b/packages/angular/src/toolkit/vendor/@carbon/themes/scss/generated/_tokens.scss deleted file mode 100644 index b431bd1b4f..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/generated/_tokens.scss +++ /dev/null @@ -1,1551 +0,0 @@ -// Code generated by @carbon/themes. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 2019 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -/// Primary interactive color; Primary buttons -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$interactive-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'interactive-01'), - map-get($carbon--theme, 'interactive-01'), - #0f62fe -) !default; - -/// Secondary interactive color; Secondary button -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$interactive-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'interactive-02'), - map-get($carbon--theme, 'interactive-02'), - #393939 -) !default; - -/// 4.5:1 AA contrast; Tertiary button -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$interactive-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'interactive-03'), - map-get($carbon--theme, 'interactive-03'), - #0f62fe -) !default; - -/// 3:1 AA contrast; Selected elements; Active elements; Accent icons -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$interactive-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'interactive-04'), - map-get($carbon--theme, 'interactive-04'), - #0f62fe -) !default; - -/// Default page background -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$ui-background: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'ui-background'), - map-get($carbon--theme, 'ui-background'), - #ffffff -) !default; - -/// Primary container background; Secondary page background -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$ui-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'ui-01'), - map-get($carbon--theme, 'ui-01'), - #f4f4f4 -) !default; - -/// Primary page background; Secondary container background -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$ui-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'ui-02'), - map-get($carbon--theme, 'ui-02'), - #ffffff -) !default; - -/// Subtle border; Tertiary background color -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$ui-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'ui-03'), - map-get($carbon--theme, 'ui-03'), - #e0e0e0 -) !default; - -/// 3:1 AA element contrast; Medium contrast border -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$ui-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'ui-04'), - map-get($carbon--theme, 'ui-04'), - #8d8d8d -) !default; - -/// 4.5:1 AA element contrast; High contrast border; Emphasis elements -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$ui-05: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'ui-05'), - map-get($carbon--theme, 'ui-05'), - #161616 -) !default; - -/// Primary text; Body copy; Headers; Hover text color for `$text-02` -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$text-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'text-01'), - map-get($carbon--theme, 'text-01'), - #161616 -) !default; - -/// Secondary text; Input labels; Help text -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$text-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'text-02'), - map-get($carbon--theme, 'text-02'), - #393939 -) !default; - -/// Placeholder text -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$text-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'text-03'), - map-get($carbon--theme, 'text-03'), - #a8a8a8 -) !default; - -/// Text on interactive colors -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$text-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'text-04'), - map-get($carbon--theme, 'text-04'), - #ffffff -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$text-05: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'text-05'), - map-get($carbon--theme, 'text-05'), - #6f6f6f -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$text-error: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'text-error'), - map-get($carbon--theme, 'text-error'), - #da1e28 -) !default; - -/// Primary icons -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$icon-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'icon-01'), - map-get($carbon--theme, 'icon-01'), - #161616 -) !default; - -/// Secondary icons -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$icon-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'icon-02'), - map-get($carbon--theme, 'icon-02'), - #525252 -) !default; - -/// Tertiary icons; Icons on interactive colors; Icons on non-ui colors -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$icon-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'icon-03'), - map-get($carbon--theme, 'icon-03'), - #ffffff -) !default; - -/// Primary links; Ghost button -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$link-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'link-01'), - map-get($carbon--theme, 'link-01'), - #0f62fe -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$inverse-link: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'inverse-link'), - map-get($carbon--theme, 'inverse-link'), - #78a9ff -) !default; - -/// Default input fields; Field color on $ui-backgrounds -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$field-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'field-01'), - map-get($carbon--theme, 'field-01'), - #f4f4f4 -) !default; - -/// Input field color on `$ui-02` backgrounds -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$field-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'field-02'), - map-get($carbon--theme, 'field-02'), - #ffffff -) !default; - -/// Inverse text color; Inverse icon color -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$inverse-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'inverse-01'), - map-get($carbon--theme, 'inverse-01'), - #ffffff -) !default; - -/// High contrast backgrounds; High contrast elements -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$inverse-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'inverse-02'), - map-get($carbon--theme, 'inverse-02'), - #393939 -) !default; - -/// Error -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$support-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'support-01'), - map-get($carbon--theme, 'support-01'), - #da1e28 -) !default; - -/// Success -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$support-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'support-02'), - map-get($carbon--theme, 'support-02'), - #24a148 -) !default; - -/// Warning -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$support-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'support-03'), - map-get($carbon--theme, 'support-03'), - #f1c21b -) !default; - -/// Information -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$support-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'support-04'), - map-get($carbon--theme, 'support-04'), - #0043ce -) !default; - -/// Error on high contrast backgrounds -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$inverse-support-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'inverse-support-01'), - map-get($carbon--theme, 'inverse-support-01'), - #fa4d56 -) !default; - -/// Success on high contrast backgrounds -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$inverse-support-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'inverse-support-02'), - map-get($carbon--theme, 'inverse-support-02'), - #42be65 -) !default; - -/// Warning on high contrast backgrounds -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$inverse-support-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'inverse-support-03'), - map-get($carbon--theme, 'inverse-support-03'), - #f1c21b -) !default; - -/// Information on high contrast backgrounds -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$inverse-support-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'inverse-support-04'), - map-get($carbon--theme, 'inverse-support-04'), - #4589ff -) !default; - -/// Background overlay -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$overlay-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'overlay-01'), - map-get($carbon--theme, 'overlay-01'), - rgba(22, 22, 22, 0.5) -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$danger: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'danger'), - map-get($carbon--theme, 'danger'), - #da1e28 -) !default; - -/// Focus border; Focus underline -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$focus: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'focus'), - map-get($carbon--theme, 'focus'), - #0f62fe -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$inverse-focus-ui: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'inverse-focus-ui'), - map-get($carbon--theme, 'inverse-focus-ui'), - #ffffff -) !default; - -/// `$interactive-01` hover -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$hover-primary: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'hover-primary'), - map-get($carbon--theme, 'hover-primary'), - #0353e9 -) !default; - -/// `$interactive-01` active -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$active-primary: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'active-primary'), - map-get($carbon--theme, 'active-primary'), - #002d9c -) !default; - -/// `$interactive-01` text hover -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$hover-primary-text: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'hover-primary-text'), - map-get($carbon--theme, 'hover-primary-text'), - #0043ce -) !default; - -/// `$interactive-02` hover -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$hover-secondary: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'hover-secondary'), - map-get($carbon--theme, 'hover-secondary'), - #4c4c4c -) !default; - -/// `$interactive-02` active; `$inverse-01` active -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$active-secondary: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'active-secondary'), - map-get($carbon--theme, 'active-secondary'), - #6f6f6f -) !default; - -/// `$interactive-03` hover; `$inverse-01` hover -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$hover-tertiary: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'hover-tertiary'), - map-get($carbon--theme, 'hover-tertiary'), - #0353e9 -) !default; - -/// `$interactive-03` active -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$active-tertiary: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'active-tertiary'), - map-get($carbon--theme, 'active-tertiary'), - #002d9c -) !default; - -/// `$ui-01` hover; `$ui-02` hover; Transparent background hover -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$hover-ui: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'hover-ui'), - map-get($carbon--theme, 'hover-ui'), - #e5e5e5 -) !default; - -/// `$ui-01` active; `$ui-02` active -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$active-ui: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'active-ui'), - map-get($carbon--theme, 'active-ui'), - #c6c6c6 -) !default; - -/// Selected UI elements -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$selected-ui: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'selected-ui'), - map-get($carbon--theme, 'selected-ui'), - #e0e0e0 -) !default; - -/// Data table selected row hover -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$hover-selected-ui: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'hover-selected-ui'), - map-get($carbon--theme, 'hover-selected-ui'), - #cacaca -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$inverse-hover-ui: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'inverse-hover-ui'), - map-get($carbon--theme, 'inverse-hover-ui'), - #4c4c4c -) !default; - -/// Danger hover; `$support-01` hover -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$hover-danger: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'hover-danger'), - map-get($carbon--theme, 'hover-danger'), - #b81921 -) !default; - -/// Danger active; `$support-01` active -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$active-danger: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'active-danger'), - map-get($carbon--theme, 'active-danger'), - #750e13 -) !default; - -/// Row hover -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$hover-row: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'hover-row'), - map-get($carbon--theme, 'hover-row'), - #e5e5e5 -) !default; - -/// Visited links -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$visited-link: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'visited-link'), - map-get($carbon--theme, 'visited-link'), - #8a3ffc -) !default; - -/// Disabled fields; Disabled backgrounds; Disabled border -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$disabled-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'disabled-01'), - map-get($carbon--theme, 'disabled-01'), - #f4f4f4 -) !default; - -/// Disabled elements on `$disabled-01`; Disabled label; Disabled text on `$disabled-01`; Disabled icons; Disabled border -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$disabled-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'disabled-02'), - map-get($carbon--theme, 'disabled-02'), - #c6c6c6 -) !default; - -/// Disabled text on `$disabled-02`; Disabled icons on `$disabled-02` -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$disabled-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'disabled-03'), - map-get($carbon--theme, 'disabled-03'), - #8d8d8d -) !default; - -/// `$interactive-01` high light -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$highlight: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'highlight'), - map-get($carbon--theme, 'highlight'), - #d0e2ff -) !default; - -/// Skeleton state of graphics -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$skeleton-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'skeleton-01'), - map-get($carbon--theme, 'skeleton-01'), - #e5e5e5 -) !default; - -/// Skeleton state of text -/// @type {undefined} -/// @access public -/// @group @carbon/themes -$skeleton-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'skeleton-02'), - map-get($carbon--theme, 'skeleton-02'), - #c6c6c6 -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -/// @alias interactive-01 -/// @deprecated -$brand-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'brand-01'), - map-get($carbon--theme, 'brand-01'), - #0f62fe -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -/// @alias interactive-02 -/// @deprecated -$brand-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'brand-02'), - map-get($carbon--theme, 'brand-02'), - #393939 -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -/// @alias interactive-03 -/// @deprecated -$brand-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'brand-03'), - map-get($carbon--theme, 'brand-03'), - #0f62fe -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -/// @alias active-ui -/// @deprecated -$active-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'active-01'), - map-get($carbon--theme, 'active-01'), - #c6c6c6 -) !default; - -/// @type {undefined} -/// @access public -/// @group @carbon/themes -/// @alias hover-ui -/// @deprecated -$hover-field: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'hover-field'), - map-get($carbon--theme, 'hover-field'), - #e5e5e5 -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$caption-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'caption-01'), - map-get($carbon--theme, 'caption-01'), - ( - font-size: 0.75rem, - font-weight: 400, - line-height: 1rem, - letter-spacing: 0.32px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$label-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'label-01'), - map-get($carbon--theme, 'label-01'), - ( - font-size: 0.75rem, - font-weight: 400, - line-height: 1rem, - letter-spacing: 0.32px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$helper-text-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'helper-text-01'), - map-get($carbon--theme, 'helper-text-01'), - ( - font-size: 0.75rem, - line-height: 1rem, - letter-spacing: 0.32px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$body-short-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'body-short-01'), - map-get($carbon--theme, 'body-short-01'), - ( - font-size: 0.875rem, - font-weight: 400, - line-height: 1.125rem, - letter-spacing: 0.16px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$body-long-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'body-long-01'), - map-get($carbon--theme, 'body-long-01'), - ( - font-size: 0.875rem, - font-weight: 400, - line-height: 1.25rem, - letter-spacing: 0.16px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$body-short-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'body-short-02'), - map-get($carbon--theme, 'body-short-02'), - ( - font-size: 1rem, - font-weight: 400, - line-height: 1.375rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$body-long-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'body-long-02'), - map-get($carbon--theme, 'body-long-02'), - ( - font-size: 1rem, - font-weight: 400, - line-height: 1.5rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$code-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'code-01'), - map-get($carbon--theme, 'code-01'), - ( - font-family: - unquote( - "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" - ), - font-size: 0.75rem, - font-weight: 400, - line-height: 1rem, - letter-spacing: 0.32px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$code-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'code-02'), - map-get($carbon--theme, 'code-02'), - ( - font-family: - unquote( - "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" - ), - font-size: 0.875rem, - font-weight: 400, - line-height: 1.25rem, - letter-spacing: 0.32px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$heading-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'heading-01'), - map-get($carbon--theme, 'heading-01'), - ( - font-size: 0.875rem, - font-weight: 600, - line-height: 1.125rem, - letter-spacing: 0.16px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$productive-heading-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'productive-heading-01'), - map-get($carbon--theme, 'productive-heading-01'), - ( - font-size: 0.875rem, - font-weight: 600, - line-height: 1.125rem, - letter-spacing: 0.16px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$heading-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'heading-02'), - map-get($carbon--theme, 'heading-02'), - ( - font-size: 1rem, - font-weight: 600, - line-height: 1.375rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$productive-heading-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'productive-heading-02'), - map-get($carbon--theme, 'productive-heading-02'), - ( - font-size: 1rem, - font-weight: 600, - line-height: 1.375rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$productive-heading-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'productive-heading-03'), - map-get($carbon--theme, 'productive-heading-03'), - ( - font-size: 1.25rem, - font-weight: 400, - line-height: 1.625rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$productive-heading-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'productive-heading-04'), - map-get($carbon--theme, 'productive-heading-04'), - ( - font-size: 1.75rem, - font-weight: 400, - line-height: 2.25rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$productive-heading-05: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'productive-heading-05'), - map-get($carbon--theme, 'productive-heading-05'), - ( - font-size: 2rem, - font-weight: 400, - line-height: 2.5rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$productive-heading-06: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'productive-heading-06'), - map-get($carbon--theme, 'productive-heading-06'), - ( - font-size: 2.625rem, - font-weight: 300, - line-height: 3.125rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$productive-heading-07: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'productive-heading-07'), - map-get($carbon--theme, 'productive-heading-07'), - ( - font-size: 3.375rem, - font-weight: 300, - line-height: 4rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$expressive-heading-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'expressive-heading-01'), - map-get($carbon--theme, 'expressive-heading-01'), - ( - font-size: 0.875rem, - font-weight: 600, - line-height: 1.25rem, - letter-spacing: 0.16px, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$expressive-heading-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'expressive-heading-02'), - map-get($carbon--theme, 'expressive-heading-02'), - ( - font-size: 1rem, - font-weight: 600, - line-height: 1.5rem, - letter-spacing: 0, - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$expressive-heading-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'expressive-heading-03'), - map-get($carbon--theme, 'expressive-heading-03'), - ( - font-size: 1.25rem, - font-weight: 400, - line-height: 130%, - letter-spacing: 0, - breakpoints: ( - xlg: ( - font-size: 1.25rem, - line-height: 125%, - ), - max: ( - font-size: 1.5rem, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$expressive-heading-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'expressive-heading-04'), - map-get($carbon--theme, 'expressive-heading-04'), - ( - font-size: 1.75rem, - font-weight: 400, - line-height: 129%, - letter-spacing: 0, - breakpoints: ( - xlg: ( - font-size: 1.75rem, - line-height: 125%, - ), - max: ( - font-size: 2rem, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$expressive-heading-05: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'expressive-heading-05'), - map-get($carbon--theme, 'expressive-heading-05'), - ( - font-size: 2rem, - font-weight: 400, - line-height: 125%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.25rem, - font-weight: 300, - line-height: 122%, - letter-spacing: 0, - ), - lg: ( - font-size: 2.625rem, - font-weight: 300, - line-height: 119%, - letter-spacing: 0, - ), - xlg: ( - font-size: 3rem, - font-weight: 300, - line-height: 117%, - letter-spacing: 0, - ), - max: ( - font-size: 3.75rem, - font-weight: 300, - line-height: 4.375rem, - letter-spacing: 0, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$expressive-heading-06: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'expressive-heading-06'), - map-get($carbon--theme, 'expressive-heading-06'), - ( - font-size: 2rem, - font-weight: 600, - line-height: 125%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.25rem, - font-weight: 600, - line-height: 122%, - letter-spacing: 0, - ), - lg: ( - font-size: 2.625rem, - font-weight: 600, - line-height: 119%, - letter-spacing: 0, - ), - xlg: ( - font-size: 3rem, - font-weight: 600, - line-height: 117%, - letter-spacing: 0, - ), - max: ( - font-size: 3.75rem, - font-weight: 600, - line-height: 4.375rem, - letter-spacing: 0, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$expressive-paragraph-01: if( - global-variable-exists('carbon--theme') and - map-has-key($carbon--theme, 'expressive-paragraph-01'), - map-get($carbon--theme, 'expressive-paragraph-01'), - ( - font-size: 1.5rem, - font-weight: 300, - line-height: 125%, - letter-spacing: 0, - lg: ( - font-size: 1.75rem, - line-height: 129%, - ), - max: ( - font-size: 2rem, - line-height: 125%, - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$quotation-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'quotation-01'), - map-get($carbon--theme, 'quotation-01'), - ( - font-size: 1.25rem, - font-weight: 400, - line-height: 130%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 1.25rem, - font-weight: 400, - letter-spacing: 0, - ), - lg: ( - font-size: 1.5rem, - font-weight: 400, - line-height: 125%, - letter-spacing: 0, - ), - xlg: ( - font-size: 1.75rem, - font-weight: 400, - line-height: 129%, - letter-spacing: 0, - ), - max: ( - font-size: 2rem, - font-weight: 400, - line-height: 125%, - letter-spacing: 0, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$quotation-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'quotation-02'), - map-get($carbon--theme, 'quotation-02'), - ( - font-size: 2rem, - font-weight: 300, - line-height: 125%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.25rem, - line-height: 122%, - ), - lg: ( - font-size: 2.625rem, - line-height: 119%, - ), - xlg: ( - font-size: 3rem, - line-height: 117%, - ), - max: ( - font-size: 3.75rem, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$display-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'display-01'), - map-get($carbon--theme, 'display-01'), - ( - font-size: 2.625rem, - font-weight: 300, - line-height: 119%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.625rem, - ), - lg: ( - font-size: 3.375rem, - ), - xlg: ( - font-size: 3.75rem, - line-height: 117%, - ), - max: ( - font-size: 4.75rem, - line-height: 113%, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$display-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'display-02'), - map-get($carbon--theme, 'display-02'), - ( - font-size: 2.625rem, - font-weight: 600, - line-height: 119%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 2.625rem, - ), - lg: ( - font-size: 3.375rem, - ), - xlg: ( - font-size: 3.75rem, - line-height: 116%, - ), - max: ( - font-size: 4.75rem, - line-height: 113%, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$display-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'display-03'), - map-get($carbon--theme, 'display-03'), - ( - font-size: 2.625rem, - font-weight: 300, - line-height: 119%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 4.25rem, - line-height: 115%, - ), - lg: ( - font-size: 5.75rem, - line-height: 111%, - letter-spacing: -0.64px, - ), - xlg: ( - font-size: 7.625rem, - line-height: 107%, - ), - max: ( - font-size: 9.75rem, - line-height: 105%, - letter-spacing: -0.96px, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$display-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'display-04'), - map-get($carbon--theme, 'display-04'), - ( - font-size: 2.625rem, - font-weight: 600, - line-height: 119%, - letter-spacing: 0, - breakpoints: ( - md: ( - font-size: 4.25rem, - line-height: 115%, - ), - lg: ( - font-size: 5.75rem, - line-height: 111%, - letter-spacing: -0.64px, - ), - xlg: ( - font-size: 7.625rem, - line-height: 107%, - letter-spacing: -0.64px, - ), - max: ( - font-size: 9.75rem, - line-height: 105%, - letter-spacing: -0.96px, - ), - ), - ) -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-01'), - map-get($carbon--theme, 'spacing-01'), - 0.125rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-02'), - map-get($carbon--theme, 'spacing-02'), - 0.25rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-03'), - map-get($carbon--theme, 'spacing-03'), - 0.5rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-04'), - map-get($carbon--theme, 'spacing-04'), - 0.75rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-05: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-05'), - map-get($carbon--theme, 'spacing-05'), - 1rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-06: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-06'), - map-get($carbon--theme, 'spacing-06'), - 1.5rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-07: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-07'), - map-get($carbon--theme, 'spacing-07'), - 2rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-08: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-08'), - map-get($carbon--theme, 'spacing-08'), - 2.5rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-09: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-09'), - map-get($carbon--theme, 'spacing-09'), - 3rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-10: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-10'), - map-get($carbon--theme, 'spacing-10'), - 4rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-11: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-11'), - map-get($carbon--theme, 'spacing-11'), - 5rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$spacing-12: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'spacing-12'), - map-get($carbon--theme, 'spacing-12'), - 6rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$fluid-spacing-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'fluid-spacing-01'), - map-get($carbon--theme, 'fluid-spacing-01'), - 0 -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$fluid-spacing-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'fluid-spacing-02'), - map-get($carbon--theme, 'fluid-spacing-02'), - 2vw -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$fluid-spacing-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'fluid-spacing-03'), - map-get($carbon--theme, 'fluid-spacing-03'), - 5vw -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$fluid-spacing-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'fluid-spacing-04'), - map-get($carbon--theme, 'fluid-spacing-04'), - 10vw -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$layout-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'layout-01'), - map-get($carbon--theme, 'layout-01'), - 1rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$layout-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'layout-02'), - map-get($carbon--theme, 'layout-02'), - 1.5rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$layout-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'layout-03'), - map-get($carbon--theme, 'layout-03'), - 2rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$layout-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'layout-04'), - map-get($carbon--theme, 'layout-04'), - 3rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$layout-05: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'layout-05'), - map-get($carbon--theme, 'layout-05'), - 4rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$layout-06: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'layout-06'), - map-get($carbon--theme, 'layout-06'), - 6rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$layout-07: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'layout-07'), - map-get($carbon--theme, 'layout-07'), - 10rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$container-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'container-01'), - map-get($carbon--theme, 'container-01'), - 1.5rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$container-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'container-02'), - map-get($carbon--theme, 'container-02'), - 2rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$container-03: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'container-03'), - map-get($carbon--theme, 'container-03'), - 2.5rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$container-04: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'container-04'), - map-get($carbon--theme, 'container-04'), - 3rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$container-05: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'container-05'), - map-get($carbon--theme, 'container-05'), - 4rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$icon-size-01: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'icon-size-01'), - map-get($carbon--theme, 'icon-size-01'), - 1rem -) !default; - -/// @type {Number} -/// @access public -/// @group @carbon/themes -$icon-size-02: if( - global-variable-exists('carbon--theme') and map-has-key($carbon--theme, 'icon-size-02'), - map-get($carbon--theme, 'icon-size-02'), - 1.25rem -) !default; diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/index.scss b/packages/angular/src/toolkit/vendor/@carbon/themes/scss/index.scss deleted file mode 100644 index 182c97c839..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/index.scss +++ /dev/null @@ -1,8 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import 'themes'; diff --git a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/themes.scss b/packages/angular/src/toolkit/vendor/@carbon/themes/scss/themes.scss deleted file mode 100644 index e07cee11ca..0000000000 --- a/packages/angular/src/toolkit/vendor/@carbon/themes/scss/themes.scss +++ /dev/null @@ -1,10 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -@import './generated/tokens'; -@import './generated/themes'; -@import './mixins'; diff --git a/packages/angular/src/tsconfig.lib.json b/packages/angular/src/tsconfig.lib.json deleted file mode 100644 index 7632c87b7f..0000000000 --- a/packages/angular/src/tsconfig.lib.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "./../tsconfig.json", - "compilerOptions": { - "rootDir": "." - } -} diff --git a/packages/angular/test.ts b/packages/angular/test.ts deleted file mode 100644 index ca62a574a8..0000000000 --- a/packages/angular/test.ts +++ /dev/null @@ -1,20 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'core-js'; -import 'zone.js/dist/zone'; -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, -} from '@angular/platform-browser-dynamic/testing'; - -// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. -declare var require: any; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/packages/angular/tsconfig.json b/packages/angular/tsconfig.json deleted file mode 100644 index 19b2b15521..0000000000 --- a/packages/angular/tsconfig.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": ".", - "declaration": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "downlevelIteration": true, - "esModuleInterop": true, - "importHelpers": true, - "lib": ["es2016", "dom"], - "sourceMap": true, - "inlineSources": true, - "module": "esnext", - "moduleResolution": "node", - "outDir": "./dist-pkg", - "rootDir": ".", - "target": "es2015", - "skipLibCheck": true, - "typeRoots": ["./node_modules/@types"], - "paths": { - "@ai-apps/angular/*": ["./src/*-index"], - "@angular/*": ["./node_modules/@angular/*", "../../node_modules/@angular/*"] - } - }, - "exclude": [ - "**/*.stories.ts", - "**/stories/**", - "**/*.spec.ts", - "**/node_modules/**", - "**/dist/**", - "**/integration/**" - ], - "angularCompilerOptions": { - "skipTemplateCodegen": true, - "strictMetadataEmit": false, - "strictTemplates": true, - "enableIvy": false - } -} diff --git a/packages/angular/tsconfig.spec.json b/packages/angular/tsconfig.spec.json deleted file mode 100644 index d2f16c0e34..0000000000 --- a/packages/angular/tsconfig.spec.json +++ /dev/null @@ -1,51 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "", - "declaration": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "downlevelIteration": true, - "esModuleInterop": true, - "importHelpers": true, - "lib": [ - "es2016", - "dom" - ], - "sourceMap": true, - "inlineSources": true, - "module": "esnext", - "moduleResolution": "node", - "outDir": "./dist/spec", - "target": "es2015", - "typeRoots": [ - "./node_modules/@types" - ], - "types": [ - "jasmine", - "node" - ], - "paths": { - "@ai-apps/angular/*": [ - "./src/*/index" - ], - "@angular/*": [ - "./node_modules/@angular/*", - "../../node_modules/@angular/*" - ] - }, - }, - "files": [ - "src/test.ts" - ], - "include": [ - "src/**/*.spec.ts" - ], - "angularCompilerOptions": { - "annotateForClosureCompiler": true, - "skipTemplateCodegen": true, - "strictMetadataEmit": true, - "fullTemplateTypeCheck": true, - "strictInjectionParameters": true, - "enableResourceInlining": true - } -} diff --git a/packages/angular/tslint.json b/packages/angular/tslint.json deleted file mode 100644 index 1b6b6acd85..0000000000 --- a/packages/angular/tslint.json +++ /dev/null @@ -1,159 +0,0 @@ -{ - "rulesDirectory": [ - "node_modules/codelyzer" - ], - "rules": { - "class-name": true, - "comment-format": [ - true, - "check-space" - ], - "curly": true, - "eofline": true, - "forin": true, - "import-spacing": true, - "indent": [ - true, - "spaces", - 2 - ], - "label-position": true, - "max-line-length": [ - true, - 140 - ], - "member-access": false, - "member-ordering": [ - true, - { - "order": [ - "public-static-field", - "protected-static-field", - "private-static-field", - "public-static-method", - "protected-static-method", - "private-static-method", - "public-instance-field", - "protected-instance-field", - "private-instance-field", - "public-constructor", - "protected-constructor", - "private-constructor", - "public-instance-method", - "protected-instance-method", - "private-instance-method" - ] - } - ], - "no-arg": true, - "no-bitwise": true, - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-construct": true, - "no-debugger": true, - "no-duplicate-variable": true, - "no-empty": false, - "no-eval": true, - "no-inferrable-types": true, - "no-shadowed-variable": false, - "no-string-literal": false, - "no-switch-case-fall-through": true, - "no-trailing-whitespace": true, - "no-unused-expression": true, - "no-use-before-declare": true, - "no-var-keyword": true, - "object-literal-sort-keys": false, - "one-line": [ - true, - "check-open-brace", - "check-catch", - "check-else", - "check-whitespace" - ], - "quotemark": [ - true, - "single" - ], - "radix": true, - "semicolon": [ - true, - "always", - "ignore-bound-class-methods" - ], - "trailing-comma": [ - true, - { - "esSpecCompliant": true - } - ], - "triple-equals": [ - true, - "allow-null-check", - "allow-undefined-check" - ], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - } - ], - "variable-name": [ - true, - "ban-keywords", - "check-format", - "allow-leading-underscore" - ], - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-module", - "check-separator", - "check-rest-spread", - "check-type", - "check-preblock" - ], - "directive-selector": [ - true, - "attribute", - [ - "ai", - "sc", - "app", - "test" - ], - "camelCase" - ], - "component-selector": [ - true, - "element", - [ - "ai", - "sc", - "app", - "test" - ], - "kebab-case" - ], - "no-inputs-metadata-property": true, - "no-outputs-metadata-property": true, - "no-host-metadata-property": true, - "no-attribute-decorator": true, - "no-input-rename": true, - "no-output-rename": true, - "no-forward-ref": true, - "use-lifecycle-interface": true, - "use-pipe-transform-interface": true - } -} diff --git a/packages/angular/typedoc.json b/packages/angular/typedoc.json deleted file mode 100644 index ade8c7a2af..0000000000 --- a/packages/angular/typedoc.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "entryPoints": [ "./src/index.ts" ], - "out": "documentation", - "exclude": [ "**/node_modules/**" ], - "externalPattern": [ "@storybook/*" ], - "excludeExternals": true, - "theme": "./carbon-angular-typedoc-theme" -} diff --git a/packages/monorepo-utils/CHANGELOG.md b/packages/monorepo-utils/CHANGELOG.md deleted file mode 100644 index ec4839d2bd..0000000000 --- a/packages/monorepo-utils/CHANGELOG.md +++ /dev/null @@ -1,219 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# [2.154.0-next.20](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.19...v2.154.0-next.20) (2024-04-08) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.154.0-next.1](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.153.0-next.35...v2.154.0-next.1) (2023-10-11) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.153.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.5...v2.153.0) (2023-10-11) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -## [2.152.4-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.3...v2.152.4-next.0) (2023-02-28) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -## [2.152.1](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.1-next.0...v2.152.1) (2023-02-22) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -## [2.152.1-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.0...v2.152.1-next.0) (2023-02-21) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.152.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.0-next.32...v2.152.0) (2023-02-20) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -## [2.151.1-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.151.0...v2.151.1-next.0) (2022-11-01) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.151.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.151.0-next.47...v2.151.0) (2022-11-01) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -## [2.150.1-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.150.0...v2.150.1-next.0) (2022-06-06) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.150.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.150.0-next.2...v2.150.0) (2022-06-03) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -## [2.149.1-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0...v2.149.1-next.0) (2022-05-26) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.149.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.58...v2.149.0) (2022-05-26) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -## [2.148.1-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.148.0-next.15...v2.148.1-next.0) (2022-02-08) - - - -# [2.148.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.148.0-next.14...v2.148.0) (2022-02-07) - - -### Reverts - -* Revert "Revert "Merge branch 'next' into master"" ([eebc448](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/eebc448685cb89e35e58d5be7d9891192f527f68)) - - - - - -# [2.148.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.4...v2.148.0) (2022-02-07) - - -### Reverts - -* Revert "Revert "Merge branch 'next' into master"" ([eebc448](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/eebc448685cb89e35e58d5be7d9891192f527f68)) - - - - - -## [2.147.1-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.0...v2.147.1-next.0) (2022-01-12) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.147.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.0-next.91...v2.147.0) (2022-01-12) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.147.0-next.72](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.0-next.71...v2.147.0-next.72) (2021-12-02) - - -### Features - -* update carbon-components ([8a7dd47](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8a7dd47ebff6e3f535dd831bb9ffd95bed0ab224)) - - - - - -## [2.146.1-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.146.0...v2.146.1-next.0) (2021-09-18) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.146.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.146.0-next.187...v2.146.0) (2021-09-17) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -## [2.145.1-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.145.0...v2.145.1-next.0) (2021-05-13) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.145.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.145.0-next.82...v2.145.0) (2021-05-13) - -**Note:** Version bump only for package ai-apps-monorepo-utils - - - - - -# [2.145.0-next.35](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.145.0-next.34...v2.145.0-next.35) (2021-04-07) - - -### Bug Fixes - -* **repo:** un-scope monorepo-utils to prevent npm from trying to publish it ([0390827](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/03908279d7b2a5f4b69ee38cfe7f27c9ac515150)) - - - - - -# [2.145.0-next.33](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.145.0-next.32...v2.145.0-next.33) (2021-04-02) - - -### Bug Fixes - -* add script to automatically sync styles from react ([035bcd3](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/035bcd34d54af67be2800ccd97abb56edd171bff)) - - - - - -# [2.145.0-next.16](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.145.0-next.15...v2.145.0-next.16) (2021-03-24) - -**Note:** Version bump only for package @ai-apps/monorepo-utils diff --git a/packages/monorepo-utils/README.md b/packages/monorepo-utils/README.md deleted file mode 100644 index cfa803165d..0000000000 --- a/packages/monorepo-utils/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# ai-apps-monorepo-utils - -As the monorepo grows a variety of custom tools and integrations are required. This (private!) package can be included in `devDependencies` and allows us to centralize and de-duplicate our utility tooling. - -## Tools - -[#](#vendor) **`vendor`/`vendorAsync`** - -Vendors packages. `vendorAsync` returns a promise that will resolve when complete, `vendor` has no return value. Takes a config object that looks like: - -```javascript -const defaultOptions = { - // pattern for files we want to vendor from each package - pattern: '**/*.+(scss|css)', - // pattern(s) for files we want to ignore from the set of files matched by the `pattern` - ignorePatterns: ['**/node_modules/**'], - // list of packages we want to vendor - packages: [], - // where we want to store the packages we vendor - destination: 'src/vendor', -}; -``` - -By using a pattern/file based vendoring strategy we can reduce the number of files we copy and ship. By default we only vendor css/scss files, a pattern of `**/*` would select every file. - -Example usage: - -```javascript -const { vendor } = require('ai-apps-monorepo-utils'); - -vendor({ - packages: ['@ai-apps/styles'], -}); -``` diff --git a/packages/monorepo-utils/index.js b/packages/monorepo-utils/index.js deleted file mode 100644 index 70fd7791f8..0000000000 --- a/packages/monorepo-utils/index.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - ...require('./vendor'), - ...require('./promise-glob'), - ...require('./package-tools'), -}; diff --git a/packages/monorepo-utils/package-tools.js b/packages/monorepo-utils/package-tools.js deleted file mode 100644 index 227bcd9aac..0000000000 --- a/packages/monorepo-utils/package-tools.js +++ /dev/null @@ -1,7 +0,0 @@ -const { dirname } = require('path'); - -const packagePath = (packageName) => dirname(require.resolve(`${packageName}/package.json`)); - -module.exports = { - packagePath, -}; diff --git a/packages/monorepo-utils/package.json b/packages/monorepo-utils/package.json deleted file mode 100644 index 401339ed6d..0000000000 --- a/packages/monorepo-utils/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "ai-apps-monorepo-utils", - "version": "2.154.0-next.20", - "description": "Internal monorepo tools", - "main": "index.js", - "private": true, - "files": [ - "*.js" - ], - "devDependencies": { - "fs-extra": "9.1.0", - "glob": "7.1.6", - "rimraf": "^5.0.5", - "sass": "^1.42.1" - }, - "author": "IBM", - "license": "Apache-2.0" -} diff --git a/packages/monorepo-utils/promise-glob.js b/packages/monorepo-utils/promise-glob.js deleted file mode 100644 index 86028332b6..0000000000 --- a/packages/monorepo-utils/promise-glob.js +++ /dev/null @@ -1,16 +0,0 @@ -const glob = require('glob'); - -const promiseGlob = (pattern, opts) => - new Promise((resolve, reject) => { - glob(pattern, opts, (err, matches) => { - if (err) { - reject(err); - return; - } - resolve(matches); - }); - }); - -module.exports = { - promiseGlob, -}; diff --git a/packages/monorepo-utils/vendor.js b/packages/monorepo-utils/vendor.js deleted file mode 100644 index f9abce4630..0000000000 --- a/packages/monorepo-utils/vendor.js +++ /dev/null @@ -1,52 +0,0 @@ -const { join } = require('path'); -const { copy, emptyDir } = require('fs-extra'); -const { promiseGlob } = require('./promise-glob'); -const { packagePath } = require('./package-tools'); - -const defaultOptions = { - // pattern for files we want to vendor from each package - pattern: '**/*.+(scss|css)', - // pattern(s) for files we want to ignore from the set of files matched by the `pattern` - ignorePatterns: ['**/node_modules/**'], - // list of packages we want to vendor - packages: [], - // where we want to store the packages we vendor - destination: 'src/vendor', -}; - -const vendorAsync = async (options) => { - const finalOptions = Object.assign({}, defaultOptions, options); - - const { packages, pattern, ignorePatterns, destination } = finalOptions; - - const packageAndPaths = packages.map((package) => { - return { - name: package, - path: packagePath(package), - }; - }); - - await emptyDir(destination); - - for (const packageInfo of packageAndPaths) { - console.log(`vendoring: ${packageInfo.name}`); - // glob the files we actually want so we aren't shipping a huge package - const matches = await promiseGlob(pattern, { - cwd: packageInfo.path, - ignore: ignorePatterns, - }); - - for (const match of matches) { - await copy(join(packageInfo.path, match), `${destination}/${packageInfo.name}/${match}`); - } - } -}; - -const vendor = (options) => { - vendorAsync(options).catch(console.error); -}; - -module.exports = { - vendor, - vendorAsync, -}; diff --git a/packages/react/.storybook/Container.js b/packages/react/.storybook/Container.js index 31790c2126..2dce8a3a53 100755 --- a/packages/react/.storybook/Container.js +++ b/packages/react/.storybook/Container.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import '../src/styles.scss'; import './story-styles.scss'; +import './welcome-story.scss'; export default class Container extends Component { render() { const { story } = this.props; diff --git a/packages/react/.storybook/Welcome.story.jsx b/packages/react/.storybook/Welcome.story.jsx index d9780bf877..fdbf163f06 100644 --- a/packages/react/.storybook/Welcome.story.jsx +++ b/packages/react/.storybook/Welcome.story.jsx @@ -1,8 +1,6 @@ import React from 'react'; import union from 'lodash/union'; -import styles from './welcome-story.css'; - import { Accordion, AccordionItem, @@ -11,9 +9,9 @@ import { StructuredListBody, StructuredListRow, StructuredListCell, -} from '../src/index'; +} from '@carbon/react'; -const carbonExports = Object.keys(require('carbon-components-react')); +const carbonExports = Object.keys(require('@carbon/react')); const iotAddonsExports = Object.keys(require('../src/index')); export default { @@ -68,14 +66,14 @@ export const AboutStorybook = () => (

- The following table shows a comparison of exports from carbon-components-react and this - library. These are primarily used for snapshot purposes to track and ensure that as the - exports change upstream in Carbon we continue to provide parity with their package. + The following table shows a comparison of exports from @carbon/react and this library. + These are primarily used for snapshot purposes to track and ensure that as the exports + change upstream in Carbon we continue to provide parity with their package.

- carbon-components-react exports + @carbon/react exports carbon-addons-iot-react exports diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js index 02874bc506..3f6d1004b1 100644 --- a/packages/react/.storybook/main.js +++ b/packages/react/.storybook/main.js @@ -1,7 +1,13 @@ const path = require('path'); const webpack = require('webpack'); +const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); +const MONACO_DIR = path.join(__dirname, 'node_modules/monaco-editor'); module.exports = { + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, stories: ['./Welcome.story.jsx', '../src/**/*.story.jsx'], addons: [ '@storybook/addon-knobs', @@ -11,18 +17,9 @@ module.exports = { 'storybook-addon-rtl', '@storybook/addon-docs', 'storybook-addon-turbo-build', + '@storybook/addon-webpack5-compiler-babel', ], - babel: async (options) => { - // ensure all plugins are using loose: false (the default) - // this avoids an error where plugins from different locations have - // different loose modes - options.plugins.forEach((plugin) => { - if (Array.isArray(plugin) && plugin[1].loose) { - plugin[1].loose = false; - } - }); - return options; - }, + webpackFinal: async (config, { configType }) => { // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. @@ -30,11 +27,33 @@ module.exports = { // High quality 'original source' sourcemaps are slow to generate on initial builds and rebuilds. // Using cheap-module-eval-source-map speeds up builds and rebuilds in development while not sacrificing too much source map quality. - config.devtool = configType === 'DEVELOPMENT' ? 'cheap-module-eval-source-map' : ''; + config.devtool = configType === 'DEVELOPMENT' ? 'eval-source-map' : false; // Moment.js is quite large, the locales that they bundle in the core as of v2.18 are ignored to keep our bundle size down. // https://webpack.js.org/plugins/ignore-plugin/#example-of-ignoring-moment-locales - config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment\/min$/)); + // Corrected IgnorePlugin configuration + config.module.rules.push({ + test: /\.(js|jsx)$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-react', '@babel/preset-env'], + }, + }, + }); + + config.plugins.push( + new webpack.IgnorePlugin({ + resourceRegExp: /^\.\/locale$/, + contextRegExp: /moment$/, + }) + ); + config.plugins.push( + new MonacoWebpackPlugin({ + languages: ['typescript', 'javascript', 'css'], + }) + ); config.module.rules.push({ test: /\.(js|jsx)$/, @@ -57,14 +76,10 @@ module.exports = { }, }; - // Remove the existing css rule - // https://github.com/storybookjs/storybook/issues/6319#issuecomment-477852640 - config.module.rules = config.module.rules.filter((f) => f.test.toString() !== '/\\.css$/'); - // Define our desired scss/css rule config.module.rules.push({ test: /\.s?css$/, - exclude: [/coverage/], + exclude: [/coverage/, /monaco-editor/], sideEffects: true, use: [ // Creates `style` nodes from JS strings @@ -77,28 +92,43 @@ module.exports = { { loader: 'postcss-loader', options: { - plugins: () => [ - require('autoprefixer')({ - browsers: ['last 1 version', 'ie >= 11'], - }), - ], + postcssOptions: { + plugins: [ + require('autoprefixer')({ + overrideBrowserslist: ['last 1 version', 'ie >= 11'], + }), + ], + }, }, }, // Compiles Sass to CSS { - loader: 'fast-sass-loader', + loader: 'sass-loader', options: { - includePaths: [path.resolve(__dirname, '..', 'node_modules')], + sassOptions: { + includePaths: [path.resolve(__dirname, '..', '..', '..', 'node_modules')], + }, }, }, ], }); + config.module.rules.push({ + test: /\.css$/, + include: MONACO_DIR, + use: ['style-loader', 'css-loader', 'sass-loader'], + }); + + config.module.rules.push({ + test: /\.ttf$/, + use: ['file-loader'], + // type: 'asset', + }); + // add the package local node_modules as the first place to look when resolving modules // more info here: https://webpack.js.org/configuration/resolve/#resolvemodules config.resolve.modules = [path.resolve(__dirname, '../node_modules'), 'node_modules']; - // Return the altered config return config; }, }; diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js index c352e46813..e19ccee07d 100755 --- a/packages/react/.storybook/preview.js +++ b/packages/react/.storybook/preview.js @@ -1,10 +1,7 @@ import React from 'react'; import { withKnobs } from '@storybook/addon-knobs'; import { configureActions } from '@storybook/addon-actions'; -import { initializeRTL } from 'storybook-addon-rtl'; -import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; - -initializeRTL(); +import { DocsPage, DocsContainer } from '@storybook/blocks'; import Container from './Container'; @@ -18,12 +15,9 @@ export const parameters = { page: DocsPage, }, options: { - storySort: (a, b) => - a[1].kind.replace(/☢️-|🚫-|⚠️-/i, '') === b[1].kind.replace(/☢️-|🚫-|⚠️-/i, '') - ? 0 - : a[1].id - .replace(/☢️-|🚫-|⚠️-/i, '') - .localeCompare(b[1].id.replace(/☢️-|🚫-|⚠️-/i, ''), undefined, { numeric: true }), + storySort: (a, b) => { + return a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }); + }, }, a11y: { element: '#root', diff --git a/packages/react/.storybook/story-styles.scss b/packages/react/.storybook/story-styles.scss index af30253e09..c7edec08f9 100644 --- a/packages/react/.storybook/story-styles.scss +++ b/packages/react/.storybook/story-styles.scss @@ -1,4 +1,5 @@ -@import '../src/globals/vars'; +@use '../src/globals/vars' as *; +@use '@carbon/react/scss/config' as *; .sb-show-main.sb-main-padded { padding: 0; diff --git a/packages/react/.storybook/theme.js b/packages/react/.storybook/theme.js index 0f33f341ef..de56779702 100644 --- a/packages/react/.storybook/theme.js +++ b/packages/react/.storybook/theme.js @@ -1,40 +1,12 @@ import { create } from '@storybook/theming'; -import { g10 } from '@carbon/themes'; import { name, homepage } from '../package.json'; - -const { field01, interactive01, text01, text04, ui01, ui03, ui04, uiBackground } = g10; +// const { field01, interactive01, text01, text04, ui01, ui03, ui04, uiBackground } = g10; //carbon 11 export default create({ base: 'light', - - colorPrimary: interactive01, - colorSecondary: ui04, - - // UI - appBg: ui01, - appContentBg: uiBackground, - appBorderColor: ui04, - appBorderRadius: 0, - // Typography - fontBase: '"IBM Plex Sans", sans-serif', - fontCode: '"IBM Plex Mono", monospace', - - // Text colors - textColor: text01, - textInverseColor: text04, - - // Toolbar default and active colors - barTextColor: text01, - barSelectedColor: interactive01, - barBg: uiBackground, - - // Form colors - inputBg: field01, - inputBorder: ui03, - inputTextColor: text01, - inputBorderRadius: 0, - + fontBase: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif", + fontCode: "'IBM Plex Mono', Menlo, 'DejaVu Sans Mono'", brandTitle: name, brandUrl: homepage, brandImage: diff --git a/packages/react/.storybook/welcome-story.css b/packages/react/.storybook/welcome-story.scss similarity index 100% rename from packages/react/.storybook/welcome-story.css rename to packages/react/.storybook/welcome-story.scss diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 7493c05caf..f1a9a3c716 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,7 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -# [2.154.0-next.41](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.40...v2.154.0-next.41) (2024-12-04) +## [4.0.1-v4-Carbon11.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.75...v4.0.1-v4-Carbon11.0) (2024-12-06) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.75](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.74...v4.0.0-v4-Carbon11.75) (2024-12-06) + + + +# [2.154.0-next.41](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.73...v2.154.0-next.41) (2024-12-04) ### Bug Fixes @@ -14,18 +26,141 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline -# [2.154.0-next.40](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.39...v2.154.0-next.40) (2024-11-10) +# [4.0.0-v4-Carbon11.74](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.73...v4.0.0-v4-Carbon11.74) (2024-12-06) + + +### Reverts + +* hide the overflow in value card ([3b5692f](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/3b5692f9494e42f060ddc4ffb30b81c31d099be2)) + + + + + +# [4.0.0-v4-Carbon11.73](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.72...v4.0.0-v4-Carbon11.73) (2024-12-02) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.72](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.71...v4.0.0-v4-Carbon11.72) (2024-12-01) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.71](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.70...v4.0.0-v4-Carbon11.71) (2024-12-01) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.70](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.69...v4.0.0-v4-Carbon11.70) (2024-12-01) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.69](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.68...v4.0.0-v4-Carbon11.69) (2024-12-01) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.68](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.67...v4.0.0-v4-Carbon11.68) (2024-12-01) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.67](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.66...v4.0.0-v4-Carbon11.67) (2024-12-01) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.66](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.65...v4.0.0-v4-Carbon11.66) (2024-12-01) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.65](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.64...v4.0.0-v4-Carbon11.65) (2024-12-01) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.64](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.63...v4.0.0-v4-Carbon11.64) (2024-12-01) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.63](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.62...v4.0.0-v4-Carbon11.63) (2024-11-28) ### Bug Fixes -* add maximum data point to data table card ([23b4b2e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/23b4b2ee04e525bce42f14aedeeaf7706aeae8b2)) +* table card ([#3899](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3899)) ([fe741bd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fe741bdc9d0f6d4780a1e6af6e023356d3648829)) + + + + +# [4.0.0-v4-Carbon11.62](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.61...v4.0.0-v4-Carbon11.62) (2024-11-28) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.61](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.60...v4.0.0-v4-Carbon11.61) (2024-11-28) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.60](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.59...v4.0.0-v4-Carbon11.60) (2024-11-26) + +**Note:** Version bump only for package carbon-addons-iot-react -# [2.154.0-next.39](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.38...v2.154.0-next.39) (2024-11-10) + +# [4.0.0-v4-Carbon11.59](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.58...v4.0.0-v4-Carbon11.59) (2024-11-21) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.58](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.57...v4.0.0-v4-Carbon11.58) (2024-11-21) **Note:** Version bump only for package carbon-addons-iot-react @@ -33,25 +168,38 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline -# [2.154.0-next.38](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.37...v2.154.0-next.38) (2024-11-06) +# [4.0.0-v4-Carbon11.57](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.56...v4.0.0-v4-Carbon11.57) (2024-11-20) + + + +# [2.154.0-next.40](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.39...v2.154.0-next.40) (2024-11-10) ### Bug Fixes -* out of focus issue when typing ([#3895](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3895)) ([b898247](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b898247b7b1b8f933b07ea4079c0e7f9a52a5873)) +* add maximum data point to data table card ([23b4b2e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/23b4b2ee04e525bce42f14aedeeaf7706aeae8b2)) +# [2.154.0-next.39](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.41...v2.154.0-next.39) (2024-11-10) -# [2.154.0-next.37](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.36...v2.154.0-next.37) (2024-10-10) + +# [2.154.0-next.38](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.37...v2.154.0-next.38) (2024-11-06) ### Bug Fixes -* adding back style fix that was deleted during merge ([#3889](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3889)) ([9b2bffd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/9b2bffdb2d50143d7b6a83a30b25952247302c41)) +* out of focus issue when typing ([#3895](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3895)) ([b898247](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b898247b7b1b8f933b07ea4079c0e7f9a52a5873)) + + + +# [2.154.0-next.37](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.35...v2.154.0-next.37) (2024-10-10) +### Bug Fixes + +* adding back style fix that was deleted during merge ([#3889](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3889)) ([9b2bffd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/9b2bffdb2d50143d7b6a83a30b25952247302c41)) @@ -64,9 +212,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline - - -# [2.154.0-next.35](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.34...v2.154.0-next.35) (2024-10-01) +# [2.154.0-next.35](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.33...v2.154.0-next.35) (2024-10-01) ### Features @@ -75,36 +221,632 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline +# [2.154.0-next.34](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.26...v2.154.0-next.34) (2024-08-16) + + +### Bug Fixes + +* select the inner modal body css ([#3878](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3878)) ([fe6103e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fe6103e998b51327ad989e00831834f0996620f3)) + -# [2.154.0-next.34](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.33...v2.154.0-next.34) (2024-08-16) +# [2.154.0-next.33](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.19...v2.154.0-next.33) (2024-08-09) ### Bug Fixes -* select the inner modal body css ([#3878](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3878)) ([fe6103e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fe6103e998b51327ad989e00831834f0996620f3)) +* moving flyout menu var to be scoped to flyout-menu ([#3877](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3877)) ([2e54d53](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/2e54d538920442943e458d49eed93f0a369b7d1c)) + + + +# [2.154.0-next.32](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.10...v2.154.0-next.32) (2024-08-01) + + +### Bug Fixes + +* remove last threshold ([#3876](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3876)) ([35eef3c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/35eef3c88fa1dedd6c25e0d8eb0d7c532b493d58)) + + + + + +# [4.0.0-v4-Carbon11.56](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.55...v4.0.0-v4-Carbon11.56) (2024-11-20) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.55](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.54...v4.0.0-v4-Carbon11.55) (2024-11-20) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.54](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.53...v4.0.0-v4-Carbon11.54) (2024-11-20) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.53](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.52...v4.0.0-v4-Carbon11.53) (2024-11-18) + + +### Reverts + +* d5369fa1b08956eb525ca3fe4c05a687070f48a3 ([1aae97f](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1aae97f41f4de301962532e803cc994e137c637e)) + + + + + +# [4.0.0-v4-Carbon11.52](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.51...v4.0.0-v4-Carbon11.52) (2024-11-18) + + +### Reverts + +* partial revert of 6b29aedb7ed5e317a35d9c6b36680504df5fd7df ([d5369fa](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d5369fa1b08956eb525ca3fe4c05a687070f48a3)) -# [2.154.0-next.33](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.32...v2.154.0-next.33) (2024-08-09) +# [4.0.0-v4-Carbon11.51](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.50...v4.0.0-v4-Carbon11.51) (2024-11-18) ### Bug Fixes -* moving flyout menu var to be scoped to flyout-menu ([#3877](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3877)) ([2e54d53](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/2e54d538920442943e458d49eed93f0a369b7d1c)) +* adding back side-nav style fix ([d21fc82](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d21fc82b6e2d1e85eca1c95c87ffb909814f45da)) +* color token usage ([0952809](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/09528091d34aa604cc0f6125f15b2a71c9501f17)) + + + + + +# [4.0.0-v4-Carbon11.50](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.49...v4.0.0-v4-Carbon11.50) (2024-11-15) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.49](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.48...v4.0.0-v4-Carbon11.49) (2024-11-14) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.48](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.47...v4.0.0-v4-Carbon11.48) (2024-11-13) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.47](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.46...v4.0.0-v4-Carbon11.47) (2024-11-12) + +**Note:** Version bump only for package carbon-addons-iot-react + + + +# [4.0.0-v4-Carbon11.46](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.45...v4.0.0-v4-Carbon11.46) (2024-11-12) +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.45](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.44...v4.0.0-v4-Carbon11.45) (2024-11-11) + +**Note:** Version bump only for package carbon-addons-iot-react -# [2.154.0-next.32](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.31...v2.154.0-next.32) (2024-08-01) + + + +# [4.0.0-v4-Carbon11.44](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.43...v4.0.0-v4-Carbon11.44) (2024-11-11) ### Bug Fixes -* remove last threshold ([#3876](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3876)) ([35eef3c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/35eef3c88fa1dedd6c25e0d8eb0d7c532b493d58)) +* enable floating styles ([b28502a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b28502a0be43c40c8af728339b8c8b9f199a6d5b)) + + + + + +# [4.0.0-v4-Carbon11.43](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.42...v4.0.0-v4-Carbon11.43) (2024-11-11) + + + + + +# [4.0.0-v4-Carbon11.42](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.41...v4.0.0-v4-Carbon11.42) (2024-11-10) + + +### Bug Fixes + +* add maximum data point to data table card ([26d7829](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/26d782926e1bd30cfa5f2d653d029ef28470c2fd)) + + + + + +# [4.0.0-v4-Carbon11.41](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.40...v4.0.0-v4-Carbon11.41) (2024-11-10) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.40](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.39...v4.0.0-v4-Carbon11.40) (2024-11-07) + + +### Bug Fixes + +* button with loader to display at the beggining ([56143df](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/56143df429dad3a572806364e85584b865fe441e)) +* display icon on row action ([9415173](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/9415173fa481080d80ff6911b02ce79cacd4a16d)) +* remove last threshold ([#3876](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3876)) ([df3baef](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/df3baef43994cf2d9ec4d9dfbaa389e256129d87)) + + + + + +# [4.0.0-v4-Carbon11.39](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.38...v4.0.0-v4-Carbon11.39) (2024-11-07) + + +### Bug Fixes + +* select the inner modal body css ([#3878](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3878)) ([0cc04aa](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/0cc04aa6800497a9486b945892705e40c057869f)) + + + + + +# [4.0.0-v4-Carbon11.38](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.37...v4.0.0-v4-Carbon11.38) (2024-11-06) + + +### Bug Fixes + +* out of focus issue when typing ([#3895](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3895)) ([85f7ed8](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/85f7ed826ed250599e70e1e1dda7842d090f2d4c)) + + + + + +# [4.0.0-v4-Carbon11.37](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.36...v4.0.0-v4-Carbon11.37) (2024-10-29) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.36](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.35...v4.0.0-v4-Carbon11.36) (2024-10-21) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.35](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.34...v4.0.0-v4-Carbon11.35) (2024-10-03) + + +### Bug Fixes + +* **build:** fix in react recursive component not working ([#3888](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3888)) ([4cec39a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/4cec39a9c04c8c3b07b792bf0a9bea90352e2113)) + + + + + +# [4.0.0-v4-Carbon11.34](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.33...v4.0.0-v4-Carbon11.34) (2024-10-02) + + +### Features + +* Monaco editor load resources from npm ([#3886](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3886)) ([6299902](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6299902869febbecd7b535d2434679e30240258e)) + + + + + +# [4.0.0-v4-Carbon11.33](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.32...v4.0.0-v4-Carbon11.33) (2024-09-25) + + +### Bug Fixes + +* date time picker v2 style ([6edf30b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6edf30bf33853eb551073bf48b57073f5dd0d3ca)) + + + + + +# [4.0.0-v4-Carbon11.32](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.31...v4.0.0-v4-Carbon11.32) (2024-09-06) + + +### Bug Fixes + +* side nav colors added back ([932dc57](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/932dc57d93ab81513e023f6b62a7da3ed8f4814f)) + + + + + +# [4.0.0-v4-Carbon11.31](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.30...v4.0.0-v4-Carbon11.31) (2024-08-30) + + +### Bug Fixes + +* adding missing optional chaining ([d7bd829](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d7bd8298863e09952b52a2deda6fa5dc293da1e7)) + + + + + +# [4.0.0-v4-Carbon11.30](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.29...v4.0.0-v4-Carbon11.30) (2024-08-30) + + +### Bug Fixes + +* date time picker util function ([8d0aeba](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8d0aeba47544cf7ef4ae3423bd3b2e40e5862785)) + + + + + +# [4.0.0-v4-Carbon11.29](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.28...v4.0.0-v4-Carbon11.29) (2024-08-30) + + +### Bug Fixes + +* date time picker tooltip and error on close ([2c5976c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/2c5976c3a023576fa7d818111c6c367a4d259c3b)) + + + + + +# [4.0.0-v4-Carbon11.28](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.27...v4.0.0-v4-Carbon11.28) (2024-08-29) + + +### Bug Fixes + +* table head definition tooltip alignment ([94a0ec3](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/94a0ec34bac8a68e5aca75d4ee87188d723608a2)) + + + + + +# [4.0.0-v4-Carbon11.27](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.26...v4.0.0-v4-Carbon11.27) (2024-08-21) + + +### Bug Fixes + +* header style fixes ([58e926a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/58e926ac797f9f612305ed647bdf7dbbf76967fc)) + + + + + +# [4.0.0-v4-Carbon11.26](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.25...v4.0.0-v4-Carbon11.26) (2024-08-14) + + +### Bug Fixes + +* table toolbar search fix ([ae9cc8c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/ae9cc8c278f6db0cb5d1a26e133bfb81a4916317)) + + + + + +# [4.0.0-v4-Carbon11.25](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.24...v4.0.0-v4-Carbon11.25) (2024-08-14) + + +### Bug Fixes + +* card title overflow fix ([69072e6](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/69072e69c0a8a5fde151a48866dc1ee4f18a5ab8)) + + + + + +# [4.0.0-v4-Carbon11.24](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.23...v4.0.0-v4-Carbon11.24) (2024-08-13) + + +### Bug Fixes + +* text overflow hook ([4cd289d](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/4cd289d4a659d57f06ac641edc78bbff80015c93)) + + + + + +# [4.0.0-v4-Carbon11.23](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.22...v4.0.0-v4-Carbon11.23) (2024-08-12) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.22](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.21...v4.0.0-v4-Carbon11.22) (2024-08-12) + + +### Bug Fixes + +* tooltip display style change ([43bba22](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/43bba2238e5869cf3c87dfc514b5656280634bed)) + + + + + +# [4.0.0-v4-Carbon11.21](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.20...v4.0.0-v4-Carbon11.21) (2024-08-12) + + +### Bug Fixes + +* tooltip definition open on hover default value change ([5588ab3](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/5588ab3422a14de4e13c09213a2cb9475e33b9df)) + + + + + +# [4.0.0-v4-Carbon11.20](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.19...v4.0.0-v4-Carbon11.20) (2024-08-09) + + +### Bug Fixes + +* removing tooltip svg fill ([efffc46](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/efffc46cd4da412a16d1d85b72f1309eb9a0c688)) + + + + + +# [4.0.0-v4-Carbon11.19](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.18...v4.0.0-v4-Carbon11.19) (2024-08-08) + + +### Bug Fixes + +* tear sheet style fix ([e5e2d1e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/e5e2d1eef685c2b80efdca199ac4c3c003ac0ff0)) + + + + + +# [4.0.0-v4-Carbon11.18](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.17...v4.0.0-v4-Carbon11.18) (2024-08-08) + + +### Bug Fixes + +* tooltip style ([898f889](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/898f889dea2965954930c155a7f9f85ee567caf9)) + + + + + +# [4.0.0-v4-Carbon11.17](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.16...v4.0.0-v4-Carbon11.17) (2024-08-08) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.16](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.15...v4.0.0-v4-Carbon11.16) (2024-08-08) + + +### Bug Fixes + +* tear sheet style fix ([b160875](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b160875b42ef3dd6e13f38f8da63c6ee7adee068)) + + + + + +# [4.0.0-v4-Carbon11.15](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.14...v4.0.0-v4-Carbon11.15) (2024-08-07) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.14](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.13...v4.0.0-v4-Carbon11.14) (2024-08-07) + + +### Bug Fixes + +* table styles ([83e5b73](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/83e5b73bd8d9a0650ed3a44f952136139566e4e2)) + + + + + +# [4.0.0-v4-Carbon11.13](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.12...v4.0.0-v4-Carbon11.13) (2024-08-06) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.12](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.11...v4.0.0-v4-Carbon11.12) (2024-08-06) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.11](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.10...v4.0.0-v4-Carbon11.11) (2024-08-05) + + +### Bug Fixes + +* header menu button style ([aee3b6e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/aee3b6e1ce522677d165b4c7a6e9f38515400eaf)) + + + + + +# [4.0.0-v4-Carbon11.10](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.9...v4.0.0-v4-Carbon11.10) (2024-07-31) + + +### Bug Fixes + +* header and suite header fixes ([398a423](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/398a42358c606a8fc1a5760e9230ffebd47aef5e)) + + + + + +# [4.0.0-v4-Carbon11.9](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.8...v4.0.0-v4-Carbon11.9) (2024-07-31) + + +### Bug Fixes + +* table crash issue due to infinite reload ([50d8e10](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/50d8e10942dd9e4128a3fefba8632be00b686876)) + + + + + +# [4.0.0-v4-Carbon11.8](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.7...v4.0.0-v4-Carbon11.8) (2024-07-31) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.7](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.6...v4.0.0-v4-Carbon11.7) (2024-07-30) + + +### Bug Fixes + +* header style ([1e9e9e6](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1e9e9e681f113fb9f36f49e3a9f4d09e3954564f)) + + + + + +# [4.0.0-v4-Carbon11.6](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.5...v4.0.0-v4-Carbon11.6) (2024-07-30) + + +### Bug Fixes + +* removing missing carbon exports ([b9d6c70](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b9d6c70f8617b90da6d216033201ae01ffb3a3d0)) + + + + + +# [4.0.0-v4-Carbon11.5](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.4...v4.0.0-v4-Carbon11.5) (2024-07-30) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.4](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.3...v4.0.0-v4-Carbon11.4) (2024-07-30) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.3](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.2...v4.0.0-v4-Carbon11.3) (2024-07-29) + + +### Bug Fixes + +* date time picker auto positioning ([f2a4287](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f2a428789eeb131da6105202515976f75e33de57)) +* flyout menu css fix ([198717b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/198717bc43a99544ed74cb04cd4d5da12827b09a)) + + + + + +# [4.0.0-v4-Carbon11.2](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.1...v4.0.0-v4-Carbon11.2) (2024-07-28) + +**Note:** Version bump only for package carbon-addons-iot-react + + + + + +# [4.0.0-v4-Carbon11.1](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v4.0.0-v4-Carbon11.0...v4.0.0-v4-Carbon11.1) (2024-07-26) + + +### Bug Fixes + +* header btn menu item padding fix ([6c5bde3](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6c5bde357fb52547c19f5a8432a00a9172ecad77)) +* suite header styles ([c4d7b52](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c4d7b525b3bd397e6bc27f4c1d0016f6b1d1be12)) + + + + + +# [4.0.0-v4-Carbon11.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.31...v4.0.0-v4-Carbon11.0) (2024-07-25) + + +### Bug Fixes + +* (table) inline action storybook example fixed ([77961dc](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/77961dcb749210a2737f0abfd3ce8aab20ce6730)) +* complete for Icon Dropdown ([1781f66](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1781f66393df5d14d28eb548f12c5e9e0f1e8721)) +* datepicker exparimental carbon 11 fix ([f8cb2a1](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f8cb2a11f20729d291e25abb47dbbb05e33f7344)) +* fix tooltip issue on FlyoutMenu ([b9b2a82](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b9b2a824563fc432c35c81cde13d4e7eeee83cd5)) +* fix tooltip issue on table card ([20e6d2e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/20e6d2e54ff842587f79ee7575d8031588aa55c9)) +* fix tooltip style issue on date time picker ([6836655](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/683665509126fb3815e5e2f07e0046c1814db788)) +* flyout menu fixes ([c164c65](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c164c653671d8f5f8842c03452a2ab90ea2c7bc4)) +* flyout menu in rtl ([21fbc1c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/21fbc1ce6c162960fb8d1ef1f5d214b967e3d2fd)) +* fonts and overflow-menu imports added to styles.scss ([ecbd9b9](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/ecbd9b9e2e65f6ffd0258995bb6c0a0b73104472)) +* header and overflow-menu styles ([1cc94cc](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1cc94ccb68724b70b3c9fc06f6f882b1724327b3)) +* header items and submenu style ([4300924](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/43009248a13177333c4c2714c591274d718de605)) +* header styles ([0406b69](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/0406b6909cd1f81ffdb18fb3a411b28f29f0cc3a)) +* hotspot content style ([530c7a0](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/530c7a0a1b722fdafb17205f54588175d9522642)) +* hotspot text input style fix ([52bf382](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/52bf382925d89f00dfae7aa95f82ead124d07ff8)) +* icon switch rtl style fix ([ed2334a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/ed2334a9131d323cc839db67384ae1eab4b064e1)) +* icon switch style ([a0c518c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a0c518c868d78b9d15ea93b725544e280404d0b9)) +* image hotspots styles ([dc73f20](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/dc73f20cdfb652144d4ac98d217b5c85193a398c)) +* mini-units usage removed ([482b8e9](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/482b8e9691012fa49e4513e1ea6b2dda0580194c)) +* modal carbon 11 upgrade issue fixing ([836c52b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/836c52b00fc918ec5545af83a76348e7561a6fef)) +* modal image gallery delete button issue fixed ([518036e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/518036ee60c3cb47a1c655a27d927f52c1122c3b)) +* moving flyout menu var to be scoped to flyout-menu ([6b9b4c9](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6b9b4c9f4ae073ba6717ac3f917a06d5c4f2d9ff)) +* multiselect carbon 11 fix ([7699aec](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/7699aecfbca3886236cee8e5162c5a8f8fb7572c)) +* navigation bar component ([1499162](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/1499162f19fad19e985c5e545ea3815c0c8e2116)) +* page-title-bar ([c0f468c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c0f468c3d89b179cf88f822c82ed6dff6b668499)) +* page-title-bar knobs ([2a82d2e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/2a82d2e4125ad470a689eb850908abf2c3e22a00)) +* show tooltip on datetimepicker ([c99b51a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c99b51a5a3848b3842ccfdcae0f9baca00d888f4)) +* side-panel ([a3ca6fe](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a3ca6fe366e1c5b719bcad95e1f35f3c92bd113b)) +* table carbon 11 css fixing ([b992d8b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b992d8b8320eb3440ce0ba678c25b61063c7d079)) +* table header title spacing issue ([eb58e9b](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/eb58e9bc0064acd4ab72a46babfd92dfe411bf09)) +* table row action issue ([75d5022](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/75d5022f8d708e259e68b3846e03ff22d44a4a8b)) +* table sorting carbon 11 fix ([7aba7a6](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/7aba7a6f6519f50659a71b3fd35542c9572dc37a)) +* thresold item ([d24aea9](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d24aea90cd8bbd6dc22c044f76ebd257c8871ba5)) + + +### Features + +* add tooltip to the tablecard column ([a7d8d7c](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a7d8d7cecb8eaa5e199d56c88b73b13238d560b6)) +* deploy storybook to github page ([df3f40e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/df3f40e34b91dbeafe8ca3e8ba154fc22a7332f1)) +* override the default behaviour of handledataitemedit ([85ba9e7](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/85ba9e79d2ea6e3b6c3827e4c67e1026e2df4cb2)) diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js index 9ea462dcc7..68b8728f89 100644 --- a/packages/react/babel.config.js +++ b/packages/react/babel.config.js @@ -27,15 +27,7 @@ module.exports = function generateConfig(api) { 'babel-plugin-lodash', 'babel-plugin-styled-components', 'babel-plugin-react-docgen', - '@babel/plugin-syntax-dynamic-import', '@babel/plugin-syntax-import-meta', - [ - '@babel/plugin-proposal-class-properties', - { - loose: false, - }, - ], - '@babel/plugin-proposal-json-strings', [ '@babel/plugin-proposal-decorators', { @@ -43,19 +35,17 @@ module.exports = function generateConfig(api) { }, ], '@babel/plugin-proposal-function-sent', - '@babel/plugin-proposal-export-namespace-from', - '@babel/plugin-proposal-numeric-separator', '@babel/plugin-proposal-throw-expressions', + '@babel/plugin-transform-export-namespace-from', '@babel/plugin-proposal-export-default-from', - '@babel/plugin-proposal-logical-assignment-operators', - '@babel/plugin-proposal-optional-chaining', + '@babel/plugin-transform-logical-assignment-operators', + '@babel/plugin-transform-optional-chaining', [ '@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal', }, ], - '@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-do-expressions', '@babel/plugin-transform-runtime', 'dev-expression', diff --git a/packages/react/config/jest/setupTest.js b/packages/react/config/jest/setupTest.js index 9a02aab3ee..274107f9a2 100644 --- a/packages/react/config/jest/setupTest.js +++ b/packages/react/config/jest/setupTest.js @@ -1,7 +1,7 @@ /* eslint-disable import/no-extraneous-dependencies */ import 'jest-styled-components'; import '@testing-library/jest-dom'; -import { resetIdCounter } from 'downshift'; +// import { resetIdCounter } from 'downshift'; import * as uniqueHook from '../../src/hooks/useUniqueId'; @@ -34,7 +34,7 @@ beforeEach(() => { jest.spyOn(uniqueHook, 'useUniqueId').mockImplementation(() => undefined); // Ensure that downshift's internal ID is always 0, otherwise snapshots will change unnecessarily when unrelated snaps are regenerated. - resetIdCounter(); + // resetIdCounter(); // carbon v10.52 adds matchMedia which needs to be mocked in tests, wrapped in if otherwise breaks ssr test if (typeof window !== 'undefined') { diff --git a/packages/react/cypress/plugins/index.js b/packages/react/cypress/plugins/index.js index 80145ded41..d2e61706f9 100644 --- a/packages/react/cypress/plugins/index.js +++ b/packages/react/cypress/plugins/index.js @@ -65,7 +65,7 @@ const webpackConfig = { }, }, { - loader: 'fast-sass-loader', + loader: 'sass-loader', options: { includePaths: [path.resolve(__dirname, 'node_modules')], }, diff --git a/packages/react/docs/guides/versioning.md b/packages/react/docs/guides/versioning.md index 15fc8baa18..6630905667 100644 --- a/packages/react/docs/guides/versioning.md +++ b/packages/react/docs/guides/versioning.md @@ -185,7 +185,7 @@ ExampleComponent.propTypes = { semver bump: **major** ```diff -import { SomeComponent } from 'carbon-components-react'; +import { SomeComponent } from '@carbon/react'; function ExampleComponent() { function onChange(arg) { @@ -203,7 +203,7 @@ function ExampleComponent() { semver bump: **minor** ```diff -import { SomeComponent } from 'carbon-components-react'; +import { SomeComponent } from '@carbon/react'; function ExampleComponent() { - function onChange(a, b) { @@ -220,7 +220,7 @@ function ExampleComponent() { semver bump: **major** ```diff -import { SomeComponent } from 'carbon-components-react'; +import { SomeComponent } from '@carbon/react'; function ExampleComponent() { - function onChange(a, b, c) { diff --git a/packages/react/examples/codesandbox/package.json b/packages/react/examples/codesandbox/package.json index e2768264ab..5b6aeaaa8f 100644 --- a/packages/react/examples/codesandbox/package.json +++ b/packages/react/examples/codesandbox/package.json @@ -5,8 +5,8 @@ "dependencies": { "carbon-addons-iot-react": "next", "d3": "^7.0.0", - "react": "^16.8.6", - "react-dom": "^16.8.6", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-scripts": "4.0.1" }, "scripts": { diff --git a/packages/react/examples/codesandbox/src/index.js b/packages/react/examples/codesandbox/src/index.js index daab5e1e61..58aab3d498 100644 --- a/packages/react/examples/codesandbox/src/index.js +++ b/packages/react/examples/codesandbox/src/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { Button } from 'carbon-addons-iot-react'; import 'carbon-addons-iot-react/css/carbon-addons-iot-react.css'; @@ -10,4 +10,7 @@ const App = () => ( ); -render(, document.getElementById('root')); +const container = document.getElementById('root'); +const root = createRoot(container); + +root.render(); diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js index 7b12d0e554..32281e092f 100644 --- a/packages/react/jest.config.js +++ b/packages/react/jest.config.js @@ -116,7 +116,7 @@ module.exports = { ], testURL: 'http://localhost', transform: { - '^.+\\.story\\.jsx?$': '@storybook/addon-storyshots/injectFileName', + // '^.+\\.story\\.jsx?$': '@storybook/addon-storyshots/injectFileName', '^.+\\.jsx?$': 'babel-jest', '^.+\\.s?css$': '/config/jest/cssTransform.js', '^(?!.*\\.(js|jsx|css|json)$)': '/config/jest/fileTransform.js', @@ -133,6 +133,6 @@ module.exports = { moduleNameMapper: { // rewrite carbon-components(-react) es imports to lib/cjs imports because jest doesn't support es modules '@carbon/icons-react/es/(.*)': '@carbon/icons-react/lib/$1', - 'carbon-components-react/es/(.*)': 'carbon-components-react/lib/$1', + '@carbon/react/es/(.*)': '@carbon/react/lib/$1', }, }; diff --git a/packages/react/package.json b/packages/react/package.json index 47ac1b4dd6..2c33088405 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -22,21 +22,21 @@ }, "homepage": "https://carbon-design-system.github.io/carbon-addons-iot-react", "scripts": { - "build": "yarn svg-convert && cross-env BABEL_ENV='production' NODE_ENV='production' yarn build:pre && rollup -c && yarn build:post", + "build": "yarn svg-convert && cross-env BABEL_ENV='production' NODE_ENV='production' yarn build:pre && rollup -c --bundleConfigAsCjs && yarn build:post", "build:pre": "yarn test:engines && rimraf lib es umd css scss tmp storybook-static", "build:post": "rimraf tmp", - "build:storybook": " yarn test:engines && cross-env NODE_OPTIONS=\"--max-old-space-size=16384\" build-storybook -s public/production", + "build:storybook": " yarn test:engines && cross-env NODE_OPTIONS=\"--max-old-space-size=16384\" storybook build public/production", "format": "prettier --write \"**/*.{scss,css,js,jsx,md,ts}\"", "format:check": "prettier --check \"**/*.{scss,css,js,jsx,md,ts}\" --loglevel warn", "format:diff": "prettier --list-different \"**/*.{scss,css,js,jsx,md,ts}\"", "lint": "yarn lint:javascript && yarn lint:stylelint", "lint:javascript": "eslint --ext .jsx --ext .js .", - "lint:stylelint": "stylelint './src/**/*.scss' --syntax scss --ignorePath .gitignore --custom-formatter ./config/stylelint/sassMsgFormatter.js", + "lint:stylelint": "stylelint './src/**/*.scss' --ignorePath .gitignore --custom-formatter ./config/stylelint/sassMsgFormatter.js", "pre-commit": "yarn svg-convert && yarn lint-staged", "pre-push": "yarn reports:clean && yarn test:base && yarn test:e2e && yarn reports", "postinstall": "ibmtelemetry --config=telemetry.yml", "start": "yarn test:engines && yarn storybook", - "storybook": "yarn test:engines && start-storybook -p 3000 -s public/development", + "storybook": "yarn test:engines && storybook dev -p 3000 public/development", "svg-convert": "svgr --ext jsx -d src/icons/components src/icons/svg && prettier --write src/icons/components/index.jsx && eslint --fix --ext .jsx src/icons/components", "test": "yarn test:engines && yarn test:a11y && yarn test:base", "test:base": "yarn test:engines && cross-env TZ=America/Chicago jest --no-watchman --testPathPattern='.*\\.test\\.js(x)?' --coverage --colors --maxWorkers=50%", @@ -68,7 +68,16 @@ "stylelint-scss" ], "rules": { - "declaration-property-unit-blacklist": [ + "no-invalid-position-at-import-rule": [ + true, + { + "ignoreAtRules": [ + "use", + "forward" + ] + } + ], + "declaration-property-unit-disallowed-list": [ { "font-size": [ "em", @@ -92,7 +101,7 @@ "severity": "error" } ], - "declaration-property-value-blacklist": [ + "declaration-property-value-disallowed-list": [ { "color": [ "/^#/", @@ -149,10 +158,6 @@ "src/components/SuiteHeader/util/uiresources.js", "src/components/FileUploader/stories/*.jsx", "src/components/Table/AsyncTable/*.js?(x)", - "src/components/WizardInline/**/*.js?(x)", - "src/components/Page/PageHero.jsx", - "src/components/Page/EditPage.jsx", - "src/components/Dashboard/Dashboard.jsx", "src/components/Dashboard/CardRenderer.jsx", "src/components/MapCard/storyFiles/*.jsx", "src/components/Table/Table.test.helpers.jsx", @@ -166,31 +171,33 @@ "statements": 90 }, "dependencies": { - "@babel/runtime": "^7.10.2", - "@carbon/charts": "^0.58.2", - "@carbon/charts-react": "^0.58.2", - "@carbon/colors": "^10.37.4", - "@carbon/icons-react": "^10.49.5", - "@carbon/layout": "^10.37.4", - "@carbon/motion": "^10.29.4", - "@carbon/pictograms-react": "^11.63.0", - "@carbon/themes": "^10.55.5", + "@babel/plugin-transform-optional-chaining": "^7.24.7", + "@babel/runtime": "^7.25.6", + "@carbon/charts": "^1.22.0", + "@carbon/charts-react": "^1.22.0", + "@carbon/colors": "^11.23.1", + "@carbon/icons-react": "^11.52.0", + "@carbon/layout": "^11.23.1", + "@carbon/pictograms-react": "^11.63.1", + "@carbon/react": "^1.70.0", + "@carbon/telemetry": "^0.1.0", + "@carbon/themes": "^11.42.0", "@codemirror/lang-css": "^6.3.0", "@codemirror/lang-javascript": "^6.2.2", "@codemirror/lang-json": "^6.0.1", - "@ibm/telemetry-js": "^1.6.0", + "@ibm/telemetry-js": "^1.5.0", "@monaco-editor/react": "4.4.5", "@uiw/codemirror-themes": "^4.23.3", "@uiw/react-codemirror": "^4.23.3", - "carbon-components": "^10.58.12", - "carbon-components-react": "^7.59.24", "carbon-icons": "^7.0.7", - "classnames": "^2.5.1", + "classnames": "^2.2.5", "core-js": "3.26.1", "dayjs": "^1.10.4", "immutability-helper": "^3.1.1", "js-file-download": "^0.4.12", "lodash-es": "^4.17.21", + "monaco-editor": "^0.52.0", + "monaco-editor-webpack-plugin": "^7.1.0", "object-hash": "^3.0.0", "prop-types": "^15.8.1", "react-dnd": "14.0.2", @@ -199,7 +206,7 @@ "react-helmet-async": "^1.0.9", "react-window": "^1.8.10", "scroll-into-view-if-needed": "^2.2.31", - "styled-components": "^4.1.3", + "styled-components": "^6.1.13", "thenby": "^1.3.4", "use-deep-compare-effect": "^1.2.0", "use-lang-direction": "^0.2.0", @@ -209,52 +216,47 @@ }, "peerDependencies": { "d3": "^7.0", - "react": ">=16.14.0", - "react-dom": ">=16.14.0" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { "@4tw/cypress-drag-drop": "^1.8.1", - "@babel/core": "^7.13.16", - "@babel/helper-builder-react-jsx": "^7.12.13", - "@babel/plugin-proposal-class-properties": "^7.13.0", - "@babel/plugin-proposal-decorators": "^7.13.15", - "@babel/plugin-proposal-do-expressions": "^7.12.13", - "@babel/plugin-proposal-export-default-from": "^7.12.13", - "@babel/plugin-proposal-export-namespace-from": "^7.12.13", - "@babel/plugin-proposal-function-sent": "^7.12.13", - "@babel/plugin-proposal-json-strings": "^7.13.8", - "@babel/plugin-proposal-logical-assignment-operators": "^7.13.8", - "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8", - "@babel/plugin-proposal-numeric-separator": "^7.12.13", - "@babel/plugin-proposal-optional-chaining": "^7.13.12", - "@babel/plugin-proposal-pipeline-operator": "^7.12.13", - "@babel/plugin-proposal-throw-expressions": "^7.12.13", - "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@babel/core": "^7.25.2", + "@babel/helper-builder-react-jsx": "^7.24.7", + "@babel/plugin-proposal-decorators": "^7.24.7", + "@babel/plugin-proposal-do-expressions": "^7.24.7", + "@babel/plugin-proposal-export-default-from": "^7.24.7", + "@babel/plugin-proposal-function-sent": "^7.24.7", + "@babel/plugin-proposal-pipeline-operator": "^7.24.7", + "@babel/plugin-proposal-throw-expressions": "^7.24.7", "@babel/plugin-syntax-import-meta": "^7.10.4", - "@babel/plugin-transform-runtime": "^7.13.15", + "@babel/plugin-transform-class-properties": "^7.24.7", + "@babel/plugin-transform-runtime": "^7.24.7", "@babel/polyfill": "^7.12.1", "@babel/preset-env": "^7.13.15", - "@babel/preset-flow": "^7.13.13", - "@babel/preset-react": "^7.13.13", + "@babel/preset-flow": "^7.24.7", + "@babel/preset-react": "^7.24.7", "@commitlint/cli": "^7.6.1", "@commitlint/config-conventional": "^7.6.0", "@cypress/code-coverage": "3.9.12", "@cypress/react": "5.12.1", "@cypress/skip-test": "^2.6.1", "@cypress/webpack-dev-server": "1.8.0", - "@rollup/plugin-babel": "^5.3.0", + "@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-commonjs": "^17.1.0", "@rollup/plugin-json": "^4.1.0", - "@rollup/plugin-node-resolve": "^11.2.1", - "@rollup/plugin-replace": "^2.3.3", - "@storybook/addon-a11y": "^6.2.3", - "@storybook/addon-actions": "^6.2.3", - "@storybook/addon-docs": "^6.2.3", - "@storybook/addon-knobs": "^6.2.3", - "@storybook/addon-links": "^6.2.3", - "@storybook/addon-storyshots": "^6.2.3", - "@storybook/addons": "^6.2.3", - "@storybook/react": "^6.2.3", + "@rollup/plugin-node-resolve": "^15.3.0", + "@rollup/plugin-replace": "^5.0.7", + "@storybook/addon-a11y": "^8.2.6", + "@storybook/addon-actions": "^8.2.6", + "@storybook/addon-docs": "^8.2.6", + "@storybook/addon-knobs": "^8.0.1", + "@storybook/addon-links": "^8.2.6", + "@storybook/addon-webpack5-compiler-babel": "^3.0.3", + "@storybook/addons": "^7.6.17", + "@storybook/cli": "^8.2.6", + "@storybook/react": "^8.2.6", + "@storybook/react-webpack5": "^8.2.6", "@svgr/cli": "^8.1.0", "@testing-library/cypress": "8.0.2", "@testing-library/dom": "7.31.2", @@ -263,10 +265,10 @@ "@testing-library/react-hooks": "^5.1.2", "@testing-library/user-event": "12.8.3", "accessibility-checker": "3.1.38", - "autoprefixer": "^9.8.8", + "autoprefixer": "^10.0.0", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.1.0", - "babel-loader": "^8.2.2", + "babel-loader": "^9.1.3", "babel-plugin-dev-expression": "^0.2.2", "babel-plugin-istanbul": "^6.1.1", "babel-plugin-lodash": "^3.3.4", @@ -278,7 +280,7 @@ "check-node-version": "^4.2.1", "coveralls": "^3.0.2", "cross-env": "^7.0.3", - "css-loader": "^3.6.0", + "css-loader": "^6.0.0", "cypress": "9.2.1", "cypress-file-upload": "^5.0.8", "cypress-image-diff-js": "1.16.1", @@ -302,9 +304,8 @@ "eslint-plugin-react-hooks": "1.7.0", "eslint-plugin-testing-library": "3.9.2", "eslint-plugin-unicorn": "20.1.0", - "fast-sass-loader": "^2.0.1", "file-loader": "^4.0.0", - "html-webpack-plugin": "^4.5.2", + "html-webpack-plugin": "^5.3.2", "husky": "^1.3.1", "jest": "^25.5.1", "jest-environment-jsdom-sixteen": "^1.0.3", @@ -314,34 +315,37 @@ "mockdate": "^3.0.5", "object-assign": "^4.1.1", "ol": "^6.5.0", - "postcss-loader": "^3.0.0", - "prettier": "^2.8.8", - "prettier-config-carbon": "^0.11.0", + "postcss": "^8.4.38", + "postcss-loader": "^6.0.0", + "prettier": "^2.1.2", + "prettier-config-carbon": "^0.4.0", "promise": "^8.0.2", - "react": ">=16.14.0", - "react-dom": ">=16.14.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-is": "^16.13.1", "react-lorem-component": "^0.13.0", "react-test-renderer": "^16.14.0", "rimraf": "^5.0.5", - "rollup": "^2.45.2", + "rollup": "^3.29.5", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-filesize": "^9.1.2", + "rollup-plugin-import-css": "^3.5.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-uglify": "^6.0.4", - "sass": "^1.43.4", - "storybook-addon-rtl": "^0.2.2", - "storybook-addon-turbo-build": "^1.0.1", - "style-loader": "^0.23.1", - "stylelint": "^10.1.0", - "stylelint-config-recommended-scss": "^3.3.0", - "stylelint-scss": "^3.10.0", - "webpack": "^4.46.0", - "webpack-dev-server": "^3.11.3", + "sass": "^1.77.4", + "sass-loader": "^14.2.1", + "storybook-addon-rtl": "^1.0.0", + "storybook-addon-turbo-build": "^2.0.1", + "style-loader": "^3.0.0", + "stylelint": "^16.6.0", + "stylelint-config-recommended-scss": "^14.1.0", + "stylelint-scss": "^6.4.1", + "webpack": "^5.92.0", + "webpack-dev-server": "^4.15.0", "whatwg-fetch": "^3.0.0" }, "sideEffects": false, - "version": "2.154.0-next.41", + "version": "4.0.1-v4-Carbon11.0", "resolutions": { "chokidar": "3.3.1", "react-grid-layout": "1.2.2", diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.mjs similarity index 91% rename from packages/react/rollup.config.js rename to packages/react/rollup.config.mjs index 91055db56b..d8a9a5da3c 100644 --- a/packages/react/rollup.config.js +++ b/packages/react/rollup.config.mjs @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import babel from '@rollup/plugin-babel'; import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; @@ -8,6 +9,7 @@ import postcss from 'rollup-plugin-postcss'; import copy from 'rollup-plugin-copy'; import autoprefixer from 'autoprefixer'; import json from '@rollup/plugin-json'; +import css from 'rollup-plugin-import-css'; const packageJson = require('./package.json'); @@ -54,6 +56,7 @@ export default [ babelHelpers: 'runtime', }), replace({ + preventAssignment: true, 'process.env.NODE_ENV': JSON.stringify(env), }), json({ @@ -71,6 +74,7 @@ export default [ // generate a named export for every property of the JSON object namedExports: true, // Default: true }), + css(), ...prodSettings, ], }, @@ -87,9 +91,15 @@ export default [ postcss({ extract: 'lib/css/carbon-addons-iot-react.css', sourceMap: true, - use: ['sass'], + use: { + sass: { + // Include necessary paths for Sass to resolve @use and @import + includePaths: ['../../node_modules'], + }, + }, plugins: [autoprefixer], }), + css(), ], }, // Copy all styles to various directories. @@ -101,14 +111,15 @@ export default [ file: 'umd/carbon-addons-iot-react.js', name: 'CarbonAddonsIoTReact', format: 'umd', + inlineDynamicImports: true, globals: { classnames: 'classNames', 'prop-types': 'PropTypes', react: 'React', 'react-dom': 'ReactDOM', '@carbon/icons-react': 'CarbonIconsReact', - 'carbon-components': 'CarbonComponents', - 'carbon-components-react': 'CarbonComponentsReact', + '@carbon/react': 'CarbonReact', + '@carbon/charts': 'CarbonCharts', 'styled-components': 'styled', d3: 'd3', }, @@ -119,10 +130,10 @@ export default [ 'react-dom', 'styled-components', 'prop-types', - 'carbon-components-react', '@carbon/icons', + '@carbon/react', + '@carbon/charts', '@carbon/icons-react', - 'carbon-components', 'd3', ], plugins: [ @@ -159,6 +170,7 @@ export default [ // generate a named export for every property of the JSON object namedExports: true, // Default: true }), + css(), copy({ flatten: false, targets: [ diff --git a/packages/react/src/components/Accordion/Accordion.story.jsx b/packages/react/src/components/Accordion/Accordion.story.jsx index a242ea0a7d..3d178f5096 100644 --- a/packages/react/src/components/Accordion/Accordion.story.jsx +++ b/packages/react/src/components/Accordion/Accordion.story.jsx @@ -10,18 +10,13 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, number, select, text } from '@storybook/addon-knobs'; +import { Accordion, AccordionItem, AccordionSkeleton } from '@carbon/react'; import Button from '../Button'; -import { Accordion, AccordionItem, AccordionSkeleton } from '.'; - export default { title: '3 - Carbon/Accordion', component: Accordion, - subcomponents: { - AccordionItem, - AccordionSkeleton, - }, decorators: [withKnobs], }; @@ -68,15 +63,15 @@ const props = { }; const sizes = { - 'Extra large size (xl)': 'xl', - 'Default size': undefined, + 'Large size (lg)': 'lg', + 'Default size (md)': 'md', 'Small size (sm)': 'sm', }; export const playground = () => ( { diff --git a/packages/react/src/components/Accordion/_accordion.scss b/packages/react/src/components/Accordion/_accordion.scss index fd7235350d..3f3f5d4ea0 100644 --- a/packages/react/src/components/Accordion/_accordion.scss +++ b/packages/react/src/components/Accordion/_accordion.scss @@ -1,5 +1,6 @@ -@import '~carbon-components/scss/globals/scss/vars'; -@import '~carbon-components/scss/components/accordion/accordion'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/components/accordion'; [dir='rtl'] .#{$prefix}--accordion__title { margin: 0 $spacing-05 0 0; diff --git a/packages/react/src/components/Accordion/index.js b/packages/react/src/components/Accordion/index.js index 33b1a69f7b..59190a06dc 100644 --- a/packages/react/src/components/Accordion/index.js +++ b/packages/react/src/components/Accordion/index.js @@ -1,6 +1,4 @@ -import Accordion from 'carbon-components-react/es/components/Accordion'; -import AccordionItem from 'carbon-components-react/es/components/AccordionItem'; -import AccordionSkeleton from 'carbon-components-react/es/components/Accordion/Accordion.Skeleton'; +import { Accordion, AccordionItem, AccordionSkeleton } from '@carbon/react'; import AccordionItemDefer from './AccordionItemDefer'; diff --git a/packages/react/src/components/AddCard/AddCard.jsx b/packages/react/src/components/AddCard/AddCard.jsx index d1c6b77877..eaf21b9565 100644 --- a/packages/react/src/components/AddCard/AddCard.jsx +++ b/packages/react/src/components/AddCard/AddCard.jsx @@ -1,12 +1,13 @@ -import { ClickableTile } from 'carbon-components-react'; +import { ClickableTile } from '@carbon/react'; import PropTypes from 'prop-types'; import React from 'react'; import classnames from 'classnames'; -import { g10 } from '@carbon/themes'; -import { Add20 } from '@carbon/icons-react'; +// import { v10 } from '@carbon/themes'; need to upgrade +import { Add } from '@carbon/react/icons'; import { settings } from '../../constants/Settings'; +// const { g10 } = v10; const { iotPrefix } = settings; const propTypes = { /** Title to show on the card */ @@ -27,7 +28,8 @@ const AddCard = ({ onClick, title, className, testId }) => ( onClick={onClick} >

{title}

- + {/* */} + ); diff --git a/packages/react/src/components/AddCard/_add-card.scss b/packages/react/src/components/AddCard/_add-card.scss index ddc55a063f..8780691cdd 100644 --- a/packages/react/src/components/AddCard/_add-card.scss +++ b/packages/react/src/components/AddCard/_add-card.scss @@ -1,13 +1,14 @@ -@import '~carbon-components/scss/globals/scss/vars'; -@import '~carbon-components/scss/globals/scss/layout'; -@import '../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/layout' as *; +@use '@carbon/react/scss/theme' as *; +@use '../../globals/vars' as *; .#{$iot-prefix}-add-card { border: 1px solid transparent; display: inline-flex; flex-direction: column; justify-content: space-between; - background-color: $ui-01; + background-color: $layer-01; min-height: 8rem; min-width: 8.5rem; max-width: 18.75rem; @@ -19,5 +20,5 @@ } .#{$iot-prefix}-addcard-title { - color: $text-01; + color: $text-primary; } diff --git a/packages/react/src/components/BarChartCard/BarChartCard.story.jsx b/packages/react/src/components/BarChartCard/BarChartCard.story.jsx index 5af4a5a7cb..ca38a0126e 100644 --- a/packages/react/src/components/BarChartCard/BarChartCard.story.jsx +++ b/packages/react/src/components/BarChartCard/BarChartCard.story.jsx @@ -8,7 +8,7 @@ import { barChartData } from '../../utils/barChartDataSample'; import { getIntervalChartData } from '../../utils/sample'; import BarChartCard from './BarChartCard'; -import BarChartCardREADME from './BarChartCard.mdx'; +// import BarChartCardREADME from './BarChartCard.mdx'; carbon 11 need to check const COLORS = ['blue', 'red', 'green', 'yellow']; @@ -19,12 +19,13 @@ const sizes = Object.keys(CARD_SIZES).filter( const layouts = Object.keys(BAR_CHART_LAYOUTS); export default { - title: __DEV__ ? '1 - Watson IoT/Card/⚠️ BarChartCard' : '1 - Watson IoT/Card/BarChartCard', + // title: __DEV__ ? '1 - Watson IoT/Card/⚠️ BarChartCard' : '1 - Watson IoT/Card/BarChartCard', + title: '1 - Watson IoT/Card/⚠️ BarChartCard', parameters: { component: BarChartCard, - docs: { - page: BarChartCardREADME, - }, + // docs: { + // page: BarChartCardREADME, + // }, //carbon 11 }, }; diff --git a/packages/react/src/components/BarChartCard/_bar-chart-card.scss b/packages/react/src/components/BarChartCard/_bar-chart-card.scss index 951f67fc5f..646882983a 100644 --- a/packages/react/src/components/BarChartCard/_bar-chart-card.scss +++ b/packages/react/src/components/BarChartCard/_bar-chart-card.scss @@ -1,4 +1,6 @@ -@import '../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '../../globals/vars' as *; .#{$iot-prefix}--bar-chart-container { width: 100%; diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.jsx b/packages/react/src/components/Breadcrumb/Breadcrumb.jsx index a7d7c51c04..e6d9c5596c 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.jsx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.jsx @@ -1,11 +1,10 @@ import React, { useState, useEffect, useRef, Children } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { OverflowMenuHorizontal20 } from '@carbon/icons-react'; -import { Breadcrumb as CarbonBreadcrumb } from 'carbon-components-react'; +import { OverflowMenuHorizontal } from '@carbon/react/icons'; +import { Breadcrumb as CarbonBreadcrumb, OverflowMenuItem } from '@carbon/react'; import { OverflowMenu } from '../OverflowMenu'; -import { OverflowMenuItem } from '../OverflowMenuItem'; import { useResize } from '../../internal/UseResizeObserver'; import { settings } from '../../constants/Settings'; @@ -126,7 +125,7 @@ const Breadcrumb = ({ children, className, hasOverflow, testId, disableTruncatio } menuOptionsClass="breadcrumb--overflow-items" > {overflowItems.map((child, i) => ( diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.story.jsx b/packages/react/src/components/Breadcrumb/Breadcrumb.story.jsx index 359b4bbf1e..49549bade9 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.story.jsx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.story.jsx @@ -10,7 +10,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, text, select } from '@storybook/addon-knobs'; -import { BreadcrumbSkeleton, BreadcrumbItem } from 'carbon-components-react'; +import { BreadcrumbSkeleton, BreadcrumbItem } from '@carbon/react'; import { layout05, spacing05 } from '@carbon/layout'; import Breadcrumb from './Breadcrumb'; diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.test.e2e.jsx b/packages/react/src/components/Breadcrumb/Breadcrumb.test.e2e.jsx index aed16d1afb..b9a45917d3 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.test.e2e.jsx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.test.e2e.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { mount } from '@cypress/react'; -import { BreadcrumbItem } from 'carbon-components-react'; +import { BreadcrumbItem } from '@carbon/react'; import Breadcrumb from './Breadcrumb'; diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.test.jsx b/packages/react/src/components/Breadcrumb/Breadcrumb.test.jsx index 7c5803ac1f..904f8f095c 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.test.jsx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { BreadcrumbItem } from 'carbon-components-react'; +import { BreadcrumbItem } from '@carbon/react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/packages/react/src/components/Breadcrumb/_breadcrumb.scss b/packages/react/src/components/Breadcrumb/_breadcrumb.scss index dc97554cfc..f45c8b7fcb 100644 --- a/packages/react/src/components/Breadcrumb/_breadcrumb.scss +++ b/packages/react/src/components/Breadcrumb/_breadcrumb.scss @@ -1,5 +1,9 @@ -@import '~carbon-components/scss/components/breadcrumb/breadcrumb'; -@import '../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/components/breadcrumb' as *; +@use '@carbon/react/scss/components/overflow-menu' as *; +@use '../../globals/vars' as *; .#{$prefix}--breadcrumb { display: flex; @@ -34,7 +38,7 @@ width: auto; & svg { - fill: $link-01; + fill: $link-primary; border-bottom: 1px solid transparent; } @@ -43,7 +47,7 @@ } &:hover svg { - border-color: $link-01; + border-color: $link-primary; } &.#{$prefix}--overflow-menu--open { @@ -77,7 +81,7 @@ background-color: $field-02; &:hover { - background-color: $hover-ui; + background-color: $layer-hover-01; } } @@ -86,6 +90,10 @@ } } +.breadcrumb--overflow-items.#{$prefix}--overflow-menu-options { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); +} + html[dir='rtl'] .breadcrumb--container { .#{$prefix}--breadcrumb-item::after, .breadcrumb--overflow:after, diff --git a/packages/react/src/components/Breadcrumb/index.js b/packages/react/src/components/Breadcrumb/index.js index c7bc2605fb..81ddd6699d 100644 --- a/packages/react/src/components/Breadcrumb/index.js +++ b/packages/react/src/components/Breadcrumb/index.js @@ -1,3 +1,3 @@ -export { BreadcrumbItem, BreadcrumbSkeleton } from 'carbon-components-react'; +export { BreadcrumbItem, BreadcrumbSkeleton } from '@carbon/react'; export default from './Breadcrumb'; diff --git a/packages/react/src/components/Button/Button.jsx b/packages/react/src/components/Button/Button.jsx index 0488ff2f2d..7f12d94f6d 100644 --- a/packages/react/src/components/Button/Button.jsx +++ b/packages/react/src/components/Button/Button.jsx @@ -1,12 +1,22 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Button as CarbonButton, Loading } from 'carbon-components-react'; -import { ButtonKinds } from 'carbon-components-react/es/prop-types/types'; +import { Button as CarbonButton, Loading } from '@carbon/react'; import classnames from 'classnames'; import { settings } from '../../constants/Settings'; import deprecate from '../../internal/deprecate'; +const ButtonKinds = [ + 'primary', + 'secondary', + 'tertiary', + 'ghost', + 'danger', + 'danger--primary', + 'danger--ghost', + 'danger--tertiary', +]; + const { iotPrefix } = settings; const propTypes = { /** Show loading spinner, only new prop */ @@ -26,7 +36,6 @@ const propTypes = { hasIconOnly: PropTypes.bool, /** Toggle selected styling for buttons of kind=icon-selection */ selected: PropTypes.bool, - // TODO: remove deprecated testID prop in v3 // eslint-disable-next-line react/require-default-props testID: deprecate( @@ -87,7 +96,6 @@ const Button = React.forwardRef((props, ref) => { {kind === 'icon-selection' && !disabled && recommended ? (
) : null} - {children} ); diff --git a/packages/react/src/components/Button/Button.story.jsx b/packages/react/src/components/Button/Button.story.jsx index 3784543cc9..e290302585 100644 --- a/packages/react/src/components/Button/Button.story.jsx +++ b/packages/react/src/components/Button/Button.story.jsx @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; -import { settings } from 'carbon-components'; -import { Add16, Search16 } from '@carbon/icons-react'; -import { ButtonSkeleton } from 'carbon-components-react'; +import { Add, Search } from '@carbon/react/icons'; +import { ButtonSkeleton } from '@carbon/react'; + +import { settings } from '../../constants/Settings'; import Button from './Button'; @@ -15,13 +16,13 @@ const { prefix } = settings; const icons = { None: 'None', - 'Add (Add16 from `@carbon/icons-react`)': 'Add16', - 'Search (Search16 from `@carbon/icons-react`)': 'Search16', + 'Add (Add16 from `@carbon/icons-react`)': 'Add', + 'Search (Search16 from `@carbon/icons-react`)': 'Search', }; const iconMap = { - Add16, - Search16, + Add, + Search, }; const kinds = { @@ -29,15 +30,14 @@ const kinds = { 'Secondary button (secondary)': 'secondary', 'Tertiary button (tertiary)': 'tertiary', 'Danger button (danger)': 'danger', + 'Danger ghost button (danger--ghost)': 'danger--ghost', + 'Danger tertiary button (danger--tertiary)': 'danger--tertiary', + 'Danger primary button (danger--primary)': 'danger--primary', 'Ghost button (ghost)': 'ghost', 'Icon Selection button (ghost)': 'icon-selection', }; -const sizes = { - Default: 'default', - Field: 'field', - Small: 'small', -}; +const sizes = ['lg', 'md', 'sm', 'xl', '2xl']; const props = { regular: () => { @@ -45,8 +45,9 @@ const props = { return { className: 'some-class', kind: select('Button kind (kind)', kinds, 'primary'), + loading: boolean('Loading (loading)', false), disabled: boolean('Disabled (disabled)', false), - size: select('Button size (size)', sizes, 'default'), + size: select('Button size (size)', sizes, 'lg'), renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse, iconDescription: text('Icon description (iconDescription)', 'Button icon'), onClick: action('onClick'), @@ -54,7 +55,7 @@ const props = { }; }, iconOnly: () => { - const iconToUse = iconMap[select('Icon (icon)', icons, 'Add16')]; + const iconToUse = iconMap[select('Icon (icon)', icons, 'Add')]; return { className: 'some-class', kind: select( @@ -68,7 +69,7 @@ const props = { 'primary' ), disabled: boolean('Disabled (disabled)', false), - size: select('Button size (size)', sizes, 'default'), + size: select('Button size (size)', sizes, 'lg'), renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse, iconDescription: text('Icon description (iconDescription)', 'Button icon'), tooltipPosition: select( @@ -90,7 +91,7 @@ const props = { return { className: 'some-class', disabled: boolean('Disabled (disabled)', false), - size: select('Button size (size)', sizes, 'default'), + size: select('Button size (size)', sizes, 'lg'), renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse, iconDescription: text('Icon description (iconDescription)', 'Button icon'), onClick: action('onClick'), @@ -98,14 +99,15 @@ const props = { }; }, iconSelection: () => { - const iconToUse = iconMap[select('Icon (icon)', icons, 'Add16')]; + const iconToUse = iconMap[select('Icon (icon)', icons, 'Add')]; + console.log(iconToUse, 'iconToUse'); return { className: 'some-class', kind: 'icon-selection', recommended: boolean('Recommended (recommended)', false), hasIconOnly: true, disabled: boolean('Disabled (disabled)', false), - size: select('Button size (size)', sizes, 'default'), + size: select('Button size (size)', sizes, 'lg'), renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse, iconDescription: text('Icon description (iconDescription)', 'Button icon'), tooltipPosition: select( @@ -273,7 +275,7 @@ export const Skeleton = () => (     - +
); diff --git a/packages/react/src/components/Button/Button.test.jsx b/packages/react/src/components/Button/Button.test.jsx index 28b2975508..c4544ecfd3 100644 --- a/packages/react/src/components/Button/Button.test.jsx +++ b/packages/react/src/components/Button/Button.test.jsx @@ -1,8 +1,8 @@ import React from 'react'; import { mount } from 'enzyme'; -import { Loading } from 'carbon-components-react'; +import { Loading } from '@carbon/react'; import { render, screen } from '@testing-library/react'; -import { Add16 } from '@carbon/icons-react'; +import { Add } from '@carbon/react/icons'; import { settings } from '../../constants/Settings'; @@ -16,7 +16,7 @@ const commonProps = { const iconSelectionCommonProps = { kind: 'icon-selection', - renderIcon: Add16, + renderIcon: Add, iconDescription: 'Button icon', }; diff --git a/packages/react/src/components/Button/_button.scss b/packages/react/src/components/Button/_button.scss index cf0c38617e..77d20dd482 100644 --- a/packages/react/src/components/Button/_button.scss +++ b/packages/react/src/components/Button/_button.scss @@ -1,11 +1,13 @@ -@import '~carbon-components/scss/components/button/button'; -@import '../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/components/button' as *; +@use '@carbon/react/scss/utilities/convert'; +@use '../../globals/vars' as *; .#{$iot-prefix}--btn { - justify-content: flex-start; - .#{$prefix}--loading { - margin-top: -$spacing-05; margin-bottom: -$spacing-05; margin-right: $spacing-03; @@ -15,14 +17,14 @@ } } .#{$prefix}--loading__stroke { - stroke: $carbon--gray-50; + stroke: $gray-50; } } .#{$iot-prefix}--btn.#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only:not( .#{$iot-prefix}--btn-icon-selection--selected ).#{$iot-prefix}--btn-icon-selection--recommended { - border: 1px solid $support-02; + border: 1px solid $support-success; } .#{$iot-prefix}--btn:not(.#{$iot-prefix}--btn-icon-selection--selected) @@ -32,7 +34,7 @@ right: 0; border-width: $spacing-04 0 0 $spacing-04; border-style: solid; - border-color: $support-02 transparent; + border-color: $support-success transparent; } .#{$iot-prefix}--btn.#{$prefix}--btn--field:not(.#{$iot-prefix}--btn-icon-selection--selected) @@ -52,22 +54,22 @@ .#{$iot-prefix}--btn.#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only.#{$iot-prefix}--btn-icon-selection svg path { - fill: $icon-01; + fill: $icon-primary; outline-color: transparent; } .#{$iot-prefix}--btn.#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only.#{$iot-prefix}--btn-icon-selection.#{$iot-prefix}--btn-icon-selection--selected svg path { - fill: $interactive-01; + fill: $button-primary; outline-color: transparent; } [dir='rtl'] { .#{$iot-prefix}--btn:not(.#{$prefix}--btn--icon-only) { text-align: right; - /* stylelint-disable-next-line declaration-property-unit-blacklist, copied from carbon and inverted */ - padding: calc(0.875rem - 3px) 15px calc(0.875rem - 3px) 63px; + /* stylelint-disable-next-line declaration-property-unit-disallowed-list, copied from carbon and inverted */ + padding: 0.875rem 15px 0.875rem 63px; } .#{$prefix}--btn .#{$prefix}--btn__icon { @@ -75,21 +77,21 @@ right: initial; } - // The padding $spacing-05 was added globally to all ghost button sizes at some point, - // but it should probably only be applied to the default size so we have added exceptions here - // once we found they were needed in order not to break any existing functionality. - // For Carbon v.11 when the button sizes are adjusted we should take the oportunity to - // see if we can remove this global ghost padding. - .#{$iot-prefix}--btn.#{$prefix}--btn--ghost { - &:not(.#{$prefix}--btn--sm.#{$prefix}--btn--icon-only):not( - .#{$iot-prefix}--menu-button__trigger - ) { - padding-left: $spacing-05; - padding-right: $spacing-05; - } - } + // // The padding $spacing-05 was added globally to all ghost button sizes at some point, + // // but it should probably only be applied to the default size so we have added exceptions here + // // once we found they were needed in order not to break any existing functionality. + // // For Carbon v.11 when the button sizes are adjusted we should take the oportunity to + // // see if we can remove this global ghost padding. + // .#{$iot-prefix}--btn.#{$prefix}--btn--ghost { + // &:not(.#{$prefix}--btn--sm.#{$prefix}--btn--icon-only):not( + // .#{$iot-prefix}--menu-button__trigger + // ) { + // padding-left: $spacing-05; + // padding-right: $spacing-05; + // } + // } .#{$prefix}--btn-set .#{$prefix}--btn:last-of-type:not(:focus) { - box-shadow: rem(1px) 0 0 0 $button-separator; + box-shadow: convert.to-rem(1px) 0 0 0 $button-separator; } } diff --git a/packages/react/src/components/Card/Card.jsx b/packages/react/src/components/Card/Card.jsx index c93f9706bc..4b3b697c9f 100644 --- a/packages/react/src/components/Card/Card.jsx +++ b/packages/react/src/components/Card/Card.jsx @@ -1,5 +1,5 @@ import React, { useCallback, useMemo, useRef, useEffect, useState } from 'react'; -import { SkeletonText } from 'carbon-components-react'; +import { SkeletonText } from '@carbon/react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import warning from 'warning'; diff --git a/packages/react/src/components/Card/Card.story.jsx b/packages/react/src/components/Card/Card.story.jsx index 0d77bc2cc4..ced72020ba 100644 --- a/packages/react/src/components/Card/Card.story.jsx +++ b/packages/react/src/components/Card/Card.story.jsx @@ -1,8 +1,8 @@ import React from 'react'; import { text, select, boolean, object, number } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; -import { Tree16, Add16 } from '@carbon/icons-react'; -import { ContentSwitcher } from 'carbon-components-react'; +import { Tree, Add } from '@carbon/react/icons'; +import { ContentSwitcher } from '@carbon/react'; import { settings } from '../../constants/Settings'; import { CARD_SIZES } from '../../constants/LayoutConstants'; @@ -12,7 +12,7 @@ import Button from '../Button'; import IconSwitch from '../IconSwitch/IconSwitch'; import { INTERVAL_VALUES, RELATIVE_VALUES, PICKER_KINDS } from '../../constants/DateConstants'; -import CardREADME from './Card.mdx'; +// import CardREADME from './Card.mdx'; carbon 11 import Card from './Card'; const { prefix } = settings; @@ -39,9 +39,9 @@ export default { parameters: { component: Card, - docs: { - page: CardREADME, - }, + // docs: { + // page: CardREADME, + // }, }, excludeStories: ['getDataStateProp'], @@ -116,7 +116,7 @@ export const Basic = () => { clone: false, delete: false, })} - renderExpandIcon={Tree16} + renderExpandIcon={Tree} onFocus={action('onFocus')} tabIndex={0} padding={select( @@ -138,7 +138,7 @@ export const WithEllipsedTitleTooltipExternalTooltip = () => { const extraaction = select('extra actions', ['Single', 'Multiple'], 'Single'); const singleExtraAction = { id: 'extrasingleaction', - icon: Add16, + icon: Add, iconDescription: 'Add', callback: action('extra single action icon clicked.'), }; @@ -208,7 +208,7 @@ export const WithEllipsedTitleTooltipExternalTooltip = () => { onClick={action('onClick')} tabIndex={0} footerContent={() => ( - )} @@ -259,7 +259,7 @@ export const BasicWithRenderProp = () => { onClick={action('onClick')} tabIndex={0} footerContent={() => ( - )} @@ -311,7 +311,7 @@ export const WithCustomRangeSelector = () => { WithCustomRangeSelector.storyName = 'with custom range selector'; export const WithDateTimePickerRangeSelector = () => { - const dateTimePickerSetting = select('range', [true, false, 'iconOnly'], 'iconOnly'); + const dateTimePickerSetting = select('range', [true, false], true); return (
{ relativeToTime: '13:30', }, }; - const dateTimePickerSetting = select('range', [true, false, 'iconOnly'], 'iconOnly'); + const dateTimePickerSetting = select('range', [true, false], true); return (
{ delete: false, extra: true, })} - renderExpandIcon={Tree16} + renderExpandIcon={Tree} onFocus={action('onFocus')} tabIndex={0} padding={select( @@ -905,7 +905,7 @@ export const BasicWithCustomAction = () => { 'default' )} footerContent={() => ( - )} @@ -921,14 +921,14 @@ export const BasicWithCustomAction = () => { name="one" onClick={action('Tree icon')} text="Graphical View" - renderIcon={Tree16} + renderIcon={Tree} size="small" /> diff --git a/packages/react/src/components/Card/Card.test.jsx b/packages/react/src/components/Card/Card.test.jsx index fe44dd13be..364a635e24 100644 --- a/packages/react/src/components/Card/Card.test.jsx +++ b/packages/react/src/components/Card/Card.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, fireEvent, screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { Tree16, Add16 } from '@carbon/icons-react'; +import { Tree, Add } from '@carbon/react/icons'; import { CARD_SIZES, CARD_TITLE_HEIGHT, CARD_ACTIONS } from '../../constants/LayoutConstants'; import { settings } from '../../constants/Settings'; @@ -119,13 +119,13 @@ describe('Card', () => { {...cardProps} size={CARD_SIZES.SMALL} availableActions={{ range: true, expand: true }} - renderExpandIcon={Tree16} + renderExpandIcon={Tree} /> ); const button = screen.queryByLabelText('Expand to fullscreen'); - const { container } = render(
); }; diff --git a/packages/react/src/components/Card/CardTitle.jsx b/packages/react/src/components/Card/CardTitle.jsx index f2bdf3fae1..1018fa52a7 100644 --- a/packages/react/src/components/Card/CardTitle.jsx +++ b/packages/react/src/components/Card/CardTitle.jsx @@ -1,8 +1,8 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useRef } from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; -import { Tooltip } from 'carbon-components-react'; +import { ToggleTip } from '../ToggleTip'; import useHasTextOverflow from '../../hooks/useHasTextOverflow'; import { usePopoverPositioning } from '../../hooks/usePopoverPositioning'; import { getTooltipMenuOffset } from '../Tooltip'; @@ -10,9 +10,6 @@ import { settings } from '../../constants/Settings'; const { iotPrefix } = settings; -const SCROLL_EVENT_TIMEOUT = 50; -const isEngagingEventType = (type) => type === 'click' || type === 'keydown'; - const propTypes = { id: PropTypes.string.isRequired, /** Adds an info icon after the title that when clicked shows a tooltip with this content. @@ -52,9 +49,6 @@ export const CardTitle = ( ) => { const titleRef = useRef(); const subTitleRef = useRef(); - const titleTimeoutRef = useRef(); - const subtitleTimeoutRef = useRef(); - const infoTimeoutRef = useRef(); const truncatesTitle = useHasTextOverflow(titleRef, title); const hasExternalTitleTextTooltip = titleTextTooltip; const hasTitleTooltipFromTruncation = truncatesTitle && !titleTextTooltip; @@ -69,127 +63,17 @@ export const CardTitle = ( isOverflowMenu: true, // Needed to preserve default direction (bottom) }); - const [tooltipsState, setTooltipsState] = useState({ - title: false, - subtitle: false, - info: false, - }); - - const handleTitleTooltipState = useCallback((evt, { open }) => { - /* istanbul ignore else */ - if (isEngagingEventType(evt.type)) { - setTooltipsState((prevState) => ({ - ...prevState, - title: open, - })); - } - }, []); - - const handleSubtitleTooltipState = useCallback((evt, { open }) => { - /* istanbul ignore else */ - if (isEngagingEventType(evt.type)) { - setTooltipsState((prevState) => ({ - ...prevState, - subtitle: open, - })); - } - }, []); - - const handleInfoTooltipState = useCallback((evt, { open }) => { - /* istanbul ignore else */ - if (isEngagingEventType(evt.type)) { - setTooltipsState((prevState) => ({ - ...prevState, - info: open, - })); - } - }, []); - - // below statements are ignored due to window event listeners (tested in cypress) - /* istanbul ignore next */ - const handleTitleScroll = useCallback(() => { - setTooltipsState((prevState) => ({ - ...prevState, - title: false, - })); - }, []); - - /* istanbul ignore next */ - const handleSubtitleScroll = useCallback(() => { - setTooltipsState((prevState) => ({ - ...prevState, - subtitle: false, - })); - }, []); - - /* istanbul ignore next */ - const handleInfoScroll = useCallback(() => { - setTooltipsState((prevState) => ({ - ...prevState, - info: false, - })); - }, []); - - /* istanbul ignore next */ - useEffect(() => { - if (tooltipsState.title) { - titleTimeoutRef.current = setTimeout(() => { - window.addEventListener('scroll', handleTitleScroll); - }, SCROLL_EVENT_TIMEOUT); - } else { - window.removeEventListener('scroll', handleTitleScroll); - } - return () => { - window.removeEventListener('scroll', handleTitleScroll); - clearTimeout(titleTimeoutRef.current); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [tooltipsState.title]); - - /* istanbul ignore next */ - useEffect(() => { - if (tooltipsState.subtitle) { - subtitleTimeoutRef.current = setTimeout(() => { - window.addEventListener('scroll', handleSubtitleScroll); - }, SCROLL_EVENT_TIMEOUT); - } else { - window.removeEventListener('scroll', handleSubtitleScroll); - } - - return () => { - window.removeEventListener('scroll', handleSubtitleScroll); - clearTimeout(subtitleTimeoutRef.current); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [tooltipsState.subtitle]); - - /* istanbul ignore next */ - useEffect(() => { - if (tooltipsState.info) { - infoTimeoutRef.current = setTimeout(() => { - window.addEventListener('scroll', handleInfoScroll); - }, SCROLL_EVENT_TIMEOUT); - } else { - window.removeEventListener('scroll', handleInfoScroll); - } - - return () => { - window.removeEventListener('scroll', handleInfoScroll); - clearTimeout(infoTimeoutRef.current); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [tooltipsState.info]); - const renderMainTitle = () => hasTitleTooltipFromTruncation || hasExternalTitleTextTooltip ? ( - - {hasExternalTitleTextTooltip ? ( - <> - {truncatesTitle && ( -

+ {truncatesTitle && ( +

+ {title} +

+ )} +
- {title} -

- )} -
- {titleTextTooltip} -
- - ) : ( - title - )} - + {titleTextTooltip} +
+ + ) : ( + title + ) + } + /> ) : (
!subtitle ? null : hasSubTitleTooltip ? ( - - {subtitle} - + content={subtitle} + /> ) : (
{renderMainTitle()} {hasInfoIconTooltip && ( - - {infoIconTooltip} - + content={infoIconTooltip} + /> )} {renderSubTitle()} diff --git a/packages/react/src/components/Card/CardToolbar.jsx b/packages/react/src/components/Card/CardToolbar.jsx index b734f86a55..5581afb727 100644 --- a/packages/react/src/components/Card/CardToolbar.jsx +++ b/packages/react/src/components/Card/CardToolbar.jsx @@ -1,8 +1,8 @@ import React, { useMemo, useCallback } from 'react'; import PropTypes from 'prop-types'; import { omit, keyBy } from 'lodash-es'; -import { Close16, Popup16, Settings16 } from '@carbon/icons-react'; -import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react'; +import { Close, Popup, Settings } from '@carbon/react/icons'; +import { OverflowMenu, OverflowMenuItem } from '@carbon/react'; import classnames from 'classnames'; import { useLangDirection } from 'use-lang-direction'; @@ -85,7 +85,7 @@ const propTypes = { const defaultProps = { isEditable: false, isExpanded: false, - renderExpandIcon: Popup16, + renderExpandIcon: Popup, className: null, locale: 'en', timeRangeOptions: null, @@ -292,7 +292,7 @@ const CardToolbar = ({ title={mergedI18n.settingsLabel} onClick={() => onCardAction(CARD_ACTIONS.ON_SETTINGS_CLICK)} iconDescription={mergedI18n.settingsLabel} - renderIcon={Settings16} + renderIcon={Settings} testId={`${testId}-settings-button`} /> ) : null} @@ -305,7 +305,7 @@ const CardToolbar = ({ title={mergedI18n.closeLabel} onClick={() => onCardAction(CARD_ACTIONS.CLOSE_EXPANDED_CARD)} iconDescription={mergedI18n.closeLabel} - renderIcon={Close16} + renderIcon={Close} testId={`${testId}-close-button`} /> diff --git a/packages/react/src/components/Card/CardTypeContent.jsx b/packages/react/src/components/Card/CardTypeContent.jsx index 7837e10fd6..ba96d568f8 100644 --- a/packages/react/src/components/Card/CardTypeContent.jsx +++ b/packages/react/src/components/Card/CardTypeContent.jsx @@ -2,10 +2,8 @@ import React, { useMemo, useRef, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { defaultsDeep } from 'lodash-es'; +import { MeterChart, AreaChart, StackedAreaChart } from '@carbon/charts-react'; -import { MeterChart } from '../MeterChart'; -import { AreaChart } from '../AreaChart'; -import { StackedAreaChart } from '../StackedAreaChart'; import { CARD_TYPES } from '../../constants/LayoutConstants'; import { MeterChartPropTypes, SparklineChartPropTypes } from '../../constants/ChartPropTypes'; import { settings } from '../../constants/Settings'; diff --git a/packages/react/src/components/Card/DataStateRenderer.jsx b/packages/react/src/components/Card/DataStateRenderer.jsx index 38160989fe..c332697dd7 100644 --- a/packages/react/src/components/Card/DataStateRenderer.jsx +++ b/packages/react/src/components/Card/DataStateRenderer.jsx @@ -1,6 +1,6 @@ import React from 'react'; import classnames from 'classnames'; -import { ErrorFilled24, WarningFilled24 } from '@carbon/icons-react'; +import { ErrorFilled, WarningFilled } from '@carbon/react/icons'; import { Tooltip } from '../Tooltip'; import { settings } from '../../constants/Settings'; @@ -52,9 +52,9 @@ const DataStateRenderer = ({ dataState, size, id }) => { let { icon } = dataState; if (!icon) { if (type === CARD_DATA_STATE.ERROR) { - icon = ; + icon = ; } else if (type === CARD_DATA_STATE.NO_DATA) { - icon = ; + icon = ; } } diff --git a/packages/react/src/components/Card/DataStateRenderer.test.jsx b/packages/react/src/components/Card/DataStateRenderer.test.jsx index bdf6811027..155f091bf3 100644 --- a/packages/react/src/components/Card/DataStateRenderer.test.jsx +++ b/packages/react/src/components/Card/DataStateRenderer.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; -import { Bee16 } from '@carbon/icons-react'; +import { Bee } from '@carbon/react/icons'; import { settings } from '../../constants/Settings'; import { CARD_DATA_STATE, CARD_SIZES } from '../../constants/LayoutConstants'; @@ -28,9 +28,9 @@ describe('ValueCard', () => { const size = CARD_SIZES.SMALL; const myDataState = getDataStateProp(); myDataState.icon = ( - + App supplied icon - + ); const wrapper = mount(); expect(wrapper.find('svg title').text()).toEqual('App supplied icon'); diff --git a/packages/react/src/components/Card/_card-range-picker.scss b/packages/react/src/components/Card/_card-range-picker.scss index 4862891656..510c6ef1bd 100644 --- a/packages/react/src/components/Card/_card-range-picker.scss +++ b/packages/react/src/components/Card/_card-range-picker.scss @@ -1,4 +1,7 @@ -@import '../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '../../globals/vars' as *; .#{$iot-prefix}--card--toolbar-date-range-wrapper { align-items: center; @@ -10,9 +13,9 @@ .#{$iot-prefix}--card--toolbar-timerange-label { white-space: nowrap; - min-height: $carbon--spacing-09; - min-width: $carbon--spacing-09; - padding: $carbon--spacing-05 $carbon--spacing-03; + min-height: $spacing-09; + min-width: $spacing-09; + padding: $spacing-05 $spacing-03; font-size: 0.875rem; font-weight: normal; @@ -29,7 +32,7 @@ outline-offset: -2px; } &:hover { - background: $hover-ui; + background: $background-hover; } } @@ -41,5 +44,5 @@ } .#{$iot-prefix}--card--overflow-menuitem-active:not(:hover) { - background-color: $active-ui; + background-color: $background-active; } diff --git a/packages/react/src/components/Card/_card-title.scss b/packages/react/src/components/Card/_card-title.scss index 6de74039ea..3ad5fbf52b 100644 --- a/packages/react/src/components/Card/_card-title.scss +++ b/packages/react/src/components/Card/_card-title.scss @@ -1,11 +1,15 @@ -@import '../../globals/vars'; -@import '~carbon-components/scss/globals/scss/layout'; - +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/layout' as *; +@use '@carbon/react/scss/type' as *; +@use '../../globals/mixins' as *; $tooltipSize: $spacing-07; $lineHeightSize: 1.375em; .#{$iot-prefix}--card--title { - align-items: flex-start; + align-items: center; display: flex; flex-wrap: wrap; // min-width value is required to ensure flex child with text properly truncates @@ -23,6 +27,16 @@ $lineHeightSize: 1.375em; & + *:not(.#{$iot-prefix}--card--toolbar) { margin-left: $spacing-05; } + + &--text .#{$prefix}--toggletip-label { + @include type-style('heading-compact-02'); + color: $text-primary; + } +} +.#{$iot-prefix}--card--subtitle { + &--text .#{$prefix}--toggletip-label { + @include type-style('label-01'); + } } .#{$iot-prefix}--card--header--tooltip { @@ -36,8 +50,17 @@ $lineHeightSize: 1.375em; .#{$iot-prefix}--card--title--text, .#{$iot-prefix}--card--subtitle--text { @include multiline-text-overflow(1, $lineHeightSize); + overflow: visible; word-break: break-all; min-width: 3rem; + .#{$prefix}--toggletip-label { + overflow: hidden; + & > div { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } } .#{$iot-prefix}--card--title--text--wrapped { @@ -47,8 +70,8 @@ $lineHeightSize: 1.375em; } .#{$iot-prefix}--card--title--text { - @include type-style('productive-heading-02'); - color: $text-01; + @include type-style('heading-compact-02'); + color: $text-primary; max-width: calc(100% - #{$tooltipSize}); } @@ -68,7 +91,7 @@ p.#{$iot-prefix}--card-title__title-text-tooltip-full-title { .#{$iot-prefix}--card--subtitle--text { @include type-style('label-01'); - color: $text-02; + color: $text-secondary; font-weight: normal; width: 100%; max-height: 1.34em; diff --git a/packages/react/src/components/Card/_card-toolbar.scss b/packages/react/src/components/Card/_card-toolbar.scss index c27aaedffa..2f88c697f5 100644 --- a/packages/react/src/components/Card/_card-toolbar.scss +++ b/packages/react/src/components/Card/_card-toolbar.scss @@ -1,5 +1,8 @@ -@import '../../globals/vars'; - +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/utilities/convert'; .#{$iot-prefix}--card--toolbar { margin: 0; display: flex; @@ -15,7 +18,7 @@ &__overflow-menu { min-width: 10rem; width: unset; - max-width: rem(350px); // 350px mobile screen width + max-width: convert.to-rem(350px); // 350px mobile screen width & .#{$prefix}--overflow-menu-options__btn { max-width: unset; @@ -24,7 +27,7 @@ } .#{$iot-prefix}--card--toolbar-action { - color: $ui-05; + color: $border-inverse; border-width: 2px; display: flex; height: 2rem; @@ -34,8 +37,8 @@ width: 2rem; &:hover { - background-color: $hover-ui; - color: $ui-05; + background-color: $background-hover; + color: $border-inverse; } &:focus { @@ -45,7 +48,7 @@ } svg { - fill: $icon-02; + fill: $icon-secondary; } svg.#{$prefix}--overflow-menu__icon { @@ -73,7 +76,7 @@ margin: 0; :hover { - background: $hover-ui; + background: $background-hover; } &:active { diff --git a/packages/react/src/components/Card/_card.scss b/packages/react/src/components/Card/_card.scss index 2c969dc56f..0f5e9d4dfb 100644 --- a/packages/react/src/components/Card/_card.scss +++ b/packages/react/src/components/Card/_card.scss @@ -1,13 +1,22 @@ -@import '../../globals/vars'; -@import '~carbon-components/scss/globals/scss/layout'; -@import './card-range-picker'; -@import './card-toolbar'; -@import './card-title'; -@import './data-state-renderer'; -@import '../../globals/mixins'; - +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/layout' as *; +@use './card-range-picker' as *; +@use './card-toolbar' as *; +@use './card-title' as *; +@use './data-state-renderer' as *; +@use '../../globals/mixins' as *; +@use '@carbon/react/scss/components/button' as *; +@use '@carbon/react/scss/components/tile' as *; +@use '@carbon/react/scss/components/data-table' as *; +@use '@carbon/charts/scss' as *; // delcare variables $iot-header-padding: $spacing-05; +$duration-moderate-02: 240ms; +$duration-moderate-01: 150ms; +$duration-fast-02: 110ms; .#{$iot-prefix}--card--wrapper { background: white; @@ -19,13 +28,13 @@ $iot-header-padding: $spacing-05; overflow: hidden; &__selected { - outline: solid $spacing-01 $interactive-02; + outline: solid $spacing-01 $button-secondary; box-sizing: border-box; } } .#{$iot-prefix}--card--resizing { - outline: $spacing-01 solid $interactive-02; + outline: $spacing-01 solid $button-secondary; box-sizing: border-box; } @@ -81,7 +90,7 @@ $iot-header-padding: $spacing-05; .#{$iot-prefix}--card--footer--wrapper { align-items: center; - border-top: 1px solid $ui-03; + border-top: 1px solid $layer-accent-01; display: flex; height: $spacing-08; overflow: hidden; @@ -101,10 +110,25 @@ $iot-header-padding: $spacing-05; // Change background for charts in Cards .#{$iot-prefix}--card .#{$prefix}--chart-holder { - background-color: $ui-01; + background-color: $layer-02; } // Needed to allow the overflow menu to overlay the expanded card correctly .#{$prefix}--modal .#{$iot-prefix}--card--overflow { z-index: 10000; } + +.#{$iot-prefix}--card--toolbar-svg-wrapper { + padding: 0; +} + +.#{$prefix}--tile--clickable { + border: 1px solid transparent; + display: inline-flex; + flex-direction: column; + justify-content: space-between; + min-height: 8rem; + min-width: 8.5rem; + max-width: 18.75rem; + max-height: 15.625rem; +} diff --git a/packages/react/src/components/Card/_data-state-renderer.scss b/packages/react/src/components/Card/_data-state-renderer.scss index ca8c008b34..603632f973 100644 --- a/packages/react/src/components/Card/_data-state-renderer.scss +++ b/packages/react/src/components/Card/_data-state-renderer.scss @@ -1,4 +1,11 @@ -@import '../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/utilities' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/colors' as *; +@use '../../globals/vars' as *; +@use '../../globals/mixins' as *; .#{$iot-prefix}--data-state-container { // the custom property (CSS var) is defined in the Card that is using it @@ -52,7 +59,7 @@ } .#{$iot-prefix}--data-state-grid__label { - @include type-style('productive-heading-01'); + @include type-style('heading-compact-01'); @include text-overflow(); } @@ -75,16 +82,16 @@ } .#{$iot-prefix}--data-state-tooltip__label { - @include type-style('productive-heading-01'); + @include type-style('heading-compact-01'); } } .#{$iot-prefix}--data-state-default-error-icon { - fill: $carbon--red-60; + fill: $red-60; } .#{$iot-prefix}--data-state-default-warning-icon { - fill: $carbon--yellow-30; + fill: $yellow-30; } html[dir='rtl'] .#{$iot-prefix}--data-state-grid { diff --git a/packages/react/src/components/CardCodeEditor/CardCodeEditor.jsx b/packages/react/src/components/CardCodeEditor/CardCodeEditor.jsx index 43dde9fdaf..380cf163d9 100644 --- a/packages/react/src/components/CardCodeEditor/CardCodeEditor.jsx +++ b/packages/react/src/components/CardCodeEditor/CardCodeEditor.jsx @@ -1,14 +1,14 @@ import React, { useState, useMemo } from 'react'; -import { InlineNotification } from 'carbon-components-react'; -import { Popup16 } from '@carbon/icons-react'; +import { InlineNotification } from '@carbon/react'; +import { Popup } from '@carbon/react/icons'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import ComposedModal from '../ComposedModal'; import { settings } from '../../constants/Settings'; -import CodeEditor from '../CodeEditor/CodeEditor'; import Button from '../Button'; import deprecate from '../../internal/deprecate'; +import CodeEditor from '../CodeEditor/CodeEditor'; const { iotPrefix } = settings; @@ -40,8 +40,6 @@ const propTypes = { language: PropTypes.string, /** Initial value for the editor */ initialValue: PropTypes.string, - /** Which editor to use */ - editor: PropTypes.oneOf(['monaco', 'codemirror']), // TODO: remove deprecated testID in v3. // eslint-disable-next-line react/require-default-props testID: deprecate( @@ -67,7 +65,6 @@ const defaultProps = { language: 'json', initialValue: null, onCopy: null, - editor: 'monaco', testId: 'card-code-editor', }; @@ -78,7 +75,6 @@ const CardCodeEditor = ({ i18n, language, initialValue, - editor, // TODO: remove deprecated testID in v3. testID, testId, @@ -123,7 +119,7 @@ const CardCodeEditor = ({
diff --git a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx index 0e3b21eb94..c1d2ed3f75 100644 --- a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx +++ b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx @@ -6,6 +6,7 @@ import { teal70, magenta70, red50, + red60, red90, green60, blue80, @@ -14,15 +15,14 @@ import { teal50, cyan90, } from '@carbon/colors'; -import { Add16 } from '@carbon/icons-react'; -import { FormLabel } from 'carbon-components-react'; +import { WarningAlt, Add } from '@carbon/react/icons'; +import { FormLabel, TextInput } from '@carbon/react'; import classnames from 'classnames'; import { isEmpty, omit } from 'lodash-es'; import { settings } from '../../../../constants/Settings'; import { Dropdown } from '../../../Dropdown'; import ComposedModal from '../../../ComposedModal'; -import { TextInput } from '../../../TextInput'; import { handleDefaultDataItemEdit, DataItemsPropTypes, @@ -385,7 +385,7 @@ const DataSeriesFormItemModal = ({ className={`${iotPrefix}--add-aggregation__btn`} kind="ghost" size="large" - renderIcon={Add16} + renderIcon={Add} onClick={() => onAddAggregations(editDataItem)} iconDescription={mergedI18n.dataItemEditorAddAggregationMethodDescription} testId={`${testId}-aggregaton-button`} @@ -612,6 +612,8 @@ const DataSeriesFormItemModal = ({ dataSourceId={type !== CARD_TYPES.VALUE ? editDataItem.dataSourceId : null} thresholds={editDataItem.thresholds} translateWithId={handleTranslation} + selectedIcon={{ carbonIcon: , name: 'Warning alt' }} + selectedColor={{ carbonColor: red60, name: 'red60' }} onChange={(thresholds) => { setEditDataItem({ ...editDataItem, diff --git a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx index 2c25631429..5f2d3681ac 100644 --- a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx +++ b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx @@ -1,6 +1,6 @@ import React, { useState, useMemo, useCallback, useRef } from 'react'; import PropTypes from 'prop-types'; -import { Edit16, Subtract16 } from '@carbon/icons-react'; +import { Edit, Subtract } from '@carbon/react/icons'; import { omit, isEmpty } from 'lodash-es'; import { v4 as uuidv4 } from 'uuid'; import hash from 'object-hash'; @@ -417,10 +417,10 @@ const DataSeriesFormItem = ({ rowActions: () => [
) : null} {onCopy && ( - - )} - {editor === 'monaco' ? ( - } - value={codeEditorValue} - line={2} - language={language} - onMount={handleEditorDidMount} - onChange={handleEditorChange} - options={{ - minimap: { - enabled: false, - }, - autoIndent: true, - wordWrap: 'off', - }} - /> - ) : ( - +
+ +
)} + } + value={codeEditorValue} + line={2} + language={language} + onMount={handleEditorDidMount} + onChange={handleEditorChange} + options={{ + minimap: { + enabled: false, + }, + autoIndent: true, + wordWrap: 'off', + }} + />
); }; diff --git a/packages/react/src/components/CodeEditor/_code-editor.scss b/packages/react/src/components/CodeEditor/_code-editor.scss index 0e3a36c5dd..048f445c5a 100644 --- a/packages/react/src/components/CodeEditor/_code-editor.scss +++ b/packages/react/src/components/CodeEditor/_code-editor.scss @@ -1,34 +1,34 @@ +@use '../../globals/vars' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; .#{$iot-prefix}--code-editor { &-container { - background-color: $ui-01; + background-color: $layer-01; height: 100%; overflow: hidden; min-height: 3.5rem; padding-top: $spacing-05; // case it's light and disabled .cm-gutters { - background-color: $ui-01; + background-color: $layer-01; } } &-container--light { - background-color: $ui-background; - .cm-gutters, - .cm-content { - background-color: $ui-background; - } + background-color: $background; } &-container--disabled { - background-color: $disabled-02; + background-color: $layer-active-01; .view-lines.monaco-mouse-cursor-text { - background-color: $disabled-02; + background-color: $layer-active-01; > div > span > * { - color: $disabled-03; + color: $icon-on-color-disabled; //$disabled-03; } } // case it's light and disabled .cm-gutters, .cm-content { - background-color: $disabled-02; + background-color: $text-disabled; } } @@ -45,34 +45,42 @@ background-color: transparent; } } + &-copy { - background-color: $ui-01; + background-color: $layer-01; + z-index: 1; + } + + &-copy-wrapper { position: absolute; - inset-inline-start: calc(100% - 2.5rem); top: 0; - z-index: 1; + right: 0; } + + &-upload-wrapper { + position: absolute; + top: 0; + right: $spacing-08; + } + &-copy--light { - background-color: $ui-background; + background-color: $background; } &-copy--disabled-container { - background-color: $active-ui; + background-color: $border-disabled; } - &-upload.bx--btn.bx--btn--icon-only { - background-color: $ui-01; - position: absolute; - inset-inline-start: calc(100% - 5.03rem); - top: 0; + &-upload.cds--btn.cds--btn--icon-only { + background-color: $layer-01; z-index: 1; } - &-upload--light.bx--btn.bx--btn--icon-only { - background-color: $ui-background; + &-upload--light.cds--btn.cds--btn--icon-only { + background-color: $background; &:hover { - background-color: $hover-ui; + background-color: $layer-hover-01; } } - &-upload--disabled.bx--btn.bx--btn--icon-only { - background-color: $disabled-02; + &-upload--disabled.cds--btn.cds--btn--icon-only { + background-color: $layer-active-01; } } diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.story.jsx b/packages/react/src/components/CodeSnippet/CodeSnippet.story.jsx index ca3d93fffe..f1f1cbe949 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.story.jsx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.story.jsx @@ -86,7 +86,7 @@ export const multiline = () => ( export const singleline = () => ( - yarn add carbon-components@latest carbon-components-react@latest @carbon/icons-react@latest + yarn add carbon-components@latest @carbon/react@latest @carbon/icons-react@latest carbon-icons@latest ); @@ -108,11 +108,11 @@ const lightPropMessage = ( {' variant on '} - $ui-background + $ui-background/$background {' or '} - $ui-02 + $ui-02/$layer-02 . diff --git a/packages/react/src/components/CodeSnippet/_code-snippet.scss b/packages/react/src/components/CodeSnippet/_code-snippet.scss index d7eef07b0b..37f48b22d6 100644 --- a/packages/react/src/components/CodeSnippet/_code-snippet.scss +++ b/packages/react/src/components/CodeSnippet/_code-snippet.scss @@ -1 +1 @@ -@import '~carbon-components/scss/components/code-snippet/code-snippet'; +@use '@carbon/react/scss/components/code-snippet' as *; diff --git a/packages/react/src/components/CodeSnippet/index.js b/packages/react/src/components/CodeSnippet/index.js index d2d135271e..0f4c5286f0 100644 --- a/packages/react/src/components/CodeSnippet/index.js +++ b/packages/react/src/components/CodeSnippet/index.js @@ -1 +1 @@ -export { CodeSnippet, CodeSnippetSkeleton } from 'carbon-components-react'; +export { CodeSnippet, CodeSnippetSkeleton } from '@carbon/react'; diff --git a/packages/react/src/components/ColorDropdown/ColorDropdown.jsx b/packages/react/src/components/ColorDropdown/ColorDropdown.jsx index 4a65f24223..d6b8504e78 100644 --- a/packages/react/src/components/ColorDropdown/ColorDropdown.jsx +++ b/packages/react/src/components/ColorDropdown/ColorDropdown.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { Dropdown } from 'carbon-components-react'; +import { Dropdown } from '@carbon/react'; import { purple70, cyan50, diff --git a/packages/react/src/components/ColorDropdown/_color-dropdown.scss b/packages/react/src/components/ColorDropdown/_color-dropdown.scss index 2161993820..36e6e7055c 100644 --- a/packages/react/src/components/ColorDropdown/_color-dropdown.scss +++ b/packages/react/src/components/ColorDropdown/_color-dropdown.scss @@ -1,4 +1,6 @@ -@import '../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '../../globals/vars' as *; // We want to make sure the title attribute of the carbon option element // is not shown on hover, since that will be "[obj obj]" when we are @@ -25,7 +27,7 @@ align-items: center; height: 100%; width: 100%; - border-top: 1px solid $decorative-01; + // border-top: 1px solid $decorative-01; $decorative-01 deprecated need to check the exact token } // The new borders must be hidded on :hover, :active & .highlighted .#{$prefix}--list-box__menu-item:hover, diff --git a/packages/react/src/components/ComboBox/ComboBox.jsx b/packages/react/src/components/ComboBox/ComboBox.jsx index 51cbc490be..90e5bbb74d 100644 --- a/packages/react/src/components/ComboBox/ComboBox.jsx +++ b/packages/react/src/components/ComboBox/ComboBox.jsx @@ -1,7 +1,7 @@ import React, { useState, useMemo, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { ComboBox as CarbonComboBox, Tag } from 'carbon-components-react'; +import { ComboBox as CarbonComboBox, Tag } from '@carbon/react'; import { pick } from 'lodash-es'; import { settings } from '../../constants/Settings'; diff --git a/packages/react/src/components/ComboBox/_combo-box.scss b/packages/react/src/components/ComboBox/_combo-box.scss index fc45319f05..ffc2f58547 100644 --- a/packages/react/src/components/ComboBox/_combo-box.scss +++ b/packages/react/src/components/ComboBox/_combo-box.scss @@ -1,6 +1,6 @@ -@import '~carbon-components/scss/components/combo-box/combo-box'; -@import '../../globals/vars'; -@import '../../globals/mixins'; +@use '@carbon/react/scss/components/combo-box'; +@use '../../globals/vars' as *; +@use '../../globals/mixins' as *; .#{$iot-prefix}--combobox { display: flex; diff --git a/packages/react/src/components/ComboChartCard/_combo-chart-card.scss b/packages/react/src/components/ComboChartCard/_combo-chart-card.scss index 1eedd964c5..a002f5ee40 100644 --- a/packages/react/src/components/ComboChartCard/_combo-chart-card.scss +++ b/packages/react/src/components/ComboChartCard/_combo-chart-card.scss @@ -1,5 +1,5 @@ -@import '../../globals/vars'; - +@use '../../globals/vars' as *; +@use '@carbon/react/scss/spacing' as *; .#{$iot-prefix}--combo-chart-card__container { padding: 0 $spacing-05 $spacing-05; position: absolute; diff --git a/packages/react/src/components/ComposedModal/ComposedModal.jsx b/packages/react/src/components/ComposedModal/ComposedModal.jsx index 616a38ef79..89fe9dcdb2 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.jsx +++ b/packages/react/src/components/ComposedModal/ComposedModal.jsx @@ -5,7 +5,7 @@ import { ModalHeader, Loading, InlineNotification, -} from 'carbon-components-react'; +} from '@carbon/react'; import PropTypes from 'prop-types'; import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'; import classnames from 'classnames'; diff --git a/packages/react/src/components/ComposedModal/ComposedModal.story.jsx b/packages/react/src/components/ComposedModal/ComposedModal.story.jsx index 7005ee9aab..192aa2cf7d 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.story.jsx +++ b/packages/react/src/components/ComposedModal/ComposedModal.story.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { boolean, object, select, text } from '@storybook/addon-knobs'; -import { OverflowMenu, OverflowMenuItem, Tooltip } from 'carbon-components-react'; +import { OverflowMenu, OverflowMenuItem } from '@carbon/react'; import ComposedModalREADME from './ComposedModal.mdx'; import ComposedModal from './ComposedModal'; @@ -172,9 +172,6 @@ export const ComposedModalWithOverflowAndTooltip = () => ( - - Hi there - ); diff --git a/packages/react/src/components/ComposedModal/_composed-modal.scss b/packages/react/src/components/ComposedModal/_composed-modal.scss index 1601d9567d..d42e78b8a9 100644 --- a/packages/react/src/components/ComposedModal/_composed-modal.scss +++ b/packages/react/src/components/ComposedModal/_composed-modal.scss @@ -1,9 +1,12 @@ -@import '../../globals/vars'; -@import '../../globals/layout'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '../../globals/vars' as *; +@use '../../globals/layout' as *; +@use '@carbon/react/scss/utilities/convert'; .#{$iot-prefix}--composed-modal { .#{$prefix}--modal-container { - @media (min-height: carbon--rem(515px)) { + @media (min-height: convert.to-rem(515px)) { overflow-y: auto; } } @@ -13,10 +16,10 @@ z-index: 10000; } - .#{$prefix}--tooltip { - // TODO: Can remove once this issue is fixed: https://github.com/carbon-design-system/carbon/issues/6662 - z-index: 10000; - } + // .#{$prefix}--tooltip { + // // TODO: Can remove once this issue is fixed: https://github.com/carbon-design-system/carbon/issues/6662 + // z-index: 10000; + // } /* support large modals for ll the sizes */ &.#{$iot-prefix}--composed-modal--large { @@ -24,16 +27,16 @@ margin-bottom: 0; } .#{$prefix}--modal-container { - min-height: carbon--rem(600px); - min-width: carbon--rem(800px); + min-height: convert.to-rem(600px); + min-width: convert.to-rem(800px); max-height: 80%; - @media (min-width: carbon--rem(600px)) { + @media (min-width: convert.to-rem(600px)) { height: auto; } - @media (min-width: carbon--rem(1024px)) { + @media (min-width: convert.to-rem(1024px)) { max-width: 80%; } - @media (min-width: carbon--rem(1200px)) { + @media (min-width: convert.to-rem(1200px)) { max-width: 60%; } } @@ -45,10 +48,10 @@ min-height: $min-width; min-width: $min-width; max-height: 80%; - @media (min-width: carbon--rem(1024px)) { + @media (min-width: convert.to-rem(1024px)) { min-width: $min-width; } - @media (min-width: carbon--rem(1200px)) { + @media (min-width: convert.to-rem(1200px)) { min-width: $min-width; } @@ -65,7 +68,7 @@ } .#{$prefix}--modal-content { - min-height: carbon--rem(200px); + min-height: convert.to-rem(200px); } } diff --git a/packages/react/src/components/ComposedModal/index.js b/packages/react/src/components/ComposedModal/index.js index 69ec10ff13..7cb6053b23 100644 --- a/packages/react/src/components/ComposedModal/index.js +++ b/packages/react/src/components/ComposedModal/index.js @@ -1,3 +1,3 @@ -export { ModalHeader, ModalBody, ModalFooter } from 'carbon-components-react'; +export { ModalHeader, ModalBody, ModalFooter } from '@carbon/react'; export default from './ComposedModal'; diff --git a/packages/react/src/components/ComposedStructuredList/ComposedStructuredList.jsx b/packages/react/src/components/ComposedStructuredList/ComposedStructuredList.jsx deleted file mode 100644 index 978c2fb38b..0000000000 --- a/packages/react/src/components/ComposedStructuredList/ComposedStructuredList.jsx +++ /dev/null @@ -1,187 +0,0 @@ -import React from 'react'; -import { - StructuredListWrapper, - StructuredListHead, - StructuredListBody, - StructuredListRow, - StructuredListCell, -} from 'carbon-components-react'; -import PropTypes from 'prop-types'; -import { Bee32 } from '@carbon/icons-react'; -import warning from 'warning'; -import classnames from 'classnames'; - -import { settings } from '../../constants/Settings'; -import { COLORS } from '../../styles/styles'; - -const { iotPrefix } = settings; - -/** - * Carbon Structured List simple with custom design and onClick - */ -const StructuredList = ({ - columns, - data, - design, - isFixedWidth, - onRowClick, - loadingDataLabel, - StructuredListWrapperProps, - StructuredListHeadClassName, - testId, -}) => { - if (__DEV__) { - warning( - false, - 'ComposedStructuredList component has been deprecated and will be removed in the next release of `carbon-addons-iot-react`. \n Refactor to use StructureList component instead.' - ); - } - return ( - <> - - - - {columns.map(({ id, title, width = undefined }) => ( - - {title} - - ))} - - - - {data.map((item) => ( - onRowClick(item.id)} - > - {columns.map((col) => ( - - {col.renderDataFunction - ? col.renderDataFunction({ - // Call the column renderer if it's provided - value: item.values[col.id], - columnId: col.id, - rowId: item.id, - row: item.values, - }) - : item.values[col.id]} - - ))} - - ))} - - {!data.length ? ( -
- -
- {loadingDataLabel} -
-
- ) : undefined} -
- - ); -}; - -StructuredList.propTypes = { - /** Pass in props for StructuredListWrapper */ - StructuredListWrapperProps: PropTypes.shape({ - /** Specify an optional className to be applied to the container node */ - className: PropTypes.string, - /** Specify whether a border should be added to your StructuredListWrapper */ - border: PropTypes.bool, - /** Specify whether your StructuredListWrapper should have selections */ - selection: PropTypes.bool, - /** Specify a label to be read by screen readers on the container node */ - ariaLabel: PropTypes.string, - }), - /** Specify an optional className to be applied to the container node */ - StructuredListHeadClassName: PropTypes.string, - /** Pass in props for StructuredListWrapper */ - StructuredListInputProps: PropTypes.shape({ - /** Specify an optional className to be applied to the input */ - className: PropTypes.string, - /** Provide an optional hook that is called each time the input is updated */ - onChange: PropTypes.func, - }), - /** Component row height */ - design: PropTypes.oneOf(['normal', 'mini']), - /** Array of columns - header */ - columns: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - width: PropTypes.string, - /** for each column you can register a render callback function that is called with this object payload - * { - * value: PropTypes.any (current cell value), - * columnId: PropTypes.string, - * rowId: PropTypes.string, - * row: PropTypes.object like this {col: value, col2: value} - * }, you should return the node that should render within that cell */ - renderDataFunction: PropTypes.func, - }) - ).isRequired, - /** Array of data - table content */ - data: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string.isRequired, - values: PropTypes.shape(PropTypes.string.isRequired).isRequired, - }) - ).isRequired, - /** If true, list will not take 100% of width */ - isFixedWidth: PropTypes.bool, - /** Callback for when row is clicked */ - onRowClick: PropTypes.func.isRequired, - /** Text label for loading data */ - loadingDataLabel: PropTypes.string, - - testId: PropTypes.string, -}; - -StructuredList.defaultProps = { - StructuredListWrapperProps: null, - StructuredListHeadClassName: null, - StructuredListInputProps: null, - design: 'mini', - isFixedWidth: false, - loadingDataLabel: '', - testId: 'structured-list', -}; - -export default StructuredList; diff --git a/packages/react/src/components/ComposedStructuredList/ComposedStructuredList.story.jsx b/packages/react/src/components/ComposedStructuredList/ComposedStructuredList.story.jsx deleted file mode 100644 index ac18e4da25..0000000000 --- a/packages/react/src/components/ComposedStructuredList/ComposedStructuredList.story.jsx +++ /dev/null @@ -1,157 +0,0 @@ -import React from 'react'; -import { select } from '@storybook/addon-knobs'; -import { action } from '@storybook/addon-actions'; - -import StoryNotice, { deprecatedStoryTitle } from '../../internal/StoryNotice'; - -import ComposedStructuredList from './ComposedStructuredList'; - -const columns = [ - { - id: 'columnA', - title: 'A', - }, - { - id: 'columnB', - title: 'B', - }, - { - id: 'columnC', - title: 'C', - }, -]; - -const data = [ - { - id: 'row-0', - values: { - columnA:
, - columnB: 'hey B', - columnC: 'hey C', - }, - }, - { - id: 'row-1', - values: { - columnA: 'hey A again fixed column width', - columnB: 'hey B again', - columnC: 'hey C again', - }, - }, - { - id: 'row-2', - values: { - columnA: 'hey hey A', - columnB: 'hey hey B', - columnC: 'hey hey C', - }, - }, -]; - -const StructuredListInputProps = { - className: 'checks', -}; - -export default { - title: '1 - Watson IoT/Deprecated/🚫 ComposedStructuredList', -}; - -export const Deprecated = () => ( - -); -Deprecated.storyName = deprecatedStoryTitle; - -export const Default = () => ( - -); - -Default.storyName = 'default '; - -export const WithEmptyState = () => ( - -); - -WithEmptyState.storyName = 'with empty state'; - -export const WithFixedColumnWidths = () => ( - ({ ...i, width: `${10 + idx * 2}rem` }))} - data={data} - isFixedWidth - loadingDataLabel="No data is available yet." - onRowClick={action('onRowClick')} - /> -); - -WithFixedColumnWidths.storyName = 'with fixed column widths'; - -export const WithEmptyStateWithFixedColumnWidth = () => ( - ({ ...i, width: `${10 + idx * 2}rem` }))} - data={[]} - isFixedWidth - loadingDataLabel="No data is available yet." - onRowClick={action('onRowClick')} - /> -); - -WithEmptyStateWithFixedColumnWidth.storyName = 'with empty state with fixed column width'; - -export const CustomCellRenderer = () => ( - ({ - ...column, - renderDataFunction: ({ value }) => {value}, - }))} - data={data} - onRowClick={action('onRowClick')} - /> -); - -CustomCellRenderer.storyName = 'custom cell renderer'; - -CustomCellRenderer.parameters = { - info: { - text: ` - - To render a your own widget in a list cell, pass a renderDataFunction prop along with your column metadata. - -
- - ~~~js - columns=[ { id: 'columnA', title: 'A', renderDataFunction: myCustomRenderer }, ...] - ~~~ - -
- - The renderDataFunction is called with this payload - -
- - ~~~js - { - value: PropTypes.any (current cell value), - columnId: PropTypes.string, - rowId: PropTypes.string, - row: the full data for this rowPropTypes.object like this {col: value, col2: value} - } - - const myCustomRenderer = ({ value }) => {value} - ~~~ - -
- - `, - }, -}; diff --git a/packages/react/src/components/ComposedStructuredList/ComposedStructuredList.test.jsx b/packages/react/src/components/ComposedStructuredList/ComposedStructuredList.test.jsx deleted file mode 100644 index dd49d9b173..0000000000 --- a/packages/react/src/components/ComposedStructuredList/ComposedStructuredList.test.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { render, screen } from '@testing-library/react'; - -import ComposedStructuredList from './ComposedStructuredList'; - -const columns = [ - { - id: 'columnA', - title: 'A', - }, - { - id: 'columnB', - title: 'B', - }, - { - id: 'columnC', - title: 'C', - }, -]; - -const data = [ - { - id: 'row-0', - values: { - columnA: 'hey A', - columnB: 'hey B', - columnC: 'hey C', - }, - }, - { - id: 'row-1', - values: { - columnA: 'hey A again', - columnB: 'hey B again', - columnC: 'hey C again', - }, - }, - { - id: 'row-2', - values: { - columnA: 'hey hey A', - columnB: 'hey hey B', - columnC: 'hey hey C', - }, - }, -]; - -describe('Structured List', () => { - it('should be selectable by testId', () => { - const onRowClick = jest.fn(); - const { rerender } = render( - - ); - - expect(screen.getByTestId('composed_structured_list')).toBeDefined(); - expect(screen.getByTestId('composed_structured_list-head')).toBeDefined(); - expect(screen.getByTestId('composed_structured_list-body')).toBeDefined(); - expect(screen.getByTestId('composed_structured_list-row-row-0')).toBeDefined(); - - rerender( - - ); - - expect(screen.getByTestId('composed_structured_list-empty')).toBeDefined(); - }); - - // handle click function test - it('onRowClick', () => { - const onRowClick = jest.fn(); - const wrapper = mount( - - ); - wrapper.find('div[onClick]').first().simulate('click'); - expect(onRowClick.mock.calls).toHaveLength(1); - }); -}); diff --git a/packages/react/src/components/ComposedStructuredList/__snapshots__/ComposedStructuredList.story.storyshot b/packages/react/src/components/ComposedStructuredList/__snapshots__/ComposedStructuredList.story.storyshot deleted file mode 100644 index d3ca951e86..0000000000 --- a/packages/react/src/components/ComposedStructuredList/__snapshots__/ComposedStructuredList.story.storyshot +++ /dev/null @@ -1,832 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 ComposedStructuredList custom cell renderer 1`] = ` -
-
-
-
-
- A -
-
- B -
-
- C -
-
-
-
-
-
- -
- -
-
- - hey B - -
-
- - hey C - -
-
-
-
- - hey A again fixed column width - -
-
- - hey B again - -
-
- - hey C again - -
-
-
-
- - hey hey A - -
-
- - hey hey B - -
-
- - hey hey C - -
-
-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 ComposedStructuredList default 1`] = ` -
-
-
-
-
- A -
-
- B -
-
- C -
-
-
-
-
-
-
-
-
- hey B -
-
- hey C -
-
-
-
- hey A again fixed column width -
-
- hey B again -
-
- hey C again -
-
-
-
- hey hey A -
-
- hey hey B -
-
- hey hey C -
-
-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 ComposedStructuredList with empty state 1`] = ` -
-
-
-
-
- A -
-
- B -
-
- C -
-
-
-
-
- - - -
- No data is available yet. -
-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 ComposedStructuredList with empty state with fixed column width 1`] = ` -
-
-
-
-
- A -
-
- B -
-
- C -
-
-
-
-
- - - -
- No data is available yet. -
-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 ComposedStructuredList with fixed column widths 1`] = ` -
-
-
-
-
- A -
-
- B -
-
- C -
-
-
-
-
-
-
-
-
- hey B -
-
- hey C -
-
-
-
- hey A again fixed column width -
-
- hey B again -
-
- hey C again -
-
-
-
- hey hey A -
-
- hey hey B -
-
- hey hey C -
-
-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 ComposedStructuredList ️⛔ Deprecation Notice 1`] = ` -
-
- - - - - warning icon - - -
-

- Deprecation Notice -

-
- ComposedStructuredList has been deprecated and will be removed in the next major version of carbon-addons-iot-react. -
-
- Refactor usages of ComposedStructuredList to use StructuredList instead. -
-
-
-
-`; diff --git a/packages/react/src/components/ComposedStructuredList/_composed-structured-list.scss b/packages/react/src/components/ComposedStructuredList/_composed-structured-list.scss deleted file mode 100644 index d78a3baeaa..0000000000 --- a/packages/react/src/components/ComposedStructuredList/_composed-structured-list.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '~carbon-components/scss/globals/scss/vars'; - -.#{$iot-prefix}--composed-structured-list { - &__wrapper { - width: inherit; - } - - &__empty-content { - background-color: $ui-01; - text-align: center; - color: $text-03; - // stylelint-disable-next-line declaration-property-unit-blacklist - font-size: 14px; - padding-top: 90px; - padding-bottom: 115px; - font-weight: regular; - caption-side: bottom; - display: table-caption; - } - - &__loading { - padding-top: $spacing-05; - } - - &__list-cell { - min-width: var(--width); - max-width: var(--width); - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; - } -} diff --git a/packages/react/src/components/ContentSwitcher/_content-switcher.scss b/packages/react/src/components/ContentSwitcher/_content-switcher.scss index 4563dc7bc9..343af36481 100644 --- a/packages/react/src/components/ContentSwitcher/_content-switcher.scss +++ b/packages/react/src/components/ContentSwitcher/_content-switcher.scss @@ -1 +1 @@ -@import '~carbon-components/scss/components/content-switcher/content-switcher'; +@use '@carbon/react/scss/components/content-switcher' as *; diff --git a/packages/react/src/components/ContentSwitcher/index.js b/packages/react/src/components/ContentSwitcher/index.js index 78589396a7..0e063d307a 100644 --- a/packages/react/src/components/ContentSwitcher/index.js +++ b/packages/react/src/components/ContentSwitcher/index.js @@ -1 +1 @@ -export { ContentSwitcher } from 'carbon-components-react'; +export { ContentSwitcher } from '@carbon/react'; diff --git a/packages/react/src/components/Copy/index.js b/packages/react/src/components/Copy/index.js index 468091b4b5..b762870092 100644 --- a/packages/react/src/components/Copy/index.js +++ b/packages/react/src/components/Copy/index.js @@ -1 +1 @@ -export { Copy } from 'carbon-components-react'; +export { Copy } from '@carbon/react'; diff --git a/packages/react/src/components/CopyButton/_copy-button.scss b/packages/react/src/components/CopyButton/_copy-button.scss index c4a0ad4ce7..7c9db7d14e 100644 --- a/packages/react/src/components/CopyButton/_copy-button.scss +++ b/packages/react/src/components/CopyButton/_copy-button.scss @@ -1 +1 @@ -@import '~carbon-components/scss/components/copy-button/copy-button'; +@use '@carbon/react/scss/components/copy-button'; diff --git a/packages/react/src/components/CopyButton/index.js b/packages/react/src/components/CopyButton/index.js index 8cd6ba0431..4c90a88e4d 100644 --- a/packages/react/src/components/CopyButton/index.js +++ b/packages/react/src/components/CopyButton/index.js @@ -1 +1 @@ -export { CopyButton } from 'carbon-components-react'; +export { CopyButton } from '@carbon/react'; diff --git a/packages/react/src/components/DangerButton/index.js b/packages/react/src/components/DangerButton/index.js index a6c532fd2e..419311fda8 100644 --- a/packages/react/src/components/DangerButton/index.js +++ b/packages/react/src/components/DangerButton/index.js @@ -1 +1 @@ -export { DangerButton } from 'carbon-components-react'; +export { DangerButton } from '@carbon/react'; diff --git a/packages/react/src/components/Dashboard/Dashboard.story.jsx b/packages/react/src/components/Dashboard/Dashboard.story.jsx deleted file mode 100644 index 18e5ef2105..0000000000 --- a/packages/react/src/components/Dashboard/Dashboard.story.jsx +++ /dev/null @@ -1,1518 +0,0 @@ -import React from 'react'; -import { text, boolean } from '@storybook/addon-knobs'; -import { action } from '@storybook/addon-actions'; -import { Application32, Group32 } from '@carbon/icons-react'; -import { spacing05, spacing04, spacing09 } from '@carbon/layout'; -import { gray20, red60, green50, yellow } from '@carbon/colors'; -import { ClickableTile } from 'carbon-components-react'; - -import StoryNotice, { deprecatedStoryTitle } from '../../internal/StoryNotice'; -import FullWidthWrapper from '../../internal/FullWidthWrapper'; -import { getIntervalChartData, tableColumns, tableData } from '../../utils/sample'; -import { - CARD_SIZES, - CARD_TYPES, - BAR_CHART_TYPES, - BAR_CHART_LAYOUTS, -} from '../../constants/LayoutConstants'; -import imageFile from '../ImageCard/landscape.jpg'; -import { DashboardIcon, DataScientistIcon, ComputerChipIcon } from '../../icons/components'; - -import Dashboard from './Dashboard'; - -export const originalCards = [ - { - title: - 'Facility Metrics with a very long title that should be truncated and have a tooltip for the full text ', - id: 'facilitycard', - size: CARD_SIZES.MEDIUM, - type: CARD_TYPES.VALUE, - availableActions: { - delete: true, - }, - content: { - attributes: [ - { label: 'Comfort Level', dataSourceId: 'comfortLevel', unit: '%' }, - { label: 'Utilization', dataSourceId: 'utilization', unit: '%' }, - { label: 'Pressure', dataSourceId: 'pressure', unit: 'mb' }, - ], - }, - values: { - comfortLevel: 89, - utilization: 76, - pressure: 21.4, - }, - }, - { - title: 'Bar chart', - id: 'barchartcard', - size: CARD_SIZES.MEDIUMWIDE, - type: CARD_TYPES.BAR, - content: { - type: BAR_CHART_TYPES.SIMPLE, - categoryDataSourceId: 'city', - layout: BAR_CHART_TYPES.VERTICAL, - series: [ - { - color: ['blue', 'red', 'green', 'yellow'], - dataSourceId: 'particles', - }, - ], - xLabel: 'Cities', - yLabel: 'Particles', - }, - values: [ - { - city: 'Amsterdam', - emissions: 120, - particles: 447, - quarter: '2020-Q1', - temperature: 44, - }, - { - city: 'New York', - emissions: 130, - particles: 528, - quarter: '2020-Q1', - temperature: 11, - }, - { - city: 'Bangkok', - emissions: 30, - particles: 435, - quarter: '2020-Q1', - temperature: 32, - }, - { - city: 'San Francisco', - emissions: 312, - particles: 388, - quarter: '2020-Q1', - temperature: 120, - }, - ], - }, - { - title: 'Humidity', - id: 'facilitycard-xs', - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - availableActions: { - delete: true, - }, - content: { - attributes: [ - { - dataSourceId: 'humidity', - unit: '%', - thresholds: [ - { comparison: '<', value: '40', color: 'red' }, - { comparison: '<', value: '70', color: 'green' }, - { comparison: '>=', value: '70', color: 'red' }, - ], - }, - ], - }, - values: { - humidity: 62.1, - }, - }, - { - title: 'Show tooltip when the card title has ellipsis ', - id: 'facilitycard-tooltip', - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - availableActions: { - delete: true, - }, - content: { - attributes: [ - { - dataSourceId: 'humidity', - unit: '%', - thresholds: [ - { comparison: '<', value: '40', color: 'red' }, - { comparison: '<', value: '70', color: 'green' }, - { comparison: '>=', value: '70', color: 'red' }, - ], - }, - ], - }, - values: { - humidity: 62.1, - }, - }, - { - id: 'section-card', - size: CARD_SIZES.SMALLWIDE, - type: CARD_TYPES.CUSTOM, - availableActions: { - delete: true, - }, - content:

Section Header

, - }, - { - title: 'Utilization', - id: 'facilitycard-xs2', - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - availableActions: { - delete: true, - }, - content: { - attributes: [{ dataSourceId: 'utilization', label: 'Average', unit: '%' }], - }, - values: { - utilization: 76, - }, - }, - { - title: 'Alert Count', - id: 'facilitycard-xs3', - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - availableActions: { - delete: true, - }, - content: { - attributes: [ - { - label: 'weekly', - dataSourceId: 'alertCount', - secondaryValue: { - dataSourceId: 'alertCountTrend', - trend: 'up', - color: 'green', - }, - }, - ], - }, - values: { alertCount: 35, alertCountTrend: 13 }, - }, - { - title: 'Comfort Level', - id: 'facilitycard-comfort-level', - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - availableActions: { - delete: true, - }, - content: { - attributes: [ - { - dataSourceId: 'comfortLevel', - thresholds: [ - { - comparison: '=', - value: 'Good', - icon: 'checkmark', - color: 'green', - }, - { comparison: '=', value: 'Bad', icon: 'close', color: 'red' }, - ], - }, - ], - }, - values: { comfortLevel: 'Bad' }, - }, - { - title: 'Foot Traffic', - id: 'facilitycard-xs4', - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - availableActions: { - delete: true, - }, - content: { - attributes: [ - { - title: 'weekly', - dataSourceId: 'footTraffic', - secondaryValue: { - dataSourceId: 'footTrafficTrend', - trend: 'down', - color: 'red', - }, - }, - ], - }, - values: { footTraffic: 13572, footTrafficTrend: '22%' }, - }, - { - tooltip:

Health - of floor 8

, - id: 'GaugeCard', - title: 'Health', - size: CARD_SIZES.SMALL, - type: CARD_TYPES.GAUGE, - values: { - usage: 73, - usageTrend: '5%', - }, - content: { - gauges: [ - { - dataSourceId: 'usage', - units: '%', - minimumValue: 0, - maximumValue: 100, - color: 'orange', - backgroundColor: gray20, - shape: 'circle', - trend: { - dataSourceId: 'usageTrend', - trend: 'up', - }, - thresholds: [ - { - comparison: '>', - value: 0, - color: red60, // red - label: 'Poor', - }, - { - comparison: '>', - value: 60, - color: yellow, // yellow - label: 'Fair', - }, - { - comparison: '>', - value: 80, - color: green50, // green - label: 'Good', - }, - ], - }, - ], - }, - }, - { - title: 'Health', - id: 'facilitycard-health', - size: CARD_SIZES.SMALLWIDE, - type: CARD_TYPES.VALUE, - availableActions: { - delete: true, - }, - content: { - attributes: [ - { - dataSourceId: 'health', - thresholds: [ - { - comparison: '=', - value: 'Healthy', - icon: 'checkmark', - color: 'green', - }, - { - comparison: '=', - value: 'Unhealthy', - icon: 'close', - color: 'red', - }, - ], - }, - ], - }, - values: { health: 'Healthy' }, - }, - { - title: - 'Temperature with a very long title that should be truncated and have a tooltip for the full text ', - id: 'facility-temperature-timeseries', - size: CARD_SIZES.MEDIUM, - type: CARD_TYPES.TIMESERIES, - content: { - series: [ - { - label: 'Temperature', - dataSourceId: 'temperature', - }, - ], - xLabel: 'Time', - yLabel: 'Temperature (˚F)', - timeDataSourceId: 'timestamp', - }, - values: getIntervalChartData('day', 7, { min: 10, max: 100 }, 100), - interval: 'hour', - timeRange: 'last7Days', - availableActions: { range: true }, - dataSource: { - attributes: [ - { - aggregator: 'last', - attribute: 'speed', - id: 'speed_Claudia_Sample_Robot_Type_last', - }, - ], - groupBy: ['deviceid'], - range: { - count: -7, - interval: 'day', - }, - timeGrain: 'day', - }, - }, - { - title: 'Alerts', - id: 'alert-table1', - size: CARD_SIZES.LARGE, - type: CARD_TYPES.TABLE, - availableActions: { - expand: true, - }, - content: { - data: tableData, - columns: tableColumns, - }, - }, - { - title: 'Environment', - id: 'facility-multi-timeseries', - size: CARD_SIZES.LARGE, - type: CARD_TYPES.TIMESERIES, - content: { - series: [ - { - label: 'Temperature', - dataSourceId: 'temperature', - // color: text('color', COLORS.PURPLE), - }, - { - label: 'Pressure', - dataSourceId: 'pressure', - // color: text('color', COLORS.PURPLE), - }, - ], - xLabel: 'Time', - yLabel: 'Temperature (˚F)', - timeDataSourceId: 'timestamp', - }, - values: getIntervalChartData('month', 12, { min: 10, max: 100 }, 100), - interval: 'month', - timeRange: 'lastYear', - availableActions: { range: true }, - dataSource: { - attributes: [ - { - aggregator: 'last', - attribute: 'speed', - id: 'speed_Claudia_Sample_Robot_Type_last', - }, - ], - groupBy: ['deviceid'], - range: { - count: -7, - interval: 'day', - }, - timeGrain: 'day', - }, - }, - { - title: 'Floor Map', - id: 'floor map picture', - size: CARD_SIZES.MEDIUM, - type: CARD_TYPES.IMAGE, - content: { - alt: 'Floor Map', - image: 'firstfloor', - src: imageFile, - }, - values: { - hotspots: [ - { - x: 35, - y: 65, - icon: 'arrowDown', - content: Elevators, - }, - { - x: 45, - y: 25, - color: '#0f0', - content: Stairs, - }, - { - x: 45, - y: 50, - color: '#00f', - content: Vent Fan, - }, - { - x: 45, - y: 75, - icon: 'arrowUp', - content: Humidity Sensor, - }, - ], - }, - }, -]; - -const getCommonDashboardProps = () => ({ - title: text('title', 'Munich Building'), - cards: originalCards, - lastUpdated: new Date('2019-10-22T00:00:00').toUTCString(), - isEditable: boolean('isEditable', false), - isLoading: boolean('isLoading', false), - onBreakpointChange: action('onBreakpointChange'), - onLayoutChange: action('onLayoutChange'), - onSetRefresh: action('onSetRefresh'), - setIsLoading: action('setIsLoading'), - onFetchData: (card) => { - return new Promise((resolve) => setTimeout(() => resolve(card), 5000)); - }, -}); - -export default { - title: '1 - Watson IoT/Deprecated/🚫 Dashboard', - excludeStories: ['originalCards'], -}; - -export const Deprecated = () => ; -Deprecated.storyName = deprecatedStoryTitle; - -export const BasicDashboard = () => { - return ( - - - - ); -}; - -BasicDashboard.storyName = 'basic dashboard'; - -BasicDashboard.parameters = { - info: { - text: ` - ## Data Fetching - To wire this dashboard to your own backend, implement the onFetchData callback to retrieve data for each card. - You will be passed an object containing all of the card props (including the currently selected range of the card) and can use these to determine which data to fetch. - - Return a promise that will resolve into an updated card object with data values - For instance you could return {...card, values: [{timestamp: 1234123123,temperature: 35.5}]} - - If you want to trigger all the cards of the dashboard to load from an outside event (like a change in the data range that the dashboard is displaying), set the isLoading bit to true. - Once all the cards have finished loading the setIsLoading(false) will be called from the Dashboard. - - # Component Overview - `, - }, -}; - -export const BasicWithoutLastUpdatedHeader = () => { - return ( - - - - ); -}; - -BasicWithoutLastUpdatedHeader.storyName = 'basic - without last updated header'; - -export const CustomActions = () => { - return ( - - - - ); -}; - -CustomActions.storyName = 'custom actions'; - -export const Sidebar = () => { - return ( - - -

Sidebar content

-

goes

-

here

-
- } - /> - - ); -}; - -Sidebar.storyName = 'sidebar'; - -export const I18NLabels = () => { - return ( - - `__${min}–${max} items__`, - currentPage: (page) => `__page ${page}__`, - itemsRangeWithTotal: (min, max, total) => `__${min}–${max} of ${total} items__`, - pageRange: (current, total) => `__${current} of ${total} pages__`, - /** table body */ - overflowMenuAria: text('i18n.overflowMenuAria', '__More actions__'), - clickToExpandAria: text('i18n.clickToExpandAria', '__Click to expand content__'), - clickToCollapseAria: text('i18n.clickToCollapseAria', '__Click to collapse content__'), - selectAllAria: text('i18n.selectAllAria', '__Select all items__'), - selectRowAria: text('i18n.selectRowAria', '__Select row__'), - /** toolbar */ - clearAllFilters: text('i18n.clearAllFilters', '__Clear all filters__'), - columnSelectionButtonAria: text('i18n.columnSelectionButtonAria', '__Column Selection__'), - clearFilterAria: text('i18n.clearFilterAria', '__Clear filter__'), - filterAria: text('i18n.filterAria', '__Filter__'), - openMenuAria: text('i18n.openMenuAria', '__Open menu__'), - closeMenuAria: text('i18n.closeMenuAria', '__Close menu__'), - clearSelectionAria: text('i18n.clearSelectionAria', '__Clear selection__'), - /** empty state */ - emptyMessage: text('i18n.emptyMessage', '__There is no data__'), - emptyMessageWithFilters: text( - 'i18n.emptyMessageWithFilters', - '__No results match the current filters__' - ), - emptyButtonLabelWithFilters: text('i18n.emptyButtonLabel', '__Clear all filters__'), - inProgressText: text('i18n.inProgressText', '__In Progress__'), - actionFailedText: text('i18n.actionFailedText', '__Action Failed__'), - learnMoreText: text('i18n.learnMoreText', '__Learn More__'), - dismissText: text('i18n.dismissText', '__Dismiss__'), - downloadIconDescription: text('downloadIconDescription', 'Download table content'), - }} - /> - - ); -}; - -I18NLabels.storyName = 'i18n labels'; - -export const FullScreenTableCard = () => { - const data = [...Array(35)].map((id, index) => ({ - id: `row-${index}`, - values: { - timestamp: 1569819600000, - campus: 'Campus_EGL', - peopleCount_EnterpriseBuilding_mean: 150.5335383714, - headCount_EnterpriseBuilding_mean: 240, - capacity_EnterpriseBuilding_mean: 300, - allocatedSeats_EnterpriseBuilding_mean: 240, - }, - })); - return ( - - - - ); -}; - -FullScreenTableCard.storyName = 'full screen table card'; - -export const FullScreenLineCard = () => { - const data = getIntervalChartData('day', 7, { min: 10, max: 100 }, 100); - return ( - - ); -}; - -FullScreenLineCard.storyName = 'full screen line card'; - -export const LineCardWithNoOptions = () => { - const data = getIntervalChartData('day', 7, { min: 10, max: 100 }, 100); - return ( - - ); -}; - -LineCardWithNoOptions.storyName = 'line card with no options'; - -export const FullScreenBarChartCard = () => { - const data = getIntervalChartData('day', 7, { min: 10, max: 100 }, 100); - return ( - { - acc.push(dataPoint); - acc.push({ - ...dataPoint, - temperature: dataPoint.temperature / 2, - ENTITY_ID: 'Sensor2-2', - }); - return acc; - }, []), - }, - ]} - /> - ); -}; - -FullScreenBarChartCard.storyName = 'full screen bar chart card'; - -export const FullScreenImageCard = () => { - const content = { - src: imageFile, - alt: 'Sample image', - zoomMax: 10, - }; - return ( - - - - ); -}; - -FullScreenImageCard.storyName = 'full screen image card'; - -export const OnlyValueCards = () => { - const numberThresholds = [ - { comparison: '<', value: '40', color: 'red', icon: 'close' }, - { comparison: '<', value: '70', color: 'green', icon: 'checkmark' }, - { comparison: '<', value: '80', color: 'orange', icon: 'warning' }, - { comparison: '>=', value: '90', color: 'red', icon: 'close' }, - ]; - const stringThresholds = [ - { comparison: '=', value: 'Low', color: 'green' }, - { comparison: '=', value: 'Guarded', color: 'blue' }, - { comparison: '=', value: 'Elevated', color: 'gold' }, - { comparison: '=', value: 'High', color: 'orange' }, - { comparison: '=', value: 'Severe', color: 'red' }, - ]; - const stringThresholdsWithIcons = [ - { comparison: '=', value: 'Low', color: 'green', icon: 'checkmark' }, - { comparison: '=', value: 'Elevated', color: 'gold', icon: 'warning' }, - { comparison: '=', value: 'High', color: 'orange', icon: 'warning' }, - { comparison: '=', value: 'Severe', color: 'red', icon: 'close' }, - ]; - const extraProps = { - lastUpdated: 'Now', - }; - const dashboards = [ - ({ - title: `${v[0]} ${v[2] || ''}`, - id: `xsmall-number-${idx}`, - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - content: { - attributes: [{ dataSourceId: 'v', unit: v[2] }], - }, - values: { v: v[1] }, - dataState: - idx === 5 - ? { - type: 'NO_DATA', - label: 'No data available for this score at this time', - description: 'The last successful score was 68', - } - : undefined, - }))} - />, - ({ - title: 'Temperature', - id: `xsmall-number-${idx}`, - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - content: { - attributes: [ - { - dataSourceId: 'v', - secondaryValue: - idx === 2 - ? { dataSourceId: 'v2', trend: 'up', color: 'green' } - : idx === 3 - ? { dataSourceId: 'v2', trend: 'down', color: 'red' } - : undefined, - label: - idx === 1 ? 'Weekly Avg' : idx === 3 ? 'Long label that might not fit' : undefined, - unit: '˚F', - }, - ], - }, - values: { v, v2: '3.2' }, - }))} - />, - ({ - title: 'Humidity', - id: `xsmall-number-threshold-${idx}`, - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - content: { - attributes: [{ dataSourceId: 'v', unit: '%', thresholds: numberThresholds }], - }, - values: { v }, - }))} - />, - i.value) - .map((v, idx) => ({ - title: 'Danger Level', - id: `xsmall-string-threshold-${idx}`, - size: CARD_SIZES.SMALL, - type: CARD_TYPES.VALUE, - content: { - attributes: [{ dataSourceId: 'v', thresholds: stringThresholds }], - }, - values: { v }, - }))} - />, - ({ - title: `${v[0]} ${v[2] || ''}`, - id: `xsmallwide-number-${idx}`, - size: CARD_SIZES.SMALLWIDE, - type: CARD_TYPES.VALUE, - content: { - attributes: [{ dataSourceId: 'v', unit: v[2] }], - }, - values: { v: v[1] }, - })) - .concat( - [65.3, 48.7, 88.1, 103.2].map((v, idx) => ({ - title: 'Temperature', - id: `xsmallwide-number-trend-${idx}`, - size: CARD_SIZES.SMALLWIDE, - type: CARD_TYPES.VALUE, - content: { - attributes: [ - { - dataSourceId: 'v', - secondaryValue: - idx === 2 - ? { dataSourceId: 'v2', trend: 'up', color: 'green' } - : idx === 3 - ? { dataSourceId: 'v2', trend: 'down', color: 'red' } - : undefined, - label: - idx === 1 - ? 'Weekly Avg' - : idx === 3 - ? 'Long label that might not fit' - : undefined, - unit: '˚F', - }, - ], - }, - values: { v, v2: 3.2 }, - })) - ) - .concat( - [38.2, 65.3, 77.7, 91].map((v, idx) => ({ - title: 'Humidity', - id: `xsmallwide-number-threshold-${idx}`, - size: CARD_SIZES.SMALLWIDE, - type: CARD_TYPES.VALUE, - content: { - attributes: [ - { - dataSourceId: 'v', - unit: '%', - thresholds: numberThresholds, - }, - ], - }, - values: { v }, - })) - ) - .concat( - stringThresholds - .map((i) => i.value) - .map((v, idx) => ({ - title: 'Danger Level', - id: `xsmallwide-string-threshold-${idx}`, - size: CARD_SIZES.SMALLWIDE, - type: CARD_TYPES.VALUE, - content: { - attributes: [{ dataSourceId: 'v', thresholds: stringThresholds }], - }, - values: { v }, - })) - )} - />, - ({ - title: v[0], - id: `xsmallwide-multi-${idx}`, - size: CARD_SIZES.SMALLWIDE, - type: CARD_TYPES.VALUE, - content: { - attributes: [ - { - dataSourceId: 'v1', - unit: v[2], - label: v[3], - }, - { - dataSourceId: 'v2', - unit: v[5], - label: v[6], - }, - ], - }, - values: { v1: v[1], v2: v[4] }, - }))} - />, - ({ - title: v[0], - id: `xsmallwide-multi-${idx}`, - size: CARD_SIZES.SMALLWIDE, - type: CARD_TYPES.VALUE, - content: { - attributes: [ - { - dataSourceId: 'v1', - unit: v[2], - label: v[3], - secondaryValue: - v[5] !== null - ? { - dataSourceId: 'v1trend', - trend: v[5], - color: v[6], - } - : undefined, - }, - { - dataSourceId: 'v2', - unit: v[8], - label: v[9], - secondaryValue: - v[11] !== null - ? { - dataSourceId: 'v2trend', - trend: v[11], - color: v[12], - } - : undefined, - }, - ], - }, - values: { v1: v[1], v1trend: v[4], v2: v[7], v2trend: v[10] }, - }))} - />, - ({ - title: 'Humidity', - id: `xsmallwide-multi-number-threshold-${idx}`, - size: CARD_SIZES.SMALLWIDE, - type: CARD_TYPES.VALUE, - content: { - attributes: [ - { - dataSourceId: 'v1', - unit: v[1], - label: v[2], - thresholds: numberThresholds, - }, - { - dataSourceId: 'v2', - unit: v[4], - label: v[5], - thresholds: numberThresholds, - }, - ], - }, - values: { v1: v[0], v2: v[3] }, - }))} - />, - ({ - title: v[0], - id: `xsmallwide-multi-number-threshold-${idx}`, - size: CARD_SIZES.MEDIUM, - type: CARD_TYPES.VALUE, - content: { - attributes: [ - { - dataSourceId: 'v1', - unit: v[2], - label: v[3], - thresholds: - idx === 1 ? stringThresholds : idx === 2 ? stringThresholdsWithIcons : undefined, - secondaryValue: - v[4] !== null - ? { - dataSourceId: 'v1trend', - trend: v[4], - color: v[4] === 'down' ? 'red' : 'green', - } - : undefined, - }, - { - dataSourceId: 'v2', - unit: v[6], - label: v[7], - thresholds: - idx === 1 ? stringThresholds : idx === 2 ? stringThresholdsWithIcons : undefined, - secondaryValue: - v[8] !== null - ? { - dataSourceId: 'v2trend', - trend: v[8], - color: v[8] === 'down' ? 'red' : 'green', - } - : undefined, - }, - { - dataSourceId: 'v3', - unit: v[10], - label: v[11], - thresholds: - idx === 1 ? stringThresholds : idx === 2 ? stringThresholdsWithIcons : undefined, - secondaryValue: - v[12] !== null - ? { - dataSourceId: 'v2', - trend: v[12], - color: v[12] === 'down' ? 'red' : 'green', - } - : undefined, - }, - ], - }, - values: { - v1: v[1], - v1trend: v[1] / 5, - v2: v[5], - v2trend: v[5] / 5, - v3: v[9], - }, - }))} - />, - ]; - - return ( - - {dashboards.map((dashboard, index) => [ -
-

"Largest" Rendering (1056px width)

-
- {dashboard} -
, -
-

"Tightest" Rendering (1057px width)

-
- {dashboard} -
, - ])} -
- ); -}; - -OnlyValueCards.storyName = 'only value cards'; - -export const WithCustomCards = () => { - return ( - -
- -
-

View Dashboards

-
-

View pinned dashboards to keep track of your world in IoT.

-
- -
-
- - ), - id: 'viewDashboards', - size: CARD_SIZES.MEDIUM, - type: 'CUSTOM', - }, - { - content: ( - -
-

Connect Devices

-
-

- Connect devices and collect data by using the Watson IoT Platform Service. -

-
- -
-
-
- ), - id: 'connectDevices', - size: CARD_SIZES.MEDIUM, - type: 'CUSTOM', - }, - { - content: ( -
-

Monitor Entities

-
-

Expore your entities and analyze their associated data.

-
- -
-
- ), - id: 'monitorEntities', - size: CARD_SIZES.MEDIUM, - type: 'CUSTOM', - }, - { - content: ( -
-

Track Usage

-
-
- -
-
- ), - id: 'trackUsage', - size: CARD_SIZES.SMALLWIDE, - type: 'CUSTOM', - }, - { - content: ( -
-

Administer Users

-
-
- -
-
- ), - id: 'administerUsers', - size: CARD_SIZES.SMALLWIDE, - type: 'CUSTOM', - }, - { - content: { - data: [ - { - id: 'row-9', - value: 'Explore entity metrics in the data lake', - link: 'https://www.ibm.com/support/knowledgecenter/SSQP8H/iot/guides/micro-explore.html', - extraContent: ( - - View your device data in the entity view of the main Watson IoT Platform - dashboard. If your plan includes Watson IoT Platform Analytics, the data is - stored in the data lake for later retrieval and processing. - - ), - }, - { - id: 'row-10', - value: 'Perform simple calculations on your entity metrics', - link: 'https://www.ibm.com/support/knowledgecenter/SSQP8H/iot/guides/micro-calculate.html', - extraContent: ( - - Process your entity metrics by running simple or complex calculations to - create calculated metrics. - - ), - }, - { - id: 'row-11', - value: 'View entity metrics in a monitoring dashboard', - link: 'https://www.ibm.com/support/knowledgecenter/SSQP8H/iot/guides/micro-monitor.html', - extraContent: ( - - Visualize your entity metrics in monitoring dashboards to get an overview of - your data. - - ), - }, - ], - loadData: () => {}, - }, - id: 'tutorials', - size: CARD_SIZES.MEDIUMWIDE, - title: 'Tutorials', - type: 'LIST', - }, - { - content: { - data: [ - { - id: 'row-9', - value: 'Notice - IBM Watson IoT Platform support for IBM Cloud resource groups', - link: 'https://internetofthings.ibmcloud.com', - }, - { - id: 'row-10', - value: 'New Connectivity Status API now available on IBM Watson IoT Platform', - link: 'https://internetofthings.ibmcloud.com', - }, - { - id: 'row-11', - value: 'Advanced Notice - Sunset of SPAPI support', - link: 'https://internetofthings.ibmcloud.com', - }, - { - id: 'row-12', - value: 'Advanced Notice - Withdrawal of RTI features from Watson IoT Platform', - link: 'https://internetofthings.ibmcloud.com', - }, - ], - loadData: () => {}, - }, - id: 'announcements', - size: CARD_SIZES.MEDIUMWIDE, - title: 'Announcements', - type: 'LIST', - }, - ]} - hasLastUpdated={false} - /> -
-
- ); -}; - -WithCustomCards.storyName = 'with custom cards'; diff --git a/packages/react/src/components/Dashboard/Dashboard.test.jsx b/packages/react/src/components/Dashboard/Dashboard.test.jsx index 754a9bcd7d..e80a25b746 100644 --- a/packages/react/src/components/Dashboard/Dashboard.test.jsx +++ b/packages/react/src/components/Dashboard/Dashboard.test.jsx @@ -1,6 +1,6 @@ import { mount } from 'enzyme'; import React from 'react'; -import { Add20 } from '@carbon/icons-react'; +import { Add } from '@carbon/react/icons'; import { render, screen, waitFor } from '@testing-library/react'; import { CARD_SIZES, CARD_TYPES, COLORS } from '../../constants/LayoutConstants'; @@ -135,7 +135,7 @@ let wrapper = mount( layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'add', labelText: 'Add', icon: }, + { id: 'add', labelText: 'Add', icon: }, { id: 'custom', labelText: 'Custom', @@ -156,7 +156,7 @@ describe('Dashboard', () => { layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'add', labelText: 'Add', icon: }, + { id: 'add', labelText: 'Add', icon: }, { id: 'custom', labelText: 'Custom', @@ -202,7 +202,7 @@ describe('Dashboard', () => { layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'add', labelText: 'Add', icon: }, + { id: 'add', labelText: 'Add', icon: }, ]} cards={cardValues} onDashboardAction={onClick} @@ -219,7 +219,7 @@ describe('Dashboard', () => { layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'add', labelText: 'Add', icon: }, + { id: 'add', labelText: 'Add', icon: }, ]} cards={cardValues} onDashboardAction={onClick} @@ -245,7 +245,7 @@ describe('Dashboard', () => { layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'add', labelText: 'Add', icon: }, + { id: 'add', labelText: 'Add', icon: }, ]} cards={cardValues} onDashboardAction={onClick} diff --git a/packages/react/src/components/Dashboard/DashboardGrid.test.e2e.jsx b/packages/react/src/components/Dashboard/DashboardGrid.test.e2e.jsx index d55d40f0a1..8dd205215f 100644 --- a/packages/react/src/components/Dashboard/DashboardGrid.test.e2e.jsx +++ b/packages/react/src/components/Dashboard/DashboardGrid.test.e2e.jsx @@ -2,7 +2,7 @@ import React, { Fragment } from 'react'; import { mount } from '@cypress/react'; import { onlyOn } from '@cypress/skip-test'; import { omit } from 'lodash-es'; -import { Bee16, Close16 } from '@carbon/icons-react'; +import { Bee, Close } from '@carbon/react/icons'; import PropTypes from 'prop-types'; import { gray20 } from '@carbon/colors'; import MockDate from 'mockdate'; @@ -755,9 +755,9 @@ const DashboardAllCardsAsResizable = ({ breakpoint, type }) => { breakpoint={breakpoint} renderIconByName={(name, theProps = {}) => name === 'bee' ? ( - + {theProps.title} - + ) : ( Unknown ) @@ -788,9 +788,9 @@ const DashboardAllCardsAsResizable = ({ breakpoint, type }) => { breakpoint={breakpoint} renderIconByName={(name, theProps = {}) => name === 'close' ? ( - + {theProps.title} - + ) : ( Unknown ) @@ -1003,9 +1003,9 @@ const DashboardAllCardsAsResizable = ({ breakpoint, type }) => { } renderIconByName={(name, theProps = {}) => name === 'bee' ? ( - + {theProps.title} - + ) : ( Unknown ) diff --git a/packages/react/src/components/Dashboard/DashboardHeader.jsx b/packages/react/src/components/Dashboard/DashboardHeader.jsx index fe8323fa83..e3c1002458 100644 --- a/packages/react/src/components/Dashboard/DashboardHeader.jsx +++ b/packages/react/src/components/Dashboard/DashboardHeader.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { SkeletonText } from 'carbon-components-react'; +import { SkeletonText } from '@carbon/react'; import warning from 'warning'; import icons, { bundledIconNames } from '../../utils/bundledIcons'; diff --git a/packages/react/src/components/Dashboard/DashboardHeader.story.jsx b/packages/react/src/components/Dashboard/DashboardHeader.story.jsx deleted file mode 100644 index 2360d484a1..0000000000 --- a/packages/react/src/components/Dashboard/DashboardHeader.story.jsx +++ /dev/null @@ -1,136 +0,0 @@ -import React from 'react'; -import { text } from '@storybook/addon-knobs'; -import Pin from '@carbon/icons-react/es/pin/20'; -import Edit from '@carbon/icons-react/es/edit/20'; -import { TrashCan20 } from '@carbon/icons-react'; -import { action } from '@storybook/addon-actions'; -import { DatePicker, DatePickerInput } from 'carbon-components-react'; - -import StoryNotice, { deprecatedStoryTitle } from '../../internal/StoryNotice'; - -import DashboardHeader from './DashboardHeader'; - -export default { - title: '1 - Watson IoT/Deprecated/🚫 Dashboard Header', -}; - -export const Deprecated = () => ; -Deprecated.storyName = deprecatedStoryTitle; - -export const Basic = () => { - return ( -
- -
- ); -}; - -Basic.storyName = 'basic'; - -export const WithFilter = () => { - return ( -
- - - - } - /> -
- ); -}; - -WithFilter.storyName = 'with filter'; - -export const WithCustomActions = () => { - return ( -
- }, - { id: 'delete', labelText: 'Delete', icon: TrashCan20 }, - ]} - onDashboardAction={action('onDashboardAction')} - /> -
- ); -}; - -WithCustomActions.storyName = 'with custom actions'; - -export const WithFilterAndCustomActions = () => { - return ( -
- - - - } - actions={[ - { id: 'edit', labelText: 'Edit', icon: }, - { id: 'delete', labelText: 'Delete', icon: }, - { id: 'pin', labelText: 'Pin', icon: }, - ]} - onDashboardAction={action('onDashboardAction')} - /> -
- ); -}; - -WithFilterAndCustomActions.storyName = 'with filter and custom actions'; - -export const WithCustomActionsComponent = () => { - return ( - we can now send custom components
- ), - }, - ]} - /> - ); -}; - -WithCustomActionsComponent.storyName = 'with custom actions component'; diff --git a/packages/react/src/components/Dashboard/_dashboard-grid.scss b/packages/react/src/components/Dashboard/_dashboard-grid.scss index 02a3529f30..1034584d5f 100644 --- a/packages/react/src/components/Dashboard/_dashboard-grid.scss +++ b/packages/react/src/components/Dashboard/_dashboard-grid.scss @@ -1,3 +1,4 @@ +@use '../../globals/vars' as *; .#{$iot-prefix}--dashboard-grid { position: relative; .react-grid-item.cssTransforms { diff --git a/packages/react/src/components/Dashboard/_dashboard.scss b/packages/react/src/components/Dashboard/_dashboard.scss index 1a256ad84c..60f76404a9 100644 --- a/packages/react/src/components/Dashboard/_dashboard.scss +++ b/packages/react/src/components/Dashboard/_dashboard.scss @@ -1,7 +1,10 @@ -@import '~react-grid-layout/css/styles'; -@import '~react-resizable/css/styles'; -@import '../../globals/vars'; - +@use '~react-grid-layout/css/styles' as *; +@use '~react-resizable/css/styles' as *; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/components/button' as *; .dashboard { &--header { align-items: flex-start; @@ -36,7 +39,7 @@ & > p, div { - color: $text-02; + color: $text-secondary; } } @@ -64,5 +67,5 @@ .react-grid-item.react-grid-placeholder { background: none; - border: 3px dashed $active-secondary; + border: 3px dashed $button-secondary-active; } diff --git a/packages/react/src/components/DashboardEditor/DashboardEditor.jsx b/packages/react/src/components/DashboardEditor/DashboardEditor.jsx index 5556914f4f..24ca840f8a 100644 --- a/packages/react/src/components/DashboardEditor/DashboardEditor.jsx +++ b/packages/react/src/components/DashboardEditor/DashboardEditor.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react'; import PropTypes from 'prop-types'; -import { InlineNotification, SkeletonText, ErrorBoundary } from 'carbon-components-react'; +import { InlineNotification, SkeletonText, ErrorBoundary } from '@carbon/react'; import classnames from 'classnames'; import warning from 'warning'; diff --git a/packages/react/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx b/packages/react/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx index a713c4464f..db102ecbff 100644 --- a/packages/react/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx +++ b/packages/react/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx @@ -1,20 +1,15 @@ import React, { useMemo, useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import { - TrashCan16, - DocumentImport16, - DocumentExport16, - Maximize16, - Tablet16, - Laptop16, - Screen16, -} from '@carbon/icons-react'; -import { - FileUploaderButton, - TooltipIcon, - ContentSwitcher, - TextInput, -} from 'carbon-components-react'; + TrashCan, + DocumentImport, + DocumentExport, + Maximize, + Tablet, + Laptop, + Screen, +} from '@carbon/react/icons'; +import { FileUploaderButton, Tooltip, ContentSwitcher, TextInput } from '@carbon/react'; import { isEmpty } from 'lodash-es'; import { settings } from '../../../constants/Settings'; @@ -152,28 +147,28 @@ const DashboardEditorHeader = ({ @@ -183,7 +178,7 @@ const DashboardEditorHeader = ({ { // FileUploaderButton isn't a true button so extra styling is needed to make it look like a iconOnly button onImport && ( - } + size="md" + labelText={} onChange={onImport} disableLabelChanges accepts={['.json']} multiple={false} data-testid={`${testId}-file-uploader-button`} /> - + ) } {onExport && ( - ) : ( - - )} +
+ + ) : ( +
+ )} +
+ )} +
+ )} +
+
+ {isCustomRange ? ( -
+ ) : ( + + )} +
+ + ); + + return ( + // Escape handler added to allow pressing escape to close the picker from any via event bubbling + // eslint-disable-next-line jsx-a11y/no-static-element-interactions +
setIsExpanded(false))} + ref={fieldRef} + > + + {tooltipValue} + {invalidState ? (

{ i18n={object('i18n', { invalidText: 'The date time entered is invalid', })} - style={{ zIndex: number('zIndex', 100) }} + style={{ zIndex: text('zIndex', '100') }} />

); diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx index 6cbab013cb..6c2107dfbd 100644 --- a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx +++ b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx @@ -9,11 +9,10 @@ import { Select, SelectItem, NumberInput, - TooltipDefinition, OrderedList, ListItem, -} from 'carbon-components-react'; -import { Calendar16, WarningFilled16, ErrorFilled16 } from '@carbon/icons-react'; +} from '@carbon/react'; +import { Calendar, WarningFilled, ErrorFilled } from '@carbon/react/icons'; import classnames from 'classnames'; import { v4 as uuidv4 } from 'uuid'; import warning from 'warning'; @@ -45,7 +44,6 @@ import { useDateTimePickerKeyboardInteraction, useDateTimePickerRangeKind, useDateTimePickerRef, - useDateTimePickerTooltip, useRelativeDateTimeValue, useDateTimePickerClickOutside, useCloseDropdown, @@ -417,7 +415,6 @@ const DateTimePicker = ({ onNavigatePresets, onFieldClick, } = useDateTimePickerKeyboardInteraction({ expanded, setCustomRangeKind }); - const [isTooltipOpen, toggleTooltip, setIsTooltipOpen] = useDateTimePickerTooltip({ isExpanded }); const [singleDateValue, setSingleDateValue] = useState(null); const [singleTimeValue, setSingleTimeValue] = useState(null); @@ -451,7 +448,6 @@ const DateTimePicker = ({ startTime: null, }, }; - const translatedMeridian = { AM: mergedI18n.amString, am: mergedI18n.amString, @@ -487,6 +483,7 @@ const DateTimePicker = ({ */ const renderValue = (clickedPreset = null) => { const value = { ...dateTimePickerBaseValue }; + if (isCustomRange) { if (customRangeKind === PICKER_KINDS.RELATIVE) { value.relative = relativeValue; @@ -520,6 +517,7 @@ const DateTimePicker = ({ } setCurrentValue(value); const parsedValue = parseValue(value, dateTimeMask, mergedI18n.toLabel, hasTimeInput); + setHumanValue(getLocalizedTimeValue(parsedValue.readableValue)); return { @@ -613,7 +611,6 @@ const DateTimePicker = ({ const newSingleDate = { ...singleDateValue }; newSingleDate.start = start; newSingleDate.startDate = dayjs(newSingleDate.start).format('MM/DD/YYYY'); - setSingleDateValue(newSingleDate); setInvalidRangeStartDate(!newSingleDate.startDate); }; @@ -848,13 +845,6 @@ const DateTimePicker = ({ onClear(returnValue); }; - // Close tooltip if dropdown was closed by click outside - const onFieldBlur = (evt) => { - if (evt.target !== evt.currentTarget) { - setIsTooltipOpen(false); - } - }; - const closeDropdown = useCloseDropdown({ isExpanded, isCustomRange, @@ -881,7 +871,7 @@ const DateTimePicker = ({ diff --git a/packages/react/src/components/EmptyState/EmptyState.story.jsx b/packages/react/src/components/EmptyState/EmptyState.story.jsx index d5241dfe3c..81120c1e1b 100644 --- a/packages/react/src/components/EmptyState/EmptyState.story.jsx +++ b/packages/react/src/components/EmptyState/EmptyState.story.jsx @@ -1,9 +1,9 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { text, select, boolean } from '@storybook/addon-knobs'; +import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react'; import { DashboardIcon } from '../../icons/components'; -import { Tabs, Tab } from '../Tabs'; import EmptyState from './EmptyState'; @@ -173,27 +173,34 @@ export const WithCustomBody = () => ( export const TabsWithEmptyState = () => { return ( - - - - - - - - - + + provide a label + provide a label + provide a label + + + + + + + + + + + + ); }; diff --git a/packages/react/src/components/EmptyState/_emptystate.scss b/packages/react/src/components/EmptyState/_emptystate.scss index 401e8a0840..d36afc6f7c 100644 --- a/packages/react/src/components/EmptyState/_emptystate.scss +++ b/packages/react/src/components/EmptyState/_emptystate.scss @@ -1,6 +1,10 @@ -@import '../../globals/vars'; -@import '../../globals/spacing'; -@import '../../globals/typography'; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/components/button' as *; .#{$iot-prefix}--empty-state { $parent-container: &; @@ -39,8 +43,8 @@ } &--title { - @include type-style('productive-heading-03'); - color: $text-01; + @include type-style('heading-03'); + color: $text-primary; margin-bottom: $spacing-03; word-break: break-word; @@ -50,13 +54,13 @@ } &--title--sm { - @include type-style('productive-heading-02'); + @include type-style('heading-compact-02'); margin-bottom: $spacing-02; } &--text { - color: $text-01; - @include type-style('body-short-01'); + color: $text-primary; + @include type-style('body-compact-01'); #{$parent-container}--inline & { grid-column: 2/2; @@ -73,8 +77,8 @@ &--link { margin-top: $spacing-05; - @include type-style('body-short-01'); - color: $interactive-01; + @include type-style('body-compact-01'); + color: $button-primary; #{$parent-container}--inline & { grid-column: 2/2; diff --git a/packages/react/src/components/ErrorBoundry/ErrorBoundry.story.jsx b/packages/react/src/components/ErrorBoundry/ErrorBoundry.story.jsx index b1784765a8..38ed211f19 100644 --- a/packages/react/src/components/ErrorBoundry/ErrorBoundry.story.jsx +++ b/packages/react/src/components/ErrorBoundry/ErrorBoundry.story.jsx @@ -1 +1,5 @@ -export { default as ErrorBoundaryStory } from 'carbon-components-react/es/components/ErrorBoundary/ErrorBoundary-story'; +import { ErrorBoundary } from '@carbon/react'; + +export default { + component: ErrorBoundary, +}; diff --git a/packages/react/src/components/FileDrop/FileDrop.jsx b/packages/react/src/components/FileDrop/FileDrop.jsx index 32fe3776e0..dc9eb4a43a 100644 --- a/packages/react/src/components/FileDrop/FileDrop.jsx +++ b/packages/react/src/components/FileDrop/FileDrop.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Filename, FileUploaderButton } from 'carbon-components-react'; +import { Filename, FileUploaderButton } from '@carbon/react'; import { settings } from '../../constants/Settings'; diff --git a/packages/react/src/components/FileDrop/_file-drop.scss b/packages/react/src/components/FileDrop/_file-drop.scss index 5e78cc17ee..7252d0d43d 100644 --- a/packages/react/src/components/FileDrop/_file-drop.scss +++ b/packages/react/src/components/FileDrop/_file-drop.scss @@ -1,8 +1,11 @@ -@import '~carbon-components/scss/globals/scss/vars'; - +@use '@carbon/react/scss/config' as *; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/components/button' as *; .#{$iot-prefix}--file-drop { &__selected-file { - background-color: rgba(85, 150, 230, 0.1); + background-color: rgba(85, 150, 230, 0.1) !important; } &__link-button { @@ -11,7 +14,7 @@ padding: 0; font: inherit; outline: none; - color: $interactive-01; + color: $button-primary; cursor: pointer; margin-left: 0.25rem; text-decoration: underline; diff --git a/packages/react/src/components/FileUploader/FileUploader-story.scss b/packages/react/src/components/FileUploader/FileUploader-story.scss index 3f6f3be3cd..06c1c58327 100644 --- a/packages/react/src/components/FileUploader/FileUploader-story.scss +++ b/packages/react/src/components/FileUploader/FileUploader-story.scss @@ -1,4 +1,4 @@ -@import '../../globals/vars'; +@use '../../globals/vars' as *; .#{$prefix}--file__selected-file { width: 288px; } diff --git a/packages/react/src/components/FileUploader/FileUploader.story.jsx b/packages/react/src/components/FileUploader/FileUploader.story.jsx index eeb87727e6..533233f88e 100644 --- a/packages/react/src/components/FileUploader/FileUploader.story.jsx +++ b/packages/react/src/components/FileUploader/FileUploader.story.jsx @@ -8,22 +8,20 @@ */ /* eslint-disable no-console */ - import React, { createElement } from 'react'; import { action } from '@storybook/addon-actions'; import { withKnobs, array, boolean, number, select, text } from '@storybook/addon-knobs'; -import { settings } from 'carbon-components'; - +// import { settings } from 'carbon-components'; import { FileUploader, - FileUploaderButton, FileUploaderSkeleton, FileUploaderItem, FileUploaderDropContainer, -} from '.'; -import './FileUploader-story.scss'; +} from '@carbon/react'; +// import './FileUploader-story.scss'; -const { prefix } = settings; +// const { prefix } = settings; +const prefix = 'cds'; const buttonKinds = { 'Primary (primary)': 'primary', 'Secondary (secondary)': 'secondary', @@ -33,9 +31,9 @@ const buttonKinds = { 'Tertiary (tertiary)': 'tertiary', }; const sizes = { - Default: 'default', - Field: 'field', - Small: 'small', + 'Large size (lg)': 'lg', + 'Regular size (md)': 'md', + 'Small size (sm)': 'sm', }; const filenameStatuses = { 'Edit (edit)': 'edit', @@ -53,7 +51,7 @@ const props = { multiple: boolean('Supports multiple files (multiple)', true), disabled: boolean('Disabled (disabled)', false), buttonKind: buttonKind || 'primary', - size: select('Button size (size)', sizes, 'default'), + size: select('Button size (size)', sizes, 'md'), disableLabelChanges: boolean( 'Prevent the label from being replaced with file selected file (disableLabelChanges)', false @@ -80,7 +78,7 @@ const props = { ), buttonLabel: text('The button label (buttonLabel)', 'Add file'), buttonKind: buttonKind || 'primary', - size: select('Button size (size)', sizes, 'default'), + size: select('Button size (size)', sizes, 'md'), filenameStatus: select('Status for file name (filenameStatus)', filenameStatuses, 'edit'), accept: array('Accepted file extensions (accept)', ['.jpg', '.png'], ','), name: text('Form item name: (name)', ''), @@ -102,10 +100,10 @@ const props = { 'Error body (errorBody)', '500kb max file size. Select a new file and try again.' ), - size: select('FileUploaderItem height (size)', sizes, 'default'), + size: select('FileUploaderItem height (size)', sizes, 'md'), }), fileUploaderDropContainer: () => ({ - size: select('Filename height (size)', sizes, 'default'), + size: select('Filename height (size)', sizes, 'md'), labelText: text('Label text (labelText)', 'Drag and drop files here or click to upload'), name: text('Form item name (name)', ''), multiple: boolean('Supports multiple files (multiple)', true), @@ -127,13 +125,6 @@ export default { parameters: { component: FileUploader, - - subcomponents: { - FileUploaderButton, - FileUploaderSkeleton, - FileUploaderItem, - FileUploaderDropContainer, - }, }, }; @@ -195,7 +186,7 @@ DragAndDropUploadContainerExampleApplication.decorators = [createElement]; export const Skeleton = () => (
- +
); diff --git a/packages/react/src/components/FileUploader/_file-uploader.scss b/packages/react/src/components/FileUploader/_file-uploader.scss index 4fa1926c22..9533fbc1a0 100644 --- a/packages/react/src/components/FileUploader/_file-uploader.scss +++ b/packages/react/src/components/FileUploader/_file-uploader.scss @@ -1 +1,5 @@ -@import '~carbon-components/scss/components/file-uploader/file-uploader'; +@use '@carbon/react/scss/components/file-uploader' as *; +@use '@carbon/react/scss/config' as *; +.#{$prefix}--file__selected-file { + width: 288px; +} diff --git a/packages/react/src/components/FileUploader/index.js b/packages/react/src/components/FileUploader/index.js index 4ad3330d62..52b1d65626 100644 --- a/packages/react/src/components/FileUploader/index.js +++ b/packages/react/src/components/FileUploader/index.js @@ -5,4 +5,4 @@ export { FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, -} from 'carbon-components-react'; +} from '@carbon/react'; diff --git a/packages/react/src/components/FileUploader/stories/drop-container.jsx b/packages/react/src/components/FileUploader/stories/drop-container.jsx index f9c4af80c6..12b9026fc6 100644 --- a/packages/react/src/components/FileUploader/stories/drop-container.jsx +++ b/packages/react/src/components/FileUploader/stories/drop-container.jsx @@ -9,14 +9,15 @@ import React, { useState, useCallback, useEffect } from 'react'; import classnames from 'classnames'; -import { settings } from 'carbon-components'; -import uid from 'carbon-components-react/es/tools/uniqueId'; +// import { settings } from 'carbon-components'; +import uid from '@carbon/react/es/tools/uniqueId'; import { FileUploaderItem, FileUploaderDropContainer } from '../index'; import { FormItem } from '../../FormItem'; -import '../FileUploader-story.scss'; +// import '../FileUploader-story.scss'; carbon 11 -const { prefix } = settings; +// const { prefix } = settings; nned to update carbon 11 +const prefix = 'cds'; const ExampleDropContainerApp = (props) => { const [files, setFiles] = useState([]); diff --git a/packages/react/src/components/FilterTags/FilterTags.jsx b/packages/react/src/components/FilterTags/FilterTags.jsx index d4f752dee0..de7d9b9848 100644 --- a/packages/react/src/components/FilterTags/FilterTags.jsx +++ b/packages/react/src/components/FilterTags/FilterTags.jsx @@ -1,7 +1,7 @@ import React, { useRef, useEffect, useLayoutEffect, useState, Children } from 'react'; import PropTypes from 'prop-types'; -import { OverflowMenuItem, OverflowMenu } from 'carbon-components-react'; -import { Close16 } from '@carbon/icons-react'; +import { OverflowMenuItem, OverflowMenu } from '@carbon/react'; +import { Close } from '@carbon/react/icons'; import classnames from 'classnames'; import { settings } from '../../constants/Settings'; @@ -30,7 +30,7 @@ const DefaultWrapper = React.forwardRef(({ children, i18n, ...props }, ref) => { const OverflowTag = ({ children }) => (
{children} - +
); diff --git a/packages/react/src/components/FilterTags/_filter-tags.scss b/packages/react/src/components/FilterTags/_filter-tags.scss index 1b67d1544b..ba53b173d3 100644 --- a/packages/react/src/components/FilterTags/_filter-tags.scss +++ b/packages/react/src/components/FilterTags/_filter-tags.scss @@ -1,3 +1,5 @@ +@use '@carbon/react/scss/config' as *; +@use '../../globals/vars' as *; .#{$iot-prefix}--filtertags-container { &__wrap { white-space: nowrap; diff --git a/packages/react/src/components/FlyoutMenu/FlyoutMenu.jsx b/packages/react/src/components/FlyoutMenu/FlyoutMenu.jsx index 5dd22602b5..2e5f6153f6 100644 --- a/packages/react/src/components/FlyoutMenu/FlyoutMenu.jsx +++ b/packages/react/src/components/FlyoutMenu/FlyoutMenu.jsx @@ -1,10 +1,10 @@ import React, { useEffect, useRef, useState, useMemo } from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; -import { SettingsAdjust16 as SettingsAdjust } from '@carbon/icons-react'; +import { SettingsAdjust } from '@carbon/react/icons'; import Button from '../Button/Button'; -import { Tooltip } from '../Tooltip'; +import { ToggleTip } from '../ToggleTip'; import { settings } from '../../constants/Settings'; import { usePopoverPositioning } from '../../hooks/usePopoverPositioning'; @@ -37,6 +37,22 @@ const getTooltipDirection = (direction) => { } }; +const getTooltipPosition = (menuDirection) => { + switch (menuDirection) { + case FlyoutMenuDirection.TopStart: + case FlyoutMenuDirection.TopEnd: + return 'bottom'; + case FlyoutMenuDirection.RightStart: + case FlyoutMenuDirection.RightEnd: + return 'left'; + case FlyoutMenuDirection.LeftStart: + case FlyoutMenuDirection.LeftEnd: + return 'right'; + default: + return 'top'; + } +}; + // No need to do prop checks since these are alredy done in flyout /* eslint-disable react/prop-types */ @@ -92,18 +108,16 @@ const FlyoutMenu = ({ renderIcon, testId, tooltipId, - triggerId, tabIndex, + className, tooltipClassName, tooltipContentClassName, passive, - tooltipFocusTrap, hideTooltip, customFooter: CustomFooter, onApply, onCancel, useAutoPositioning, - onChange, isOpen, renderInPortal, style, @@ -213,7 +227,7 @@ const FlyoutMenu = ({ [menuOffset] ); - const [calculateMenuOffset, { adjustedDirection }] = usePopoverPositioning({ + const [, { adjustedDirection }] = usePopoverPositioning({ direction, menuOffset: getFlyoutMenuOffset, useAutoPositioning, @@ -246,33 +260,17 @@ const FlyoutMenu = ({ { [`${iotPrefix}--flyout-menu__light`]: light, [`${iotPrefix}--flyout-menu__open`]: isControlledOpen, + [`${iotPrefix}--flyout-menu__hide-icon-btn-tooltip`]: !iconDescription, + [className]: !!className, } )} > - - ) : null} - - {description ? ( - - {description} - - ) : null} - - )} - - ); -}; -Hero.propTypes = HeroPropTypes; -Hero.defaultProps = defaultProps; - -export default Hero; diff --git a/packages/react/src/components/Hero/Hero.story.jsx b/packages/react/src/components/Hero/Hero.story.jsx deleted file mode 100644 index 9f0d64a743..0000000000 --- a/packages/react/src/components/Hero/Hero.story.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; - -import Button from '../Button'; -import FullWidthWrapper from '../../internal/FullWidthWrapper'; -import StoryNotice, { deprecatedStoryTitle } from '../../internal/StoryNotice'; - -import Hero from './Hero'; - -const commonPageHeroProps = { - title: 'Explore', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut auctor tortor, et condimentum dolor. Pellentesque ac justo nec dui semper bibendum. Sed mollis euismod nisi nec dapibus. Vestibulum vehicula tristique mi facilisis aliquet. Sed lacinia nisi eget dolor suscipit convallis', - rightContent:
Right Content
, -}; - -const breadcrumb = [Home, Type, Instance]; - -const tooltip = { - message: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut auctor tortor, et condimentum dolor.', - href: '/', - linkLabel: 'Learn more', -}; - -export default { - title: '1 - Watson IoT/Deprecated/🚫 Hero', - decorators: [(storyFn) => {storyFn()}], -}; - -export const Deprecated = () => ( - -); -Deprecated.storyName = deprecatedStoryTitle; - -export const Normal = () => ; - -Normal.storyName = 'normal'; - -export const WithDescription = () => ( - -); - -WithDescription.storyName = 'with description'; - -export const IsLoading = () => ; - -IsLoading.storyName = 'isLoading'; - -export const WithRightContent = () => ( - -
Here is a long message relating some status... 
- - - - } - /> -); - -WithRightContent.storyName = 'with right content'; - -export const WithBreadcrumbWithRightContent = () => ( - breadcrumb Right Content} - /> -); - -WithBreadcrumbWithRightContent.storyName = 'with breadcrumb with right content'; - -export const WithBreadcrumb = () => ; - -WithBreadcrumb.storyName = 'with breadcrumb'; - -export const WithTooltip = () => ( - -); - -WithTooltip.storyName = 'with tooltip'; - -export const WithTooltipNoLink = () => ( - -); - -WithTooltipNoLink.storyName = 'with tooltip (no link)'; - -export const WithCloseButton = () => ( - -); - -WithCloseButton.storyName = 'with close button'; diff --git a/packages/react/src/components/Hero/Hero.test.jsx b/packages/react/src/components/Hero/Hero.test.jsx deleted file mode 100644 index 7510cce483..0000000000 --- a/packages/react/src/components/Hero/Hero.test.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { screen, render } from '@testing-library/react'; - -import Hero from './Hero'; - -describe('Hero', () => { - it('should be selectable by testId', () => { - render(); - - expect(screen.getByTestId('HERO')).toBeDefined(); - expect(screen.getByTestId('HERO-close-button')).toBeDefined(); - expect(screen.getByTestId('HERO-title')).toBeDefined(); - expect(screen.getByTestId('HERO-description')).toBeDefined(); - }); -}); diff --git a/packages/react/src/components/Hero/__snapshots__/Hero.story.storyshot b/packages/react/src/components/Hero/__snapshots__/Hero.story.storyshot deleted file mode 100644 index 460b2c32cd..0000000000 --- a/packages/react/src/components/Hero/__snapshots__/Hero.story.storyshot +++ /dev/null @@ -1,827 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero isLoading 1`] = ` -
-
-
-

-

-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero normal 1`] = ` -
-
-
-
-
- Explore -
-
-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero with breadcrumb 1`] = ` -
-
-
-
- -
-
-
-
- Explore -
-
-
- Right Content -
-
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut auctor tortor, et condimentum dolor. Pellentesque ac justo nec dui semper bibendum. Sed mollis euismod nisi nec dapibus. Vestibulum vehicula tristique mi facilisis aliquet. Sed lacinia nisi eget dolor suscipit convallis -

-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero with breadcrumb with right content 1`] = ` -
-
-
-
- -
-
- breadcrumb Right Content -
-
-
-
-
- Explore -
-
-
- Right Content -
-
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut auctor tortor, et condimentum dolor. Pellentesque ac justo nec dui semper bibendum. Sed mollis euismod nisi nec dapibus. Vestibulum vehicula tristique mi facilisis aliquet. Sed lacinia nisi eget dolor suscipit convallis -

-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero with close button 1`] = ` -
-
-
-
- -
-
-
-
- Explore -
-
-
- Right Content -
-
- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut auctor tortor, et condimentum dolor. Pellentesque ac justo nec dui semper bibendum. Sed mollis euismod nisi nec dapibus. Vestibulum vehicula tristique mi facilisis aliquet. Sed lacinia nisi eget dolor suscipit convallis -

-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero with description 1`] = ` -
-
-
-
-
- Explore -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut auctor tortor, et condimentum dolor. Pellentesque ac justo nec dui semper bibendum. Sed mollis euismod nisi nec dapibus. Vestibulum vehicula tristique mi facilisis aliquet. Sed lacinia nisi eget dolor suscipit convallis -

-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero with right content 1`] = ` -
-
-
-
-
- Explore -
-
-
-
- Here is a long message relating some status...  -
- - -
-
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut auctor tortor, et condimentum dolor. Pellentesque ac justo nec dui semper bibendum. Sed mollis euismod nisi nec dapibus. Vestibulum vehicula tristique mi facilisis aliquet. Sed lacinia nisi eget dolor suscipit convallis -

-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero with tooltip (no link) 1`] = ` -
-
-
-
- -
-
-
-
- Explore -
- -
- - - - -
-
-
-
-
- Right Content -
-
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut auctor tortor, et condimentum dolor. Pellentesque ac justo nec dui semper bibendum. Sed mollis euismod nisi nec dapibus. Vestibulum vehicula tristique mi facilisis aliquet. Sed lacinia nisi eget dolor suscipit convallis -

-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero with tooltip 1`] = ` -
-
-
-
- -
-
-
-
- Explore -
- -
- - - - -
-
-
-
-
- Right Content -
-
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut auctor tortor, et condimentum dolor. Pellentesque ac justo nec dui semper bibendum. Sed mollis euismod nisi nec dapibus. Vestibulum vehicula tristique mi facilisis aliquet. Sed lacinia nisi eget dolor suscipit convallis -

-
-
-
-`; - -exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/Deprecated/🚫 Hero ️⛔ Deprecation Notice 1`] = ` -
-
-
- - - - - warning icon - - -
-

- Deprecation Notice -

-
- Hero has been deprecated and will be removed in the next major version of carbon-addons-iot-react. -
-
- Refactor usages of Hero to use PageTitleBar instead. -
-
-
-
-
-`; diff --git a/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.jsx b/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.jsx index a5d955191d..d1b009ccc5 100644 --- a/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.jsx +++ b/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.jsx @@ -1,6 +1,6 @@ import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; -import { Erase32 } from '@carbon/icons-react'; +import { Erase } from '@carbon/react/icons'; import classnames from 'classnames'; import { settings } from '../../../constants/Settings'; @@ -118,8 +118,8 @@ const DynamicHotspotSourcePicker = ({ [`${classname}__clear-button--invisible`]: !selectedSourceIdX || !selectedSourceIdY, })} kind="ghost" - size="small" - renderIcon={Erase32} + size="sm" + renderIcon={(props) => } iconDescription={clearIconDescription} tooltipPosition="top" tooltipAlignment="end" diff --git a/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.story.jsx b/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.story.jsx index efea909406..838d72fc33 100644 --- a/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.story.jsx +++ b/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.story.jsx @@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions'; import { withKnobs, object } from '@storybook/addon-knobs'; import DynamicHotspotSourcePicker from './DynamicHotspotSourcePicker'; -import DynamicHotspotSourcePickerREADME from './DynamicHotspotSourcePickerREADME.mdx'; +// import DynamicHotspotSourcePickerREADME from './DynamicHotspotSourcePickerREADME.mdx'; //carbon 11 const dataItems = [ { @@ -21,9 +21,9 @@ export default { decorators: [withKnobs], parameters: { component: DynamicHotspotSourcePicker, - docs: { - page: DynamicHotspotSourcePickerREADME, - }, + // docs: { + // page: DynamicHotspotSourcePickerREADME, + // }, //carbon 11 }, }; diff --git a/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/_dynamic-hotspot-source-picker.scss b/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/_dynamic-hotspot-source-picker.scss index 64d7340bce..355fc9e9e8 100644 --- a/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/_dynamic-hotspot-source-picker.scss +++ b/packages/react/src/components/HotspotEditorModal/DynamicHotspotSourcePicker/_dynamic-hotspot-source-picker.scss @@ -1,4 +1,6 @@ -@import '../../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '../../../globals/vars' as *; .#{$iot-prefix}--dynamic-hotspot-source-picker { display: flex; @@ -16,8 +18,9 @@ } .#{$iot-prefix}--dynamic-hotspot-source-picker__clear-button { - margin-left: $spacing-02; + margin-left: $spacing-02 !important; height: $spacing-08; + margin-bottom: $spacing-02 !important; } .#{$iot-prefix}--dynamic-hotspot-source-picker__clear-button--invisible { diff --git a/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx b/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx index 322cfc9aaa..51285c3e49 100644 --- a/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx +++ b/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx @@ -1,7 +1,7 @@ import React, { useState, useCallback } from 'react'; import PropTypes from 'prop-types'; -import { Edit16 } from '@carbon/icons-react'; -import { MultiSelect } from 'carbon-components-react'; +import { Edit } from '@carbon/react/icons'; +import { MultiSelect } from '@carbon/react'; import { isEmpty } from 'lodash-es'; import DataSeriesFormItemModal from '../../CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal'; @@ -239,10 +239,10 @@ const HotspotEditorDataSourceTab = ({ rowActions: () => [
diff --git a/packages/react/src/components/ImageCard/ImageHotspots.jsx b/packages/react/src/components/ImageCard/ImageHotspots.jsx index f22760016d..2b0f0bb760 100644 --- a/packages/react/src/components/ImageCard/ImageHotspots.jsx +++ b/packages/react/src/components/ImageCard/ImageHotspots.jsx @@ -1,6 +1,6 @@ import React, { useCallback, useMemo, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { InlineLoading } from 'carbon-components-react'; +import { InlineLoading } from '@carbon/react'; import { omit, isEmpty } from 'lodash-es'; import warning from 'warning'; @@ -852,7 +852,7 @@ const ImageHotspots = ({ } }} > - {src && ( + {src ? ( - )} + ) : null} {isHotspotDataLoading ? ( ) : null} - {!isHotspotDataLoading && !hideHotspots && hotspots && ( + {!isHotspotDataLoading && !hideHotspots && hotspots ? (
{cachedHotspots}
- )} - {!hideZoomControls && ( + ) : null} + {!hideZoomControls ? ( - )} + ) : null}
); }; diff --git a/packages/react/src/components/ImageCard/ImageHotspots.test.jsx b/packages/react/src/components/ImageCard/ImageHotspots.test.jsx index 7009107634..e2b4117c21 100644 --- a/packages/react/src/components/ImageCard/ImageHotspots.test.jsx +++ b/packages/react/src/components/ImageCard/ImageHotspots.test.jsx @@ -4,7 +4,7 @@ import { act, isDOMComponent } from 'react-dom/test-utils'; import { fireEvent, render, screen, within } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import userEvent from '@testing-library/user-event'; -import { Error32 } from '@carbon/icons-react'; +import { Error } from '@carbon/react/icons'; import landscape from './landscape.jpg'; import portrait from './portrait.jpg'; @@ -1364,7 +1364,7 @@ describe('ImageHotspots', () => { icons={[ { id: 'CustomError', - icon: Error32, + icon: Error, text: 'CustomError', }, ]} @@ -1403,7 +1403,7 @@ describe('ImageHotspots', () => { icons={[ { id: 'CustomError', - icon: Error32, + icon: Error, text: 'CustomError', }, ]} diff --git a/packages/react/src/components/ImageCard/ImageUploader.jsx b/packages/react/src/components/ImageCard/ImageUploader.jsx index 18be987d3e..cbca3b61bd 100644 --- a/packages/react/src/components/ImageCard/ImageUploader.jsx +++ b/packages/react/src/components/ImageCard/ImageUploader.jsx @@ -1,7 +1,7 @@ import React, { useState, useRef, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { FileUploaderDropContainer, TextInput, InlineNotification } from 'carbon-components-react'; -import { Image32 } from '@carbon/icons-react'; +import { FileUploaderDropContainer, TextInput, InlineNotification } from '@carbon/react'; +import { Image } from '@carbon/react/icons'; import classnames from 'classnames'; import { settings } from '../../constants/Settings'; @@ -188,13 +188,13 @@ const ImageUploader = ({ ) : ( <>
- +

diff --git a/packages/react/src/components/ImageCard/_hotspot-content.scss b/packages/react/src/components/ImageCard/_hotspot-content.scss index 749723a366..c773a29f06 100644 --- a/packages/react/src/components/ImageCard/_hotspot-content.scss +++ b/packages/react/src/components/ImageCard/_hotspot-content.scss @@ -1,16 +1,26 @@ -@import '../../globals/vars'; - +@use '../../globals/vars' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/type' as *; .#{$iot-prefix}--hotspot-content { h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - font-size: carbon--type-scale(5); + font-size: type-scale(5); padding-bottom: $spacing-03; - color: $ui-01; + color: $layer-01; + &.#{$iot-prefix}--hotspot-content-fixed-title { + display: flex; + justify-content: center; + } } &-description { padding-bottom: $spacing-03; + @include type-style('label-02'); } &-attribute { display: flex; @@ -23,7 +33,9 @@ text-align: left; } &-label { - font-weight: bold; + @include type-style('heading-compact-02'); + letter-spacing: 0.16px; + line-height: $spacing-01; } &-threshold-section { flex: 0; @@ -32,8 +44,11 @@ align-items: center; } &-threshold { + @include type-style('body-compact-02'); padding-left: var(--threshold-padding); color: var(--threshold-color); + letter-spacing: 0.16px; + line-height: $spacing-01; } &-unit { padding-left: $spacing-01; diff --git a/packages/react/src/components/ImageCard/_hotspot.scss b/packages/react/src/components/ImageCard/_hotspot.scss index 28a538f174..76b176d3e4 100644 --- a/packages/react/src/components/ImageCard/_hotspot.scss +++ b/packages/react/src/components/ImageCard/_hotspot.scss @@ -1,11 +1,16 @@ // Part of the css and the colors used come from old StyledComponents code // and should be replaced with actual carbon colors and design. See issue 1806 -@import '../../globals/vars'; -@import '../../globals/theme'; - +@use '../../globals/vars' as *; +@use '../../globals/theme' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/utilities/box-shadow' as *; $selected-border-width: $spacing-01; -$selected-border: solid $selected-border-width $interactive-04; +$selected-border: solid $selected-border-width $border-interactive; // The custom properties --x-pos, --y-pos, --width, --height are set // on the container by the react js code. They do not include units. @@ -26,6 +31,7 @@ $selected-border: solid $selected-border-width $interactive-04; box-sizing: border-box; border: $selected-border; padding: #{$padding}; + /* stylelint-disable scss/operator-no-newline-after */ top: calc( (var(--y-pos) * 1%) - (((var(--height) * 1px) * 0.5) + #{$padding} + #{$selected-border-width}) @@ -35,7 +41,7 @@ $selected-border: solid $selected-border-width $interactive-04; ); } &.#{$iot-prefix}--hotspot-container--has-icon { - .#{$prefix}--tooltip__label { + .#{$prefix}--tooltip-trigger__wrapper { border: solid 1px $gray-40; cursor: pointer; padding: $spacing-02; @@ -46,7 +52,7 @@ $selected-border: solid $selected-border-width $interactive-04; } } - .#{$prefix}--tooltip__label { + .#{$prefix}--tooltip-trigger__wrapper { display: flex; cursor: pointer; border-radius: 13px; @@ -96,7 +102,7 @@ $selected-border: solid $selected-border-width $interactive-04; } h4 { - @include type-style('productive-heading-01'); + @include type-style('heading-compact-01'); text-align: left; padding-bottom: 0; line-height: calc(var(--title-font-size) * 1.4px); @@ -109,13 +115,13 @@ $selected-border: solid $selected-border-width $interactive-04; // ((var(--title-font-size) * 1px) / 16px) * 1rem // ); - // stylelint-disable-next-line declaration-property-unit-blacklist + // stylelint-disable-next-line declaration-property-unit-disallowed-list font-size: calc(var(--title-font-size) * 1px); // Used to expand the hotspot while the user types into the TextInput &.#{$iot-prefix}--hotspot-content-title__visually-hidden { visibility: hidden; - height: 0px; + height: 0; } } } @@ -133,7 +139,7 @@ $selected-border: solid $selected-border-width $interactive-04; $negative-margin-to-overide-parent-padding: calc(-1 * (#{$padding})); margin: $negative-margin-to-overide-parent-padding; - .#{$iot-prefix}--hotspot-content-title-input { + input.#{$prefix}--text-input { padding: 0 calc(#{$padding} + #{$selected-border-width}); width: calc( (var(--width) * 1px) - (#{$selected-border-width} * 2) - (var(--border-width) * 1px * 2) diff --git a/packages/react/src/components/ImageCard/_image-card.scss b/packages/react/src/components/ImageCard/_image-card.scss index b416d174bd..4ab2b7bfaf 100644 --- a/packages/react/src/components/ImageCard/_image-card.scss +++ b/packages/react/src/components/ImageCard/_image-card.scss @@ -1,4 +1,5 @@ -@import '~carbon-components/scss/globals/scss/vars'; +@use '@carbon/react/scss/config' as *; +@use '../../globals/vars' as *; .#{$iot-prefix}--image-card { &__wrapper { diff --git a/packages/react/src/components/ImageCard/_image-uploader.scss b/packages/react/src/components/ImageCard/_image-uploader.scss index 8791e90a87..7b99b1084b 100644 --- a/packages/react/src/components/ImageCard/_image-uploader.scss +++ b/packages/react/src/components/ImageCard/_image-uploader.scss @@ -1,10 +1,16 @@ +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type' as *; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/components/button' as *; .#{$iot-prefix}--image-uploader { - background: $ui-02; + background: $layer-02; display: flex; height: calc(100% - 1rem); margin-top: $spacing-05; overflow: hidden; - padding: 9rem $spacing-05 $spacing-05; /* stylelint-disable-line declaration-property-unit-blacklist */ + padding: 9rem $spacing-05 $spacing-05; /* stylelint-disable-line declaration-property-unit-disallowed-list */ width: 100%; &-icon { @@ -15,9 +21,9 @@ } &-drop-label-text { - color: $interactive-01; + color: $button-primary; display: block; - @include carbon--type-style('productive-heading-02'); + @include type-style('heading-compact-02'); margin-bottom: $spacing-03; } @@ -104,7 +110,7 @@ } .#{$iot-prefix}--image-uploader-drop-label-text { - @include carbon--type-style('productive-heading-01'); + @include type-style('heading-compact-01'); margin-bottom: $spacing-05; } @@ -137,7 +143,7 @@ padding-top: $spacing-07; .#{$iot-prefix}--image-uploader-drop-description-text { - @include carbon--type-style('body-long-01'); + @include type-style('body-01'); } .#{$iot-prefix}--image-uploader-url-wrapper { diff --git a/packages/react/src/components/ImageGalleryModal/ImageGalleryModal.jsx b/packages/react/src/components/ImageGalleryModal/ImageGalleryModal.jsx index 88c8dfa62d..65cd23d0a7 100644 --- a/packages/react/src/components/ImageGalleryModal/ImageGalleryModal.jsx +++ b/packages/react/src/components/ImageGalleryModal/ImageGalleryModal.jsx @@ -1,15 +1,13 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Grid20, List20 } from '@carbon/icons-react'; +import { Grid, List } from '@carbon/react/icons'; import { omit, isEqual } from 'lodash-es'; -import { Modal } from 'carbon-components-react'; +import { Modal, Search, ContentSwitcher } from '@carbon/react'; import { settings } from '../../constants/Settings'; import ComposedModal from '../ComposedModal'; import IconSwitch from '../IconSwitch/IconSwitch'; -import { Search } from '../Search'; -import { ContentSwitcher } from '../ContentSwitcher'; import { ComposedModalPropTypes } from '../ComposedModal/ComposedModal'; import { usePrevious } from '../../hooks/usePrevious'; @@ -222,7 +220,7 @@ const ImageGalleryModal = ({ name={GRID} size="large" text={gridButtonText} - renderIcon={Grid20} + renderIcon={(props) => } index={0} data-testid={`${testId}-grid-switch`} /> @@ -230,7 +228,7 @@ const ImageGalleryModal = ({ name={LIST} size="large" text={listButtonText} - renderIcon={List20} + renderIcon={(props) => } index={1} data-testid={`${testId}-list-switch`} /> diff --git a/packages/react/src/components/ImageGalleryModal/ImageTile.jsx b/packages/react/src/components/ImageGalleryModal/ImageTile.jsx index 881970854c..d1bc7c8b26 100644 --- a/packages/react/src/components/ImageGalleryModal/ImageTile.jsx +++ b/packages/react/src/components/ImageGalleryModal/ImageTile.jsx @@ -1,5 +1,5 @@ -import { SelectableTile } from 'carbon-components-react'; -import { TrashCan16 } from '@carbon/icons-react'; +import { SelectableTile } from '@carbon/react'; +import { TrashCan } from '@carbon/react/icons'; import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; @@ -75,7 +75,7 @@ const ImageTile = ({ {onDelete ? (

) : null; @@ -269,10 +269,10 @@ const ListItem = ({ const dragIcon = () => isLocked ? ( - + ) : editingStyle ? (
- { const secondaryValue = text('secondaryValue', undefined); const iconName = select('icon', ['none', 'Star16', 'StarFilled16']); const iconComponent = - iconName === 'Star16' ? Star16 : iconName === 'StarFilled16' ? StarFilled16 : null; + iconName === 'Star16' ? Star : iconName === 'StarFilled16' ? StarFilled : null; const rowActionSet = select('row action example', ['none', 'single', 'multi'], 'none'); const tagsConfig = select('tags example', ['none', 'single', 'multi'], 'none'); @@ -50,10 +50,10 @@ export const BasicWKnobs = () => { tooltipPosition={document.dir === 'ltr' ? 'left' : 'right'} key="list-item-edit" style={{ color: 'black' }} - renderIcon={Edit16} + renderIcon={Edit} hasIconOnly kind="ghost" - size="small" + size="sm" onClick={() => action('row action clicked')} iconDescription="Edit" />, @@ -148,7 +148,7 @@ export const WithIcon = () => ( {...dndProps} id="list-item" value="List Item" - icon={} + icon={} iconPosition={select('iconPosition', ['left', 'right'])} />
@@ -244,10 +244,10 @@ export const WithSingleRowAction = () => ( tooltipPosition={document.dir === 'ltr' ? 'left' : 'right'} key="list-item-edit" style={{ color: 'black' }} - renderIcon={Edit16} + renderIcon={Edit} hasIconOnly kind="ghost" - size="small" + size="sm" onClick={() => action('row action clicked')} iconDescription="Edit" />, @@ -272,11 +272,11 @@ export const WithDisabled = () => ( tooltipPosition={document.dir === 'ltr' ? 'left' : 'right'} key="list-item-edit" style={{ color: 'black' }} - renderIcon={Edit16} + renderIcon={Edit} hasIconOnly disabled={boolean('action disabled', true)} kind="ghost" - size="small" + size="sm" onClick={() => action('row action clicked')} iconDescription="Edit" />, diff --git a/packages/react/src/components/List/ListItem/ListItem.test.jsx b/packages/react/src/components/List/ListItem/ListItem.test.jsx index daf8bebb7e..688ec2aeba 100644 --- a/packages/react/src/components/List/ListItem/ListItem.test.jsx +++ b/packages/react/src/components/List/ListItem/ListItem.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; -import { Add16, Edit16 } from '@carbon/icons-react'; +import { Add, Edit } from '@carbon/react/icons'; import userEvent from '@testing-library/user-event'; import { DragAndDrop } from '../../../utils/DragAndDropUtils'; @@ -149,7 +149,7 @@ describe('ListItem', () => { } + icon={} iconPosition="left" index={0} {...commonProps} @@ -161,7 +161,7 @@ describe('ListItem', () => { it('ListItem with rowActions', () => { const rowActionOnClick = jest.fn(); - const rowActions = []; + const rowActions = []; render( ); @@ -171,7 +171,7 @@ describe('ListItem', () => { it('ListItem with long value has visible rowActions', () => { const rowActionOnClick = jest.fn(); - const rowActions = []; + const rowActions = []; render( () => [
{layeredControls.map(renderLayers)} diff --git a/packages/react/src/components/MapCard/ScrollingControls.jsx b/packages/react/src/components/MapCard/ScrollingControls.jsx index 356ec45984..7552c31356 100644 --- a/packages/react/src/components/MapCard/ScrollingControls.jsx +++ b/packages/react/src/components/MapCard/ScrollingControls.jsx @@ -1,6 +1,6 @@ import React, { useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { ChevronUp32, ChevronDown32 } from '@carbon/icons-react'; +import { ChevronUp, ChevronDown } from '@carbon/react/icons'; import classnames from 'classnames'; import Button from '../Button'; @@ -63,10 +63,10 @@ const ScrollingControls = ({ className={classnames(`${BASE_CLASS_NAME}__btn`, `${BASE_CLASS_NAME}__scroll-btn`)} disabled={scrollUpDisabled} kind="ghost" - size="field" + size="md" hasIconOnly tooltipPosition={tooltipPosition} - renderIcon={ChevronUp32} + renderIcon={(props) => } iconDescription={scrollUpIconDescriptionText} onClick={() => handleScrolling(scrollBy * -1)} /> @@ -86,7 +86,7 @@ const ScrollingControls = ({ className={`${BASE_CLASS_NAME}__btn`} key={`${control.iconDescription}-${i}`} kind="ghost" - size="field" + size="md" hasIconOnly tooltipPosition={tooltipPosition} renderIcon={control.icon} @@ -109,10 +109,10 @@ const ScrollingControls = ({ className={classnames(`${BASE_CLASS_NAME}__btn`, `${BASE_CLASS_NAME}__scroll-btn`)} disabled={scrollDownDisabled} kind="ghost" - size="field" + size="md" hasIconOnly tooltipPosition={tooltipPosition} - renderIcon={ChevronDown32} + renderIcon={(props) => } iconDescription={scrollDownIconDescriptionText} onClick={() => handleScrolling(scrollBy)} /> diff --git a/packages/react/src/components/MapCard/ZoomControl.jsx b/packages/react/src/components/MapCard/ZoomControl.jsx index 9cc8200cb9..3c82ffcdf7 100644 --- a/packages/react/src/components/MapCard/ZoomControl.jsx +++ b/packages/react/src/components/MapCard/ZoomControl.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ZoomIn32, ZoomOut32 } from '@carbon/icons-react'; +import { ZoomIn, ZoomOut } from '@carbon/react/icons'; import PropTypes from 'prop-types'; import Button from '../Button'; @@ -33,11 +33,11 @@ const defaultProps = { }; const Zoom = ({ onZoomIn, onZoomOut, i18n, testId, tooltipPosition, smallButtons }) => { - const buttonSize = smallButtons ? 'small' : 'field'; + const buttonSize = smallButtons ? 'sm' : 'md'; return (
- - ); - } -} +// import { settings } from '../../constants/Settings'; +// import Button from '../Button'; + +export { OverflowMenuItem } from '@carbon/react'; + +// const { prefix: carbonPrefix, iotPrefix } = settings; + +// const on = (element, ...args) => { +// element.addEventListener(...args); +// return { +// release() { +// element.removeEventListener(...args); +// return null; +// }, +// }; +// }; + +// class IotOverflowMenu extends Component { +// state = {}; + +// static propTypes = { +// /** +// * The ARIA label. +// */ +// ariaLabel: PropTypes.string, + +// /** +// * The child nodes. +// */ +// children: PropTypes.node, + +// /** +// * The CSS class names. +// */ +// className: PropTypes.string, + +// /** +// * The menu direction. +// */ +// direction: PropTypes.oneOf([DIRECTION_TOP, DIRECTION_BOTTOM]), + +// /** +// * `true` if the menu alignment should be flipped. +// */ +// flipped: PropTypes.bool, + +// /** +// * Enable or disable focus trap behavior +// */ +// focusTrap: PropTypes.bool, + +// /** +// * The CSS class for the icon. +// */ +// iconClass: PropTypes.string, + +// /** +// * The icon description. +// */ +// iconDescription: PropTypes.string.isRequired, + +// /** +// * The element ID. +// */ +// // eslint-disable-next-line react/require-default-props +// id: PropTypes.string, + +// /** +// * `true` to use the light version. For use on $ui-01/$layer-01 backgrounds only. +// * Don't use this to make OverflowMenu background color same as container background color. +// */ +// light: PropTypes.bool, + +// /** +// * The adjustment in position applied to the floating menu. +// */ +// menuOffset: PropTypes.oneOfType([ +// PropTypes.shape({ +// top: PropTypes.number, +// left: PropTypes.number, +// }), +// PropTypes.func, +// ]), + +// /** +// * The adjustment in position applied to the floating menu. +// */ +// menuOffsetFlip: PropTypes.oneOfType([ +// PropTypes.shape({ +// top: PropTypes.number, +// left: PropTypes.number, +// }), +// PropTypes.func, +// ]), + +// /** +// * The class to apply to the menu options +// */ +// menuOptionsClass: PropTypes.string, + +// /** +// * The event handler for the `click` event. +// */ +// onClick: PropTypes.func, + +// /** +// * Function called when menu is closed +// */ +// onClose: PropTypes.func, + +// /** +// * The event handler for the `focus` event. +// */ +// onFocus: PropTypes.func, + +// /** +// * The event handler for the `keydown` event. +// */ +// onKeyDown: PropTypes.func, + +// /** +// * Function called when menu is opened +// */ +// onOpen: PropTypes.func, + +// /** +// * `true` if the menu should be open. +// */ +// open: PropTypes.bool, + +// /** +// * Function called to override icon rendering. +// */ +// renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + +// /** +// * Specify a CSS selector that matches the DOM element that should +// * be focused when the OverflowMenu opens +// */ +// selectorPrimaryFocus: PropTypes.string, + +// /** +// * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option. +// */ +// size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']), + +// /** +// * Test id for the trigger component +// */ +// 'data-testid': PropTypes.string.isRequired, + +// /** +// * Specify the alignment of the tooltip to the icon-only button. +// * Can be one of: start, center, or end. +// */ +// tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']), + +// /** +// * Specify the direction of the tooltip for icon-only buttons. +// * Can be either top, right, bottom, or left. +// */ +// tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), + +// /** +// * Language direction +// */ +// langDir: PropTypes.oneOf(['ltr', 'rtl']), + +// /** +// * Label for the overflow menu button +// */ +// buttonLabel: PropTypes.string, +// }; + +// // eslint-disable-next-line react/sort-comp +// static contextType = PrefixContext; + +// static defaultProps = { +// ariaLabel: 'Open and close list of options', +// children: [], +// className: '', +// direction: DIRECTION_BOTTOM, +// flipped: false, +// focusTrap: true, +// iconClass: '', +// open: false, +// menuOffset: getMenuOffset, +// menuOffsetFlip: getMenuOffset, +// menuOptionsClass: '', +// light: false, +// renderIcon: OverflowMenuVertical, +// selectorPrimaryFocus: '[data-overflow-menu-primary-focus]', +// tooltipAlignment: 'center', +// tooltipPosition: 'top', +// size: 'md', +// langDir: 'ltr', +// buttonLabel: '', +// }; + +// /** +// * The handle of `onfocusin` or `focus` event handler. +// * @private +// */ +// // eslint-disable-next-line react/sort-comp +// _hFocusIn = null; + +// /** +// * The element ref of the tooltip's trigger button. +// * @type {React.RefObject} +// * @private +// */ +// _triggerRef = React.createRef(); + +// componentDidMount() { +// const correctAlignment = this._getNewAlignment(); +// this._updateAlignment(correctAlignment); +// } + +// componentDidUpdate(prevProps, prevState) { +// const { onClose, langDir } = this.props; +// // eslint-disable-next-line react/destructuring-assignment +// if (!this.state.open && prevState.open && onClose) { +// onClose(); +// } + +// if (prevProps.langDir !== langDir) { +// const correctAlignment = this._getNewAlignment(); +// this._updateAlignment(correctAlignment); +// } +// } + +// static getDerivedStateFromProps({ open, tooltipAlignment }, state) { +// const { prevOpen } = state; +// return prevOpen === open +// ? null +// : { +// open, +// prevOpen: open, +// tooltipAlignment, +// }; +// } + +// handleClick = (evt) => { +// evt.stopPropagation(); +// if (!this._menuBody || !this._menuBody.contains(evt.target)) { +// this.setState((prevState) => ({ +// ...prevState, +// open: !prevState.open, +// })); +// const { onClick } = this.props; +// if (onClick) { +// onClick(evt); +// } +// } +// }; + +// handleKeyPress = (evt) => { +// const { onKeyDown } = this.props; +// if (this.state.open && keyCodeMatches(evt, [ArrowUp, ArrowRight, ArrowDown, ArrowLeft])) { +// evt.preventDefault(); +// } + +// if (onKeyDown) { +// onKeyDown(evt); +// } + +// // Close the overflow menu on escape +// if (keyCodeMatches(evt, [Escape])) { +// const wasOpen = this.state.open; +// this.closeMenu(() => { +// /* istanbul ignore else */ +// if (wasOpen) { +// this.focusMenuEl(); +// } +// }); + +// // Stop the esc keypress from bubbling out and closing something it shouldn't +// evt.stopPropagation(); +// } +// }; + +// handleClickOutside = (evt) => { +// if (this.state.open && (!this._menuBody || !this._menuBody.contains(evt.target))) { +// this.closeMenu(); +// } +// }; + +// closeMenu = (onCloseMenu) => { +// this.setState( +// (prevState) => ({ +// ...prevState, +// open: false, +// }), +// () => { +// // Optional callback to be executed after the state as been set to close +// if (onCloseMenu) { +// onCloseMenu(); +// } +// const { onClose } = this.props; +// if (onClose) { +// onClose(); +// } +// } +// ); +// }; + +// focusMenuEl = () => { +// const { current: triggerEl } = this._triggerRef; +// /* istanbul ignore else */ +// if (triggerEl) { +// triggerEl.focus(); +// } +// }; + +// /** +// * Focuses the next enabled overflow menu item given the currently focused +// * item index and direction to move +// * @param {object} params +// * @param {number} params.currentIndex - the index of the currently focused +// * overflow menu item in the list of overflow menu items +// * @param {number} params.direction - number denoting the direction to move +// * focus (1 for forwards, -1 for backwards) +// */ +// handleOverflowMenuItemFocus = ({ currentIndex, direction }) => { +// const enabledIndices = React.Children.toArray(this.props.children).reduce((acc, curr, i) => { +// /* istanbul ignore else */ +// if (!curr.props.disabled) { +// acc.push(i); +// } +// return acc; +// }, []); +// const nextValidIndex = (() => { +// const nextIndex = enabledIndices.indexOf(currentIndex) + direction; +// switch (enabledIndices.indexOf(currentIndex) + direction) { +// case -1: +// return enabledIndices.length - 1; +// case enabledIndices.length: +// return 0; +// default: +// return nextIndex; +// } +// })(); +// const { overflowMenuItem } = this[`overflowMenuItem${enabledIndices[nextValidIndex]}`]; +// // eslint-disable-next-line no-unused-expressions +// overflowMenuItem?.current?.focus(); +// }; + +// /** +// * Handles the floating menu being unmounted or non-floating menu being +// * mounted or unmounted. +// * @param {Element} menuBody The DOM element of the menu body. +// * @private +// */ +// _bindMenuBody = (menuBody) => { +// if (!menuBody) { +// this._menuBody = menuBody; +// } +// if (!menuBody && this._hFocusIn) { +// this._hFocusIn = this._hFocusIn.release(); +// } +// }; + +// /** +// * Handles the floating menu being placed. +// * @param {Element} menuBody The DOM element of the menu body. +// * @private +// */ +// _handlePlace = (menuBody) => { +// /* istanbul ignore else */ +// if (menuBody) { +// this._menuBody = menuBody; +// const hasFocusin = 'onfocusin' in window; +// const focusinEventName = hasFocusin ? 'focusin' : 'focus'; +// this._hFocusIn = on( +// menuBody.ownerDocument, +// focusinEventName, +// (event) => { +// const target = ClickListener.getEventTarget(event); +// const { current: triggerEl } = this._triggerRef; +// /* istanbul ignore else */ +// if (typeof target.matches === 'function') { +// /* istanbul ignore else */ +// if ( +// !menuBody.contains(target) && +// triggerEl && +// !target.matches( +// `.${this.context}--overflow-menu,.${this.context}--overflow-menu-options` +// ) +// ) { +// this.closeMenu(); +// } +// } +// }, +// !hasFocusin +// ); +// const { onOpen } = this.props; +// if (onOpen) { +// onOpen(); +// } +// } +// }; + +// /** +// * @returns {Element} The DOM element where the floating menu is placed in. +// */ +// _getTarget = () => { +// const { current: triggerEl } = this._triggerRef; +// return (triggerEl && triggerEl.closest('[data-floating-menu-container]')) || document.body; +// }; + +// /** +// * Updates state for tooltip alignment. +// * @param {string} newAlignment Correct alignment. +// * @private +// */ +// _updateAlignment(newAlignment) { +// this.setState((prevState) => ({ +// ...prevState, +// tooltipAlignment: newAlignment, +// })); +// } + +// /** +// * Returns correct tooltip alignment. +// * @return {string} Correct alignment. +// * @private +// */ +// _getNewAlignment() { +// const tooltip = this._triggerRef.current.querySelector(`.${carbonPrefix}--assistive-text`); +// const container = this._triggerRef.current.parentElement; + +// if (tooltip && container) { +// const tooltipRect = tooltip.getBoundingClientRect(); +// const containerRect = container.getBoundingClientRect(); + +// if (tooltipRect.left + tooltipRect.width > containerRect.left + containerRect.width) { +// return 'end'; +// } + +// if (tooltipRect.left < containerRect.left) { +// return 'start'; +// } + +// return 'center'; +// } + +// return 'center'; +// } + +// render() { +// const prefix = this.context; +// const { +// id, +// ariaLabel, +// children, +// iconDescription, // Not used, preserved for PropTypes compatibility +// direction, +// flipped, +// focusTrap, +// menuOffset, +// menuOffsetFlip, +// iconClass, // Not used, preserved for PropTypes compatibility +// onOpen, // Not to pollute DOM +// selectorPrimaryFocus, +// renderIcon: IconElement, +// // eslint-disable-next-line react/prop-types +// innerRef: ref, +// menuOptionsClass, +// light, +// size, +// 'data-testid': testId, +// tooltipPosition, +// className, +// langDir, // Not to pollute DOM +// buttonLabel, +// ...other +// } = this.props; + +// const { open, tooltipAlignment } = this.state; + +// const overflowMenuClasses = classNames(className, `${prefix}--overflow-menu`, { +// [`${prefix}--overflow-menu--open`]: open, +// [`${prefix}--overflow-menu--light`]: light, +// [`${prefix}--overflow-menu--${size}`]: size, +// [`${iotPrefix}--overflow-menu--with-label`]: buttonLabel, +// }); + +// const overflowMenuOptionsClasses = classNames( +// menuOptionsClass, +// `${prefix}--overflow-menu-options`, +// { +// [`${prefix}--overflow-menu--flip`]: flipped, +// [`${prefix}--overflow-menu-options--open`]: open, +// [`${prefix}--overflow-menu-options--light`]: light, +// [`${prefix}--overflow-menu-options--${size}`]: size, +// } +// ); + +// const childrenWithProps = React.Children.toArray(children).map((child, index) => +// React.cloneElement(child, { +// closeMenu: child?.props?.closeMenu || this.closeMenu, +// handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus, +// ref: (e) => { +// this[`overflowMenuItem${index}`] = e; +// }, +// index, +// }) +// ); + +// const menuBody = ( +//
    +// {childrenWithProps} +//
+// ); + +// const wrappedMenuBody = ( +// +// {React.cloneElement(menuBody, { +// 'data-floating-menu-direction': direction, +// })} +// +// ); + +// return ( +// +// +// +// ); +// } +// } export const OverflowMenu = ({ direction, @@ -605,22 +609,22 @@ export const OverflowMenu = ({ useAutoPositioning, }); - const langDir = useLangDirection(); - - if (withCarbonTooltip) { - return ( - - ); - } + // TODO - need to find out why not working in Table toolbar menu button. + // const langDir = useLangDirection() || 'ltr' + // if (withCarbonTooltip) { + // return ( + // + // ); + // } return ( { - if (__DEV__) { - warning( - false, - 'EditPage component has been deprecated and will be removed in the next release of `carbon-addons-iot-react`. \n Refactor to use PageWizard component instead.' - ); - } - const [isSaving, setSaving] = useState(); - const handleSave = async () => { - setSaving(true); - try { - // if they return false from onSave don't close and clear the saving bit - if (await onSave()) { - onClose(); - } else { - setSaving(false); - } - } catch { - setSaving(false); - } - }; - return ( - - {isLoading ? ( - - - - - - - ) : ( - - - {children} - - - - - - )} - - ); -}; - -EditPage.propTypes = propTypes; -EditPage.defaultProps = defaultProps; -export default EditPage; diff --git a/packages/react/src/components/Page/EditPage.story.jsx b/packages/react/src/components/Page/EditPage.story.jsx deleted file mode 100644 index e55be16b30..0000000000 --- a/packages/react/src/components/Page/EditPage.story.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { text } from '@storybook/addon-knobs'; - -import FullWidthWrapper from '../../internal/FullWidthWrapper'; -import StoryNotice, { deprecatedStoryTitle } from '../../internal/StoryNotice'; - -import EditPage from './EditPage'; - -const commonEditPageProps = { - title: 'Page Title', - onClose: action('onClose'), - onSave: action('onSave'), - children:
child
, -}; -const breadcrumb = [Home, Type, Instance]; - -export default { - title: '1 - Watson IoT/Deprecated/🚫 EditPage', - parameters: { - docs: { - inlineStories: false, - }, - }, - decorators: [(storyFn) => {storyFn()}], -}; - -export const Deprecated = () => ( - -); -Deprecated.storyName = deprecatedStoryTitle; - -export const Normal = () => ; - -Normal.storyName = 'normal'; - -export const IsLoading = () => ; - -IsLoading.storyName = 'isLoading'; - -export const WithBlurb = () => ( - -); - -WithBlurb.storyName = 'with blurb'; - -export const WithBreadcrumb = () => ; - -WithBreadcrumb.storyName = 'with breadcrumb'; diff --git a/packages/react/src/components/Page/PageHero.jsx b/packages/react/src/components/Page/PageHero.jsx deleted file mode 100644 index 7ab1d53835..0000000000 --- a/packages/react/src/components/Page/PageHero.jsx +++ /dev/null @@ -1,163 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Fragment } from 'react'; -import styled from 'styled-components'; -import warning from 'warning'; - -import { COLORS, PADDING } from '../../styles/styles'; - -import PageTitle from './PageTitle'; -import PageSwitcher from './PageSwitcher'; - -const propTypes = { - /** Section is an element that describes the category of this page */ - section: PropTypes.node, - /** Title of the page */ - title: PropTypes.node, - /** Details about what the page shows */ - blurb: PropTypes.node, - /** Whether or not we need to reserve a lot of height */ - big: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types - /** The breadcrumb to render */ - crumb: (props, propName, componentName) => { - const { crumb, title } = props; - if (!crumb && !title) { - return new Error(`One of props 'crumb' or 'title' was not specified in '${componentName}'.`); - } - if (crumb) { - PropTypes.checkPropTypes( - { - crumb: PropTypes.node, // or any other PropTypes you want - }, - { crumb: props.crumb }, - 'prop', - componentName - ); - } - return null; - }, - /** The switcher actions */ - switcher: PropTypes.shape({ - onChange: PropTypes.func, - selectedIndex: PropTypes.number, - options: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string, - text: PropTypes.string, - onClick: PropTypes.func, - disabled: PropTypes.bool, - }) - ).isRequired, - }), - /** Optional what to render in the left side of the hero */ - leftContent: PropTypes.node, - /** Optional What to render in the right side of the hero */ - rightContent: PropTypes.node, - className: PropTypes.string, - - testId: PropTypes.string, -}; - -const defaultProps = { - section: null, - title: null, - blurb: null, - className: null, - big: false, - crumb: null, - leftContent: null, - rightContent: null, - switcher: null, - testId: 'page-hero', -}; - -const StyledPageHero = styled.div` - background: ${COLORS.white}; - border-bottom: 1px solid ${COLORS.lightGrey}; - ${'' /* display: flex; */} - padding-top: ${PADDING.verticalPadding}; - padding-left: ${PADDING.horizontalWrapPadding}; - padding-right: ${PADDING.horizontalWrapPadding}; - padding-bottom: ${PADDING.verticalPadding}; - display: flex; - flex: 1 1; - flex-flow: row nowrap; - min-height: ${(props) => (props.big ? '193px' : 'unset')}; -`; - -const StyledPageHeroWrap = styled.div` - align-items: flex-start; - display: flex; - margin: 0 auto; - width: 100%; - justify-content: space-between; - transition: padding 0.2s; -`; - -const StyledPageBlurb = styled.p` - margin-bottom: $spacing-05; - font-size: 0.875rem; - line-height: 1.25rem; - max-width: 50rem; - flex: 1 1 20%; -`; - -const StyledTitle = styled.div` - flex-basis: 75%; -`; - -const StyledRightContent = styled.div` - padding-top: ${PADDING.verticalPadding}; - flex-basis: 25%; -`; - -const StyledLeftContent = styled.div` - padding-top: ${PADDING.verticalPadding}; -`; - -/** - * Renders the hero text and styles for the page. Can either render Section and Title with blurb or support a narrow one with breadcrumbs. - */ -const PageHero = ({ - section, - title, - blurb, - className, - crumb, - leftContent, - rightContent, - switcher, - testId, -}) => { - if (__DEV__) { - warning( - false, - 'PageHero component has been deprecated and will be removed in the next release of `carbon-addons-iot-react`. \n Refactor to use PageTitleBar component instead.' - ); - } - return ( - - {crumb || ( - - {leftContent ? {leftContent} : null} - - - {switcher && switcher.options.length ? ( - - ) : null} - - {blurb ? ( - {blurb} - ) : null} - - - {rightContent ? {rightContent} : null} - - )} - - ); -}; - -PageHero.propTypes = propTypes; -PageHero.defaultProps = defaultProps; - -export default PageHero; diff --git a/packages/react/src/components/Page/PageHero.story.jsx b/packages/react/src/components/Page/PageHero.story.jsx deleted file mode 100644 index 32406b3d46..0000000000 --- a/packages/react/src/components/Page/PageHero.story.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; - -import FullWidthWrapper from '../../internal/FullWidthWrapper'; -import StoryNotice, { deprecatedStoryTitle } from '../../internal/StoryNotice'; - -import PageHero from './PageHero'; - -const commonPageHeroProps = { - title: 'Your Devices', - blurb: - 'Your data lake displays a detailed view of the entity types that are connected in Watson IoT Platform. To explore the metrics and dimensions of your entities in more detail, select Entities. To start applying calculations and analyzing your entity data, select Data.', - big: true, - rightContent:
Right Content
, -}; - -export default { - title: '1 - Watson IoT/Deprecated/🚫 PageHero', - decorators: [(storyFn) => {storyFn()}], -}; - -export const Deprecated = () => ( - -); -Deprecated.storyName = deprecatedStoryTitle; - -export const Normal = () => ; - -Normal.storyName = 'normal'; - -export const NormalWithContentSwitcher = () => ( - -); - -NormalWithContentSwitcher.storyName = 'normal with content switcher'; - -export const WithSection = () => ; - -WithSection.storyName = 'with section'; - -export const HasBreadcrumb = () => ( - breadcrumb/mybread
} /> -); - -HasBreadcrumb.storyName = 'has breadcrumb'; - -export const HasLeftContent = () => ( - Left Content
} /> -); - -HasLeftContent.storyName = 'has left content'; diff --git a/packages/react/src/components/Page/PageHero.test.jsx b/packages/react/src/components/Page/PageHero.test.jsx deleted file mode 100644 index 1b2ebda356..0000000000 --- a/packages/react/src/components/Page/PageHero.test.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { render, screen } from '@testing-library/react'; - -import PageHero from './PageHero'; - -const commonPageHeroProps = { - title: 'Your Devices', - blurb: - 'Your data lake displays a detailed view of the entity types that are connected in Watson IoT Platform. To explore the metrics and dimensions of your entities in more detail, select Entities. To start applying calculations and analyzing your entity data, select Data.', - big: true, - rightContent:
Right Content
, -}; - -describe('PageHero', () => { - it('should be selectable by testId', () => { - const commonSwitchProps = { - onChange: jest.fn(), - options: [ - { - id: 'allDevices', - text: 'All Devices', - }, - { - id: 'diagnose', - text: 'Diagnose', - }, - ], - }; - render(); - - expect(screen.getByTestId('page_hero')).toBeDefined(); - }); - - // handle click function test - it('onClick switcher', () => { - const commonSwitchProps = { - onChange: jest.fn(), - options: [ - { - id: 'allDevices', - text: 'All Devices', - }, - { - id: 'diagnose', - text: 'Diagnose', - }, - ], - }; - const wrapper = mount(); - - wrapper.find('Switch[onClick]').last().simulate('click'); - - expect(wrapper.find('Switch[onClick]').last().props().selected).toEqual(true); - }); -}); diff --git a/packages/react/src/components/Page/PageSwitcher.jsx b/packages/react/src/components/Page/PageSwitcher.jsx index 48cab58074..9caa3c6373 100644 --- a/packages/react/src/components/Page/PageSwitcher.jsx +++ b/packages/react/src/components/Page/PageSwitcher.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ContentSwitcher, Switch } from 'carbon-components-react'; -import styled from 'styled-components'; +import { ContentSwitcher, Switch } from '@carbon/react'; +import { styled } from 'styled-components'; import { settings } from '../../constants/Settings'; diff --git a/packages/react/src/components/Page/PageTitle.jsx b/packages/react/src/components/Page/PageTitle.jsx index 7b97c5c380..3b0849b9ec 100644 --- a/packages/react/src/components/Page/PageTitle.jsx +++ b/packages/react/src/components/Page/PageTitle.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { spacing03 } from '@carbon/layout'; import { COLORS } from '../../styles/styles'; diff --git a/packages/react/src/components/Page/PageWorkArea.jsx b/packages/react/src/components/Page/PageWorkArea.jsx index 11f86a2737..2287eba36d 100644 --- a/packages/react/src/components/Page/PageWorkArea.jsx +++ b/packages/react/src/components/Page/PageWorkArea.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { spacing05, spacing07 } from '@carbon/layout'; const StyledDiv = styled.div` diff --git a/packages/react/src/components/PageTitleBar/PageTitleBar.jsx b/packages/react/src/components/PageTitleBar/PageTitleBar.jsx index 1383811e5e..176d37cc58 100644 --- a/packages/react/src/components/PageTitleBar/PageTitleBar.jsx +++ b/packages/react/src/components/PageTitleBar/PageTitleBar.jsx @@ -1,10 +1,11 @@ import PropTypes from 'prop-types'; import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react'; import classnames from 'classnames'; -import { Information16, Edit16 } from '@carbon/icons-react'; -import { Breadcrumb, BreadcrumbItem, Tooltip, SkeletonText, Tabs } from 'carbon-components-react'; +import { Information, Edit } from '@carbon/react/icons'; +import { Breadcrumb, BreadcrumbItem, SkeletonText, Tabs } from '@carbon/react'; import { throttle } from 'lodash-es'; +import { ToggleTip } from '../ToggleTip'; import { settings } from '../../constants/Settings'; import deprecate from '../../internal/deprecate'; import Button from '../Button'; @@ -273,25 +274,23 @@ const PageTitleBar = ({ () => ( <> {description && (collapsed || condensed) ? ( - {description}

: <>{description}} > - {typeof description === 'string' ?

{description}

: description} -
+ + ) : null} {editable ? (
@@ -75,9 +85,9 @@ export default { parameters: { component: PageTitleBar, - docs: { - page: PageTitleBarREADME, - }, + // docs: { + // page: PageTitleBarREADME, + // }, //carbon 11 }, excludeStories: ['commonPageTitleBarProps', 'pageTitleBarBreadcrumb', 'PageTitleBarNodeTooltip'], @@ -195,9 +205,9 @@ export const WithSelect = () => ( extraContent={
@@ -257,9 +267,9 @@ export const WithEverything = () => ( extraContent={
} content={ - -
Content for first tab.
-
- -
Content for second tab.
-
- -
Content for third tab.
-
+ + Tab 1 + Tab 2 + Tab 3 + + + +
Content for first tab.
+
+ +
Content for second tab.
+
+ +
Content for third tab.
+
+
} onEdit={action('edit')} @@ -333,10 +350,10 @@ export const WithCondensedHeader = () => ( headerMode={select('headerMode', ['DYNAMIC', 'STATIC', 'STICKY', 'CONDENSED'], 'CONDENSED')} extraContent={
- -
@@ -367,7 +384,7 @@ export const WithCustomRenderFunction = () => ( title={commonPageTitleBarProps.title} renderTitleFunction={(title) => (

- {title} + {title}

)} breadcrumb={optionsKnob('breadcrumbs', breadcrumbKnobOptions, breadcrumbDefaultValue, { @@ -396,9 +413,9 @@ export const WithDynamicScrolling = () => ( extraContent={
@@ -459,9 +476,9 @@ export const WithDynamicScrollingAndTabs = () => ( extraContent={
} content={ - -
- -
-
- -
- -
-
- -
- -
-
+ + Tab 1 + Tab 2 + Tab 3 + + + +
+ +
+
+ +
+ +
+
+ +
+ +
+
+
} onEdit={action('edit')} diff --git a/packages/react/src/components/PageTitleBar/PageTitleBar.test.jsx b/packages/react/src/components/PageTitleBar/PageTitleBar.test.jsx index d6c0ccc877..d3960bac71 100644 --- a/packages/react/src/components/PageTitleBar/PageTitleBar.test.jsx +++ b/packages/react/src/components/PageTitleBar/PageTitleBar.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; -import { SkeletonText, Tabs, Tab } from 'carbon-components-react'; +import { SkeletonText, Tabs, Tab } from '@carbon/react'; import { render, screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/packages/react/src/components/PageTitleBar/_page-title-bar.scss b/packages/react/src/components/PageTitleBar/_page-title-bar.scss index a737a665c5..fe52196cf8 100644 --- a/packages/react/src/components/PageTitleBar/_page-title-bar.scss +++ b/packages/react/src/components/PageTitleBar/_page-title-bar.scss @@ -1,11 +1,16 @@ -@import '../../globals/vars'; -@import '../../globals/typography'; - +@use '../../globals/vars' as *; +@use '../../globals/typography' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/type' as *; @mixin condensed-style() { @include make-sticky(); - background: rgba($ui-01, var(--scroll-transition-progress)); - border-bottom: 1px solid rgba($ui-03, var(--scroll-transition-progress)); - transition: all $duration--fast-02; + background: rgba($white-0, var(--scroll-transition-progress)); + border-bottom: 1px solid rgba($gray-20, var(--scroll-transition-progress)); + transition: all $duration-fast-02; } @mixin make-sticky() { @@ -88,7 +93,7 @@ margin-left: $spacing-05; } - transition: opacity $duration--moderate-02; + transition: opacity $duration-moderate-02; .page-title-bar--condensed-static & { @include condensed-style(); @@ -108,7 +113,7 @@ grid-area: actions-condensed; padding-right: 0; opacity: 1; - transition: opacity $duration--moderate-02; + transition: opacity $duration-moderate-02; } // Fade out the action buttons and scroll them underneath the backdrop @@ -140,8 +145,8 @@ z-index: 1; display: grid; content: ''; - background: rgba($ui-01, var(--scroll-transition-progress)); - border-bottom: 1px solid rgba($ui-03, var(--scroll-transition-progress)); + background: rgba($white-0, var(--scroll-transition-progress)); + border-bottom: 1px solid rgba($gray-20, var(--scroll-transition-progress)); } } @@ -161,14 +166,14 @@ .page-title-bar--dynamic & { @include make-sticky(); overflow: hidden; - transition: all $duration--fast-02; + transition: all $duration-fast-02; border-bottom: 1px solid transparent; } .page-title-bar--dynamic--during &, .page-title-bar--dynamic--after & { padding-bottom: $spacing-04; - transition: all $duration--fast-02; + transition: all $duration-fast-02; z-index: 900; max-height: $spacing-08; } @@ -193,14 +198,21 @@ .page-title-bar-breadcrumb-current { --breadcrumb-scroll-distance: 20px; white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; - transition: opacity $duration--fast-01 linear, transform $duration--fast-01 linear; + transition: opacity $duration-fast-01 linear, transform $duration-fast-01 linear; margin-left: 0; - // Add 1px of padding to prevent tooltip outline from getting cropped - .#{$prefix}--tooltip__label { - padding-right: 1px; + .#{$prefix}--toggletip { + margin-left: $spacing-03; + padding-right: 1px; // Add 1px of padding to prevent tooltip outline from getting cropped + + .#{$prefix}--popover-content { + white-space: normal; + + .#{$prefix}--toggletip-content { + row-gap: 0; + } + } } // hide the `/` after the breadcrumb for the current item @@ -220,6 +232,7 @@ .page-title-bar--dynamic--during &, .page-title-bar--dynamic--after & { + /* stylelint-disable scss/operator-no-newline-after */ transform: translateY( calc( var(--breadcrumb-scroll-distance) - @@ -278,10 +291,9 @@ align-items: center; display: flex; white-space: nowrap; - overflow: hidden; h2 { - @include type-style('productive-heading-04'); + @include type-style('heading-04'); // need to match the 40x40px icons that could render in height: $spacing-08; white-space: nowrap; @@ -290,21 +302,17 @@ width: auto; } - & #tooltip { - fill: $icon-01; - } - - .#{$prefix}--tooltip__label { - height: 100%; - width: $spacing-08; - } - - .#{$prefix}--tooltip__trigger { + .#{$prefix}--toggletip { margin-left: 0; padding-left: $spacing-04; padding-right: $spacing-04; - height: calc(100% - 2px); // make room for outline - width: calc(#{$spacing-08} - 1px); + + .#{$prefix}--popover-content { + white-space: normal; + .#{$prefix}--toggletip-content { + row-gap: 0; + } + } svg { width: $spacing-05; @@ -337,7 +345,7 @@ &-description { display: grid; grid-area: description; - @include type-style('body-long-01'); + @include type-style('body-01'); margin-top: $spacing-02; max-width: 40rem; padding-left: $spacing-07; @@ -367,14 +375,14 @@ margin-top: $spacing-06; &.page-title-bar-content--active { - .#{$prefix}--tabs--scrollable { - transition: all $duration--fast-02 ease-in; - background: $ui-01; - border-bottom: 1px solid $ui-03; + .#{$prefix}--tabs { + transition: all $duration-fast-02 ease-in; + background: $layer-01; + border-bottom: 1px solid $layer-accent-01; } } - .#{$prefix}--tabs--scrollable { + .#{$prefix}--tabs { padding-left: $spacing-05; margin-left: -($spacing-07); width: calc(100% + #{$spacing-10}); @@ -386,7 +394,7 @@ margin-right: -($spacing-07); } - .#{$prefix}--tabs--scrollable__nav-link { + .#{$prefix}--tabs__nav-link { text-align: left; [dir='rtl'] & { @@ -421,7 +429,7 @@ } &.page-title-bar--condensed-static { - .#{$prefix}--tabs--scrollable { + .#{$prefix}--tabs { @include make-sticky(); } } diff --git a/packages/react/src/components/PageWizard/PageWizard.story.jsx b/packages/react/src/components/PageWizard/PageWizard.story.jsx index 9f2d081691..eeb6dcb05e 100644 --- a/packages/react/src/components/PageWizard/PageWizard.story.jsx +++ b/packages/react/src/components/PageWizard/PageWizard.story.jsx @@ -2,8 +2,8 @@ import React, { useState } from 'react'; import { action } from '@storybook/addon-actions'; import { boolean, number, text } from '@storybook/addon-knobs'; -import { Button, Form, FormGroup, FormItem, Link, TextInput } from 'carbon-components-react'; -import { InformationFilled20 } from '@carbon/icons-react'; +import { Button, Form, FormGroup, FormItem, Link, TextInput } from '@carbon/react'; +import { InformationFilled } from '@carbon/react/icons'; import PageTitleBar from '../PageTitleBar/PageTitleBar'; @@ -494,7 +494,7 @@ export const WithAdditionalFooterContent = () => ( letterSpacing: 0, }} > - + {text('Additional footer content', 'Additional footer content')}
} diff --git a/packages/react/src/components/PageWizard/PageWizardStep/PageWizardStep.jsx b/packages/react/src/components/PageWizard/PageWizardStep/PageWizardStep.jsx index 1374f7b133..e25f7e8fbf 100644 --- a/packages/react/src/components/PageWizard/PageWizardStep/PageWizardStep.jsx +++ b/packages/react/src/components/PageWizard/PageWizardStep/PageWizardStep.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { InlineNotification } from 'carbon-components-react'; +import { InlineNotification } from '@carbon/react'; import classnames from 'classnames'; import { settings } from '../../../constants/Settings'; diff --git a/packages/react/src/components/PageWizard/_page-wizard.scss b/packages/react/src/components/PageWizard/_page-wizard.scss index bf2ee7436a..974fef7983 100644 --- a/packages/react/src/components/PageWizard/_page-wizard.scss +++ b/packages/react/src/components/PageWizard/_page-wizard.scss @@ -1,12 +1,15 @@ -@import '~carbon-components/scss/globals/scss/vars'; -@import '~carbon-components/scss/globals/scss/typography'; -@import '../../globals/vars'; - +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/utilities/convert'; .#{$iot-prefix}--page-wizard { display: flex; &__sticky { - padding-bottom: $layout-06; + padding-bottom: $spacing-12; //$layout-06 } &--progress { @@ -28,10 +31,10 @@ &--step { padding-bottom: $spacing-07; - @include type-style('body-long-01'); + @include type-style('body-01'); &--title { - @include type-style('productive-heading-02'); + @include type-style('heading-compact-02'); margin-bottom: $spacing-03; } &--description { @@ -59,9 +62,9 @@ bottom: 0; left: 0; width: 100%; - background: $ui-01; + background: $layer-01; padding: $spacing-05 $spacing-07; - border-top: rem(1px) solid $ui-03; + border-top: convert.to-rem(1px) solid $layer-accent-01; .#{$prefix}--btn { margin-right: $spacing-05; } diff --git a/packages/react/src/components/Pagination/_pagination.scss b/packages/react/src/components/Pagination/_pagination.scss index efd439c57f..7b7e57ab57 100644 --- a/packages/react/src/components/Pagination/_pagination.scss +++ b/packages/react/src/components/Pagination/_pagination.scss @@ -1 +1 @@ -@import '~carbon-components/scss/components/pagination/pagination'; +@use '@carbon/react/scss/components/pagination' as *; diff --git a/packages/react/src/components/Pagination/index.js b/packages/react/src/components/Pagination/index.js index e8f502977b..036a06d5bf 100644 --- a/packages/react/src/components/Pagination/index.js +++ b/packages/react/src/components/Pagination/index.js @@ -1 +1 @@ -export { Pagination } from 'carbon-components-react'; +export { Pagination } from '@carbon/react'; diff --git a/packages/react/src/components/PaginationNav/_pagination-nav.scss b/packages/react/src/components/PaginationNav/_pagination-nav.scss index 2d07c22268..c06c7ec12e 100644 --- a/packages/react/src/components/PaginationNav/_pagination-nav.scss +++ b/packages/react/src/components/PaginationNav/_pagination-nav.scss @@ -1 +1 @@ -@import '~carbon-components/scss/components/pagination-nav/pagination-nav'; +@use '@carbon/react/scss/components/pagination-nav' as *; diff --git a/packages/react/src/components/PieChartCard/PieChartCard.story.jsx b/packages/react/src/components/PieChartCard/PieChartCard.story.jsx index 92c0b2cb7e..537056f1eb 100644 --- a/packages/react/src/components/PieChartCard/PieChartCard.story.jsx +++ b/packages/react/src/components/PieChartCard/PieChartCard.story.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { text, select, object, boolean } from '@storybook/addon-knobs'; -import { SettingsAdjust16 } from '@carbon/icons-react'; +import { SettingsAdjust } from '@carbon/react/icons'; import { cloneDeep } from 'lodash-es'; import { CARD_SIZES } from '../../constants/LayoutConstants'; @@ -283,7 +283,7 @@ export const AdvancedCustomisationUsingOverrides = () => { direction={FlyoutMenuDirection.BottomEnd} buttonProps={{ size: 'default', - renderIcon: SettingsAdjust16, + renderIcon: SettingsAdjust, }} triggerId="test-flyout-id" transactional diff --git a/packages/react/src/components/PieChartCard/_pie-chart-card.scss b/packages/react/src/components/PieChartCard/_pie-chart-card.scss index ba2840b5be..65f27bb6fa 100644 --- a/packages/react/src/components/PieChartCard/_pie-chart-card.scss +++ b/packages/react/src/components/PieChartCard/_pie-chart-card.scss @@ -1,4 +1,6 @@ -@import '../../globals/vars'; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; .#{$iot-prefix}--pie-chart-container { width: 100%; diff --git a/packages/react/src/components/PrimaryButton/index.js b/packages/react/src/components/PrimaryButton/index.js index 254e654a05..73195a26a0 100644 --- a/packages/react/src/components/PrimaryButton/index.js +++ b/packages/react/src/components/PrimaryButton/index.js @@ -1 +1 @@ -export { PrimaryButton } from 'carbon-components-react'; +export { PrimaryButton } from '@carbon/react'; diff --git a/packages/react/src/components/ProgressBar/ProgressBar.jsx b/packages/react/src/components/ProgressBar/ProgressBar.jsx index 4c612255b4..d5ef198962 100644 --- a/packages/react/src/components/ProgressBar/ProgressBar.jsx +++ b/packages/react/src/components/ProgressBar/ProgressBar.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { unstable_ProgressBar as CarbonProgressBar } from 'carbon-components-react'; +import { ProgressBar as CarbonProgressBar } from '@carbon/react'; import PropTypes from 'prop-types'; import { blue60 } from '@carbon/colors'; import classnames from 'classnames'; diff --git a/packages/react/src/components/ProgressBar/ProgressBar.story.jsx b/packages/react/src/components/ProgressBar/ProgressBar.story.jsx index a030b0a18d..17cb2445e4 100644 --- a/packages/react/src/components/ProgressBar/ProgressBar.story.jsx +++ b/packages/react/src/components/ProgressBar/ProgressBar.story.jsx @@ -1,9 +1,9 @@ import React from 'react'; import { text, number, boolean } from '@storybook/addon-knobs'; -import { Bee16, WarningFilled16 } from '@carbon/icons-react'; +import { Bee, WarningFilled } from '@carbon/react/icons'; import { green20, green30, green40, green50, red60, yellow30, yellow50 } from '@carbon/colors'; -import ProgressBarREADME from './ProgressBar.mdx'; +// import ProgressBarREADME from './ProgressBar.mdx'; //carbon 11 import ProgressBar from './ProgressBar'; export default { @@ -11,9 +11,9 @@ export default { parameters: { component: ProgressBar, - docs: { - page: ProgressBarREADME, - }, + // docs: { + // page: ProgressBarREADME, + // }, //carbon 11 }, }; @@ -57,7 +57,7 @@ WithLight.storyName = 'with light'; export const WithIcon = () => { return ( - + ); }; @@ -100,13 +100,13 @@ export const WithThresholds = () => { fill: green40, stroke: green50, }, - icon: (props) => , + icon: (props) => , }, { comparison: '>', value: 100, color: red60, - icon: WarningFilled16, + icon: WarningFilled, }, ]} /> @@ -126,9 +126,9 @@ export const WithRenderIconByName = () => { renderIconByName={(name, props) => { switch (name) { case 'warning': - return ; + return ; case 'bee': - return ; + return ; default: return null; } @@ -164,13 +164,13 @@ export const WithRenderIconByName = () => { fill: green40, stroke: green50, }, - icon: (props) => , + icon: (props) => , }, { comparison: '>', value: 100, color: red60, - icon: WarningFilled16, + icon: WarningFilled, }, ]} /> diff --git a/packages/react/src/components/ProgressBar/ProgressBar.test.jsx b/packages/react/src/components/ProgressBar/ProgressBar.test.jsx index 18896159a6..61de466688 100644 --- a/packages/react/src/components/ProgressBar/ProgressBar.test.jsx +++ b/packages/react/src/components/ProgressBar/ProgressBar.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import { CheckmarkFilled16, WarningAltFilled16, WarningFilled16 } from '@carbon/icons-react'; +import { CheckmarkFilled, WarningAltFilled, WarningFilled } from '@carbon/react/icons'; import { settings } from '../../constants/Settings'; @@ -21,7 +21,7 @@ describe('ProgressBar', () => { label="A progress label" value={40} inline - renderIcon={() => } + renderIcon={() => } /> ); @@ -43,7 +43,7 @@ describe('ProgressBar', () => { } + renderIcon={() => } /> ); expect(screen.getByTestId('progress-bar-icon')).toBeVisible(); @@ -58,7 +58,7 @@ describe('ProgressBar', () => { renderIconByName={(name) => { switch (name) { case 'warning': - return ; + return ; default: return null; } @@ -76,18 +76,18 @@ describe('ProgressBar', () => { comparison: '<', value: 40, color: 'green', - icon: CheckmarkFilled16, + icon: CheckmarkFilled, }, { comparison: (value) => value >= 50 && value <= 75, color: 'yellow', - icon: (props) => , + icon: (props) => , }, { comparison: '>', value: 75, color: 'red', - icon: () => , + icon: () => , }, ]; @@ -120,7 +120,7 @@ describe('ProgressBar', () => { fill: 'red', stroke: 'white', }, - icon: WarningFilled16, + icon: WarningFilled, }, ]; diff --git a/packages/react/src/components/ProgressBar/_progress-bar.scss b/packages/react/src/components/ProgressBar/_progress-bar.scss index 6774c72cce..aa913c6792 100644 --- a/packages/react/src/components/ProgressBar/_progress-bar.scss +++ b/packages/react/src/components/ProgressBar/_progress-bar.scss @@ -1,12 +1,15 @@ -@import '~carbon-components/scss/components/progress-bar/progress-bar'; -@import '../../globals/vars'; - +@use '@carbon/react/scss/components/progress-bar' as *; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type' as *; .#{$iot-prefix}--progress-bar-container { position: relative; .#{$prefix}--progress-bar__label { - @include carbon--type-style('productive-heading-01'); - color: $text-01; + @include type-style('heading-compact-01'); + color: $text-primary; margin-right: calc(#{$spacing-10} + #{$spacing-03}); text-overflow: ellipsis; overflow: hidden; @@ -38,8 +41,8 @@ } .#{$iot-prefix}--progress-bar__value-label { - @include carbon--type-style('body-short-01'); - color: $text-01; + @include type-style('body-compact-01'); + color: $text-primary; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -57,10 +60,10 @@ } .#{$prefix}--progress-bar__track { - background-color: $ui-02; + background-color: $layer-02; .#{$iot-prefix}--progress-bar-container--light & { - background-color: $ui-01; + background-color: $layer-01; } } diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.jsx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.jsx index 9c0d08469d..8a97078b2a 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.jsx +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.jsx @@ -1,17 +1,9 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { keys, matches } from 'carbon-components-react/es/internal/keyboard'; -import { - CheckmarkOutline24, - CheckmarkOutline16, - Warning24, - Warning16, - RadioButton16, - RadioButton24, - CircleFilled16, - CircleFilled24, -} from '@carbon/icons-react'; +import { Enter, Space } from '@carbon/react/es/internal/keyboard/keys'; +import { matches } from '@carbon/react/es/internal/keyboard/match'; +import { CheckmarkOutline, Warning, RadioButton, CircleFilled } from '@carbon/react/icons'; import { settings } from '../../constants/Settings'; @@ -48,7 +40,7 @@ const ProgressStep = ({ }; const handleKeyDown = (e) => { - if (matches(e, [keys.Enter, keys.Space])) { + if (matches(e, [Enter, Space])) { handleClick(); } }; @@ -72,9 +64,9 @@ const ProgressStep = ({ if (mainStep) { if (completed) { - value = ; + value = ; } else if (invalid) { - value = ; + value = ; } else { const number = ( <> @@ -84,19 +76,19 @@ const ProgressStep = ({ ); if (current) { - value = {number}; + value = {number}; } else { - value = {number}; + value = {number}; } } } else if (completed) { - value = ; + value = ; } else if (invalid) { - value = ; + value = ; } else if (current) { - value = ; + value = ; } else { - value = ; + value = ; } return ( diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.story.jsx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.story.jsx index 3e30a5b127..7e389d81fc 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.story.jsx +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.story.jsx @@ -2,14 +2,14 @@ import React from 'react'; import { boolean, number, select, text } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; -import { ProgressIndicatorSkeleton, Tooltip } from 'carbon-components-react'; -import { settings } from 'carbon-components'; +import { ProgressIndicatorSkeleton, Tooltip } from '@carbon/react'; +// import { settings } from 'carbon-components'; import ProgressIndicator from './ProgressIndicator'; import { CarbonProgressIndicator, CarbonProgressStep } from '.'; -const { prefix } = settings; +const { prefix } = 'cds'; const items = [ { diff --git a/packages/react/src/components/ProgressIndicator/_progress-indicator.scss b/packages/react/src/components/ProgressIndicator/_progress-indicator.scss index 52fb6f6200..f2bf0bdcf3 100644 --- a/packages/react/src/components/ProgressIndicator/_progress-indicator.scss +++ b/packages/react/src/components/ProgressIndicator/_progress-indicator.scss @@ -1,23 +1,30 @@ -@import '~carbon-components/scss/components/progress-indicator/progress-indicator'; -@import '../../globals/vars'; - +@use '@carbon/react/scss/components/progress-indicator' as *; +@use '../../globals/vars' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/components/button' as *; +@use '@carbon/react/scss/utilities/convert'; .#{$iot-prefix}--progress-indicator { display: flex; .#{$iot-prefix}--progress-step { width: 8rem; - height: rem(68px); + height: convert.to-rem(68px); &-line { position: absolute; width: calc(100% - #{$spacing-06}); height: $spacing-01; - background-color: $ui-03; - top: rem(11px); + background-color: $layer-accent-01; + top: convert.to-rem(11px); left: $spacing-06; + /* stylelint-disable scss/at-extend-no-missing-placeholder */ &--complete { @extend .#{$iot-prefix}--progress-step-line; - background-color: $interactive-01; + background-color: $button-primary; } &--sub { @@ -27,7 +34,7 @@ &-complete { @extend .#{$iot-prefix}--progress-step-line--sub; - background-color: $interactive-03; + background-color: $button-tertiary; } } } @@ -76,32 +83,32 @@ } &-label { - @include type-style('body-short-01'); + @include type-style('body-compact-01'); position: relative; - color: $text-01; + color: $text-primary; cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; - transition: box-shadow $duration--fast-02 motion(standard, productive), - color $duration--fast-02 motion(standard, productive); + transition: box-shadow $duration-fast-02 motion(standard, productive), + color $duration-fast-02 motion(standard, productive); &:focus { - color: $interactive-01; + color: $button-primary; } &:hover { - box-shadow: 0 rem(1px) $link-01; - color: $interactive-01; + box-shadow: 0 convert.to-rem(1px) $link-primary; + color: $button-primary; } &:active { - box-shadow: 0 rem(3px) 0 0 $interactive-01; + box-shadow: 0 convert.to-rem(3px) 0 0 $button-primary; } } &-label--optional { - @include type-style('body-short-01'); + @include type-style('body-compact-01'); position: relative; cursor: default; overflow: hidden; @@ -109,7 +116,7 @@ white-space: nowrap; width: auto; font-size: $spacing-04; - color: $icon-02; + color: $icon-secondary; margin-top: $spacing-01; } } @@ -126,22 +133,22 @@ &:not(.#{$iot-prefix}--progress-step--invalid) { .#{$iot-prefix}--progress-step-button { &--main-step { - fill: $interactive-01; + fill: $button-primary; // force the correct color for the svg text { - fill: $text-04; + fill: $text-on-color; } circle { - fill: $interactive-01; + fill: $button-primary; } path { - fill: $interactive-01; + fill: $button-primary; } } &--sub-step { svg { - fill: $interactive-03; + fill: $button-tertiary; } } } @@ -149,11 +156,11 @@ .#{$iot-prefix}--progress-text-label { &:focus { box-shadow: unset; - color: $text-01; + color: $text-primary; } &:hover { box-shadow: unset; - color: $text-01; + color: $text-primary; } &:active { box-shadow: unset; @@ -163,18 +170,18 @@ &--complete { svg { - fill: $interactive-01; + fill: $button-primary; } } &--incomplete { .#{$iot-prefix}--progress-step-button--main-step { - fill: $text-01; + fill: $text-primary; } .#{$iot-prefix}--progress-step-button--sub-step { svg { - color: $text-01; + color: $text-primary; } } } @@ -182,26 +189,26 @@ &--disabled { &:not(.#{$iot-prefix}--progress-step--invalid) { .#{$iot-prefix}--progress-step-button--main-step { - fill: $disabled-02; + fill: $icon-disabled; } .#{$iot-prefix}--progress-step-button--sub-step { svg { - fill: $disabled-02; + fill: $icon-disabled; } } } &.#{$iot-prefix}--progress-step--invalid { svg { - fill: $disabled-02; + fill: $icon-disabled; } } .#{$iot-prefix}--progress-step-button .#{$iot-prefix}--progress-text { &-label, &-label--optional { - color: $disabled-02; + color: $layer-active-01; cursor: default; box-shadow: none; } @@ -254,7 +261,7 @@ &-button { .#{$iot-prefix}--progress-text { left: $spacing-07; - top: rem(3px); + top: convert.to-rem(3px); } &--sub-step { .#{$iot-prefix}--progress-text { @@ -272,7 +279,7 @@ width: $spacing-01; height: calc(100% - #{$spacing-06}); top: $layout-02; - left: rem(11px); + left: convert.to-rem(11px); &--complete { @extend .#{$iot-prefix}--progress-step-line; @@ -304,7 +311,7 @@ } &-line { left: unset; - right: rem(11px); + right: convert.to-rem(11px); text-align: right; } } diff --git a/packages/react/src/components/ProgressIndicator/index.js b/packages/react/src/components/ProgressIndicator/index.js index ca2a8a24ff..29282db2c0 100644 --- a/packages/react/src/components/ProgressIndicator/index.js +++ b/packages/react/src/components/ProgressIndicator/index.js @@ -2,4 +2,4 @@ export { ProgressIndicatorSkeleton, ProgressIndicator as CarbonProgressIndicator, ProgressStep as CarbonProgressStep, -} from 'carbon-components-react'; +} from '@carbon/react'; diff --git a/packages/react/src/components/RadioButton/_radio-button.scss b/packages/react/src/components/RadioButton/_radio-button.scss index 7fce7595b1..2e90b2543e 100644 --- a/packages/react/src/components/RadioButton/_radio-button.scss +++ b/packages/react/src/components/RadioButton/_radio-button.scss @@ -1,5 +1,6 @@ -@import '~carbon-components/scss/components/radio-button/radio-button'; -@import '../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/components/radio-button' as *; html[dir='rtl'] { .#{$prefix}--radio-button-wrapper:not(:last-of-type) { diff --git a/packages/react/src/components/RadioButton/index.js b/packages/react/src/components/RadioButton/index.js index 340ca7bebd..882d7d6446 100644 --- a/packages/react/src/components/RadioButton/index.js +++ b/packages/react/src/components/RadioButton/index.js @@ -1 +1 @@ -export { RadioButton, RadioButtonSkeleton } from 'carbon-components-react'; +export { RadioButton, RadioButtonSkeleton } from '@carbon/react'; diff --git a/packages/react/src/components/RadioButtonGroup/index.js b/packages/react/src/components/RadioButtonGroup/index.js index f1c4a1a41b..03f7bdb3f8 100644 --- a/packages/react/src/components/RadioButtonGroup/index.js +++ b/packages/react/src/components/RadioButtonGroup/index.js @@ -1 +1 @@ -export { RadioButtonGroup } from 'carbon-components-react'; +export { RadioButtonGroup } from '@carbon/react'; diff --git a/packages/react/src/components/RadioTile/index.js b/packages/react/src/components/RadioTile/index.js index 608dead13d..79348198e0 100644 --- a/packages/react/src/components/RadioTile/index.js +++ b/packages/react/src/components/RadioTile/index.js @@ -1 +1 @@ -export { RadioTile } from 'carbon-components-react'; +export { RadioTile } from '@carbon/react'; diff --git a/packages/react/src/components/ReadOnlyValue/ReadOnlyValue.jsx b/packages/react/src/components/ReadOnlyValue/ReadOnlyValue.jsx index b4086e8c2c..29133f714f 100644 --- a/packages/react/src/components/ReadOnlyValue/ReadOnlyValue.jsx +++ b/packages/react/src/components/ReadOnlyValue/ReadOnlyValue.jsx @@ -1,6 +1,6 @@ import React from 'react'; import classnames from 'classnames'; -import { SkeletonText } from 'carbon-components-react'; +import { SkeletonText } from '@carbon/react'; import { settings } from '../../constants/Settings'; diff --git a/packages/react/src/components/ReadOnlyValue/ReadOnlyValue.story.jsx b/packages/react/src/components/ReadOnlyValue/ReadOnlyValue.story.jsx index 950307aa41..90760ccbf7 100644 --- a/packages/react/src/components/ReadOnlyValue/ReadOnlyValue.story.jsx +++ b/packages/react/src/components/ReadOnlyValue/ReadOnlyValue.story.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { boolean, text } from '@storybook/addon-knobs'; import { useEffect, useState } from '@storybook/addons'; -import { Link, UnorderedList, ListItem } from 'carbon-components-react'; +import { Link, UnorderedList, ListItem } from '@carbon/react'; import ReadOnlyValueREADME from './ReadOnlyValue.mdx'; import ReadOnlyValue from './ReadOnlyValue'; diff --git a/packages/react/src/components/ReadOnlyValue/_read-only-value.scss b/packages/react/src/components/ReadOnlyValue/_read-only-value.scss index b2665d8840..8b3845466e 100644 --- a/packages/react/src/components/ReadOnlyValue/_read-only-value.scss +++ b/packages/react/src/components/ReadOnlyValue/_read-only-value.scss @@ -1,3 +1,8 @@ +@use '../../globals/vars' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type' as *; .#{$iot-prefix}--read-only-value { display: block; margin-bottom: $spacing-06; @@ -12,12 +17,12 @@ > label { display: inline-block; @include type-style('label-01'); - color: $text-02; + color: $text-secondary; > textarea, div { - @include type-style('body-short-01'); + @include type-style('body-compact-01'); margin-top: $spacing-02; - color: $text-01; + color: $text-primary; border: 0; background: none; padding-top: 0; @@ -29,16 +34,16 @@ &__inline { margin-bottom: $spacing-03; label { - @include type-style('body-short-01'); + @include type-style('body-compact-01'); display: grid; grid-template-columns: repeat(2, 1fr); gap: $spacing-06; - color: $text-02; + color: $text-secondary; align-items: baseline; > textarea, div { - @include type-style('body-short-01'); - color: $text-01; + @include type-style('body-compact-01'); + color: $text-primary; } } } diff --git a/packages/react/src/components/ResourceList/ResourceList.story.jsx b/packages/react/src/components/ResourceList/ResourceList.story.jsx index a7d3e92633..6367b96952 100644 --- a/packages/react/src/components/ResourceList/ResourceList.story.jsx +++ b/packages/react/src/components/ResourceList/ResourceList.story.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { select } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; -import { Bee32, Edit16 } from '@carbon/icons-react'; +import { Bee, Edit } from '@carbon/react/icons'; import ResourceList from './ResourceList'; @@ -67,7 +67,7 @@ export const WithExtraContent = () => ( extraContent={resourceData.map((i) => (
{i.id}
- +
))} /> @@ -82,7 +82,7 @@ export const WithAction = () => ( customAction={{ onClick: action('customAction.onClick'), label: 'Configure', - icon: Edit16, + icon: Edit, }} /> ); diff --git a/packages/react/src/components/ResourceList/ResourceList.test.jsx b/packages/react/src/components/ResourceList/ResourceList.test.jsx index 6ac848fe02..76a824951c 100644 --- a/packages/react/src/components/ResourceList/ResourceList.test.jsx +++ b/packages/react/src/components/ResourceList/ResourceList.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Edit16 from '@carbon/icons-react'; +import Edit16 from '@carbon/react/icons'; import { render, screen, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/packages/react/src/components/ResourceList/_resourcelist.scss b/packages/react/src/components/ResourceList/_resourcelist.scss index 938b00880e..f95166c133 100644 --- a/packages/react/src/components/ResourceList/_resourcelist.scss +++ b/packages/react/src/components/ResourceList/_resourcelist.scss @@ -1,5 +1,9 @@ -@import '~carbon-components/scss/globals/scss/vars'; -@import '../../globals/vars'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/components/button' as *; +@use '@carbon/react/scss/components/structured-list' as *; +@use '../../globals/vars' as *; .#{$iot-prefix}--resource-list { &.#{$prefix}--structured-list--selection @@ -14,15 +18,21 @@ margin: auto 0 auto auto; svg { - fill: $interactive-01; + fill: $button-primary; margin-left: $spacing-02; } } + + .#{$prefix}--structured-list-input { + visibility: hidden; + } + .#{$prefix}--structured-list-row .#{$prefix}--structured-list-td .#{$iot-prefix}--resource-list__inline-div { font-weight: normal; padding-left: 0px; padding-top: $spacing-02; + width: 100%; } } diff --git a/packages/react/src/components/RuleBuilder/GroupLogic.jsx b/packages/react/src/components/RuleBuilder/GroupLogic.jsx index 615e701ec2..f2026cbe18 100644 --- a/packages/react/src/components/RuleBuilder/GroupLogic.jsx +++ b/packages/react/src/components/RuleBuilder/GroupLogic.jsx @@ -1,4 +1,4 @@ -import { Dropdown } from 'carbon-components-react'; +import { Dropdown } from '@carbon/react'; import * as React from 'react'; import PropTypes from 'prop-types'; diff --git a/packages/react/src/components/RuleBuilder/Rule.jsx b/packages/react/src/components/RuleBuilder/Rule.jsx index e7a65fef69..ef1eb9d752 100644 --- a/packages/react/src/components/RuleBuilder/Rule.jsx +++ b/packages/react/src/components/RuleBuilder/Rule.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Dropdown } from 'carbon-components-react'; -import { Add32, Subtract32, TextNewLine32 } from '@carbon/icons-react'; +import { Dropdown } from '@carbon/react'; +import { Add, Subtract, TextNewLine } from '@carbon/react/icons'; import PropTypes from 'prop-types'; import { settings } from '../../constants/Settings'; @@ -272,7 +272,7 @@ const Rule = ({ rule, onAddRule, onRemoveRule, onChange, columns, i18n }) => {
@@ -277,155 +287,157 @@ const RuleBuilder = ({
- - - - - - - handleOnChange(e.target.value, 'TITLE')} - data-testid={`${testId}-title-input`} - /> - - {currentFilter?.filterTags?.map((tag) => ( - - {tag} - - )) || []} - - - -
- - {mergedI18n.addUsersButtonLabel} - - ), - }, - table: {}, - }} - data={editUsers.map((user) => ({ - id: user.name, - values: { - name: user.name, - type: - Array.isArray(user.users) && user.users.length > 0 - ? mergedI18n.groupTypeLabel - : mergedI18n.userTypeLabel, - }, - }))} - columns={[ - { - id: 'name', - name: mergedI18n.nameColumnLabel, - }, - { - id: 'type', - name: mergedI18n.typeColumnLabel, - }, - ]} - /> - - {mergedI18n.addUsersButtonLabel} - - ), - }, - table: {}, - }} - data={readUsers.map((user) => ({ - id: user.name, - values: { - name: user.name, - type: - Array.isArray(user.users) && user.users.length > 0 - ? mergedI18n.groupTypeLabel - : mergedI18n.userTypeLabel, - }, - }))} - columns={[ - { - id: 'name', - name: mergedI18n.nameColumnLabel, - }, - { - id: 'type', - name: mergedI18n.typeColumnLabel, - }, - ]} + + + {mergedI18n.filterTabText} + + + {mergedI18n.sharingTabText} + + + + + + + + + + handleOnChange(e.target.value, 'TITLE')} + data-testid={`${testId}-title-input`} /> -
-
-
-
+ + {currentFilter?.filterTags?.map((tag) => ( + + {tag} + + )) || []} + + + +
+ } + id="add-editors-button" + kind="ghost" + testId="rule-builder-add-edit-users" + onClick={handleAddAccess('edit')} + > + {mergedI18n.addUsersButtonLabel} + + ), + }, + table: {}, + }} + data={editUsers.map((user) => ({ + id: user.name, + values: { + name: user.name, + type: + Array.isArray(user.users) && user.users.length > 0 + ? mergedI18n.groupTypeLabel + : mergedI18n.userTypeLabel, + }, + }))} + columns={[ + { + id: 'name', + name: mergedI18n.nameColumnLabel, + }, + { + id: 'type', + name: mergedI18n.typeColumnLabel, + }, + ]} + /> + } + id="add-read-users" + kind="ghost" + testId="rule-builder-add-read-users" + onClick={handleAddAccess('read')} + > + {mergedI18n.addUsersButtonLabel} + + ), + }, + table: {}, + }} + data={readUsers.map((user) => ({ + id: user.name, + values: { + name: user.name, + type: + Array.isArray(user.users) && user.users.length > 0 + ? mergedI18n.groupTypeLabel + : mergedI18n.userTypeLabel, + }, + }))} + columns={[ + { + id: 'name', + name: mergedI18n.nameColumnLabel, + }, + { + id: 'type', + name: mergedI18n.typeColumnLabel, + }, + ]} + /> +
+
+ + +