diff --git a/.build/check-public-exports/index.ts b/packages/apollo-angular-components/.build/check-public-exports/index.ts similarity index 100% rename from .build/check-public-exports/index.ts rename to packages/apollo-angular-components/.build/check-public-exports/index.ts diff --git a/.build/commitlint/index.js b/packages/apollo-angular-components/.build/commitlint/index.js similarity index 100% rename from .build/commitlint/index.js rename to packages/apollo-angular-components/.build/commitlint/index.js diff --git a/.build/common/github/index.js b/packages/apollo-angular-components/.build/common/github/index.js similarity index 100% rename from .build/common/github/index.js rename to packages/apollo-angular-components/.build/common/github/index.js diff --git a/.build/common/index.js b/packages/apollo-angular-components/.build/common/index.js similarity index 100% rename from .build/common/index.js rename to packages/apollo-angular-components/.build/common/index.js diff --git a/.build/publish-gh-pages/index.js b/packages/apollo-angular-components/.build/publish-gh-pages/index.js similarity index 100% rename from .build/publish-gh-pages/index.js rename to packages/apollo-angular-components/.build/publish-gh-pages/index.js diff --git a/.ci/templates/steps/create-bundle.yml b/packages/apollo-angular-components/.ci/templates/steps/create-bundle.yml similarity index 100% rename from .ci/templates/steps/create-bundle.yml rename to packages/apollo-angular-components/.ci/templates/steps/create-bundle.yml diff --git a/.ci/templates/steps/initialize-environment.yml b/packages/apollo-angular-components/.ci/templates/steps/initialize-environment.yml similarity index 100% rename from .ci/templates/steps/initialize-environment.yml rename to packages/apollo-angular-components/.ci/templates/steps/initialize-environment.yml diff --git a/.ci/templates/steps/install-dependencies.yml b/packages/apollo-angular-components/.ci/templates/steps/install-dependencies.yml similarity index 100% rename from .ci/templates/steps/install-dependencies.yml rename to packages/apollo-angular-components/.ci/templates/steps/install-dependencies.yml diff --git a/.ci/templates/steps/test.yml b/packages/apollo-angular-components/.ci/templates/steps/test.yml similarity index 100% rename from .ci/templates/steps/test.yml rename to packages/apollo-angular-components/.ci/templates/steps/test.yml diff --git a/.codeclimate.yml b/packages/apollo-angular-components/.codeclimate.yml similarity index 100% rename from .codeclimate.yml rename to packages/apollo-angular-components/.codeclimate.yml diff --git a/.compodocrc.json b/packages/apollo-angular-components/.compodocrc.json similarity index 100% rename from .compodocrc.json rename to packages/apollo-angular-components/.compodocrc.json diff --git a/.editorconfig b/packages/apollo-angular-components/.editorconfig similarity index 100% rename from .editorconfig rename to packages/apollo-angular-components/.editorconfig diff --git a/.eslintrc.json b/packages/apollo-angular-components/.eslintrc.json similarity index 100% rename from .eslintrc.json rename to packages/apollo-angular-components/.eslintrc.json diff --git a/.github/workflows/publish.yml b/packages/apollo-angular-components/.github/workflows/publish.yml similarity index 100% rename from .github/workflows/publish.yml rename to packages/apollo-angular-components/.github/workflows/publish.yml diff --git a/.gitignore b/packages/apollo-angular-components/.gitignore similarity index 100% rename from .gitignore rename to packages/apollo-angular-components/.gitignore diff --git a/.npmrc b/packages/apollo-angular-components/.npmrc similarity index 100% rename from .npmrc rename to packages/apollo-angular-components/.npmrc diff --git a/.vscode/extensions.json b/packages/apollo-angular-components/.vscode/extensions.json similarity index 100% rename from .vscode/extensions.json rename to packages/apollo-angular-components/.vscode/extensions.json diff --git a/.vscode/settings.json b/packages/apollo-angular-components/.vscode/settings.json similarity index 100% rename from .vscode/settings.json rename to packages/apollo-angular-components/.vscode/settings.json diff --git a/CHANGELOG.md b/packages/apollo-angular-components/CHANGELOG.md similarity index 90% rename from CHANGELOG.md rename to packages/apollo-angular-components/CHANGELOG.md index db428fdad..d1cd6a50c 100644 --- a/CHANGELOG.md +++ b/packages/apollo-angular-components/CHANGELOG.md @@ -1,97 +1,3 @@ -# v15.2.5 (2024-04-09) -* **grid** allow swapping filter containers -* **chore** update readme with new package from apollo-design - -# v15.2.4 (2024-02-22) -* **grid** remove reserved space for actions if scrollable -* **grid** update font and icon sizes for high density mode - -# v15.2.3 (2024-02-20) -* **tree-select** focus-visible state on ui-tree-select - -# v15.2.2 (2024-02-16) -* **grid** display margin shadow if scrollable -* **suggest** change default forceDisplayDropdownOverInput -* **grid** update filter options on lang change - -# v15.2.1 (2024-02-16) -* **tree-select** add accessible props - -# v15.2.0 (2024-07-02) -* **grid** add tests for high density mode -* **grid** add support for high density mode -* **grid** add tests for high density mode -* **grid** add support for high density mode - -# v15.1.7 (2024-07-02) -* **grid** add nullish for set items - -# v15.1.6 (2024-07-02) -* **grid** react on max filters count changes - -# v15.1.5 (2024-05-02) -* **grid** allow adding a custom search component via a template - -# v15.1.4 (2024-02-02) -* **file-picker** dropzone should only highlight when dragging files - -# v15.1.3 (2024-01-30) -* **grid** exclude emtpy array from filter value - -# v15.1.2 (2024-01-29) -* **grid** allow resetting searchable directive's value - -# v15.1.1 (2024-01-16) -* **keyboard-shortcut** initialize shortcut keys input -* **grid** translate filter options -* **grid** ignore unkown types for entry hashing -* **grid** use dropdown value as SSOT -* **suggest** change condition for overlay positioning -* **grid** add data-cy to suggest - -# v15.1.0 (2023-12-15) -* **grid** drop unused customMenu directive -* **grid** use suggest for multi filter dropdown -* **suggest** add config input for max selection count - -# v15.0.19 (2023-12-20) -* **grid** change visibility-manager isDirty$ - -# v15.0.18 (2023-12-20) -* **file-picker** rm nrgx/component dependency -* **chore** bump version to v15.0.17 -* **grid** make empty state sticky for scrollable grid -* **grid** remove jitter caused by scrollbar -* **grid** emit resize changes iff column exists - -# v15.0.17 (2023-12-14) -* **grid** add input for deficit receiving column -* **grid** remove jitter caused by scrollbar -* **grid** emit resize changes iff column exists - -# v15.0.16 (2023-12-14) -* **file-picker** file dropzone directive - -# v15.0.15 (2023-12-12) -* **grid** remove cell resize color change - -# v15.0.14 (2023-12-11) -* **grid** page select styling - -# v15.0.13 (2023-12-08) -* **grid** modify hover color - -# v15.0.12 (2023-12-07) -* **tree-select** tree nodes disappears after loading - -# v15.0.11 (2023-12-05) -* **grid** selectable index react to pageSize -* **file-picker** make input optional in file-drop-zone - -# v15.0.10 (2023-12-04) -* **grid** add selectable page index -* **fix** increase loading buffer size - # v15.0.9 (2023-11-24) * **grid** column width reacts on resize strategy changes * **grid** handle single sticky column case diff --git a/LICENSE b/packages/apollo-angular-components/LICENSE similarity index 100% rename from LICENSE rename to packages/apollo-angular-components/LICENSE diff --git a/README.md b/packages/apollo-angular-components/README.md similarity index 91% rename from README.md rename to packages/apollo-angular-components/README.md index a528806b1..3debf0b07 100644 --- a/README.md +++ b/packages/apollo-angular-components/README.md @@ -2,14 +2,6 @@ # Angular Components Library -**This repo will be used only for support fixes.** - -`@uipath/angular` was moved into [apollo-design-system](https://github.com/UiPath/apollo-design-system/tree/master/packages/apollo-angular-components). - -New features will move implemented in the new package `@uipath/apollo-angular`. - -Steps to migrate to new package can be found [here](https://github.com/UiPath/apollo-design-system/tree/master/packages/apollo-angular-components#migration-from-uipathangular-and-uipathangular-internal-to-uipathapollo-angular). - A great set of reusable `@angular` components, directives and testing utilities. One of our main goals is to allow easy integration with the great collection of components already provided by the `@angular/material` team and to build everything with the following in mind: diff --git a/angular.json b/packages/apollo-angular-components/angular.json similarity index 100% rename from angular.json rename to packages/apollo-angular-components/angular.json diff --git a/azure-pipelines.yml b/packages/apollo-angular-components/azure-pipelines.yml similarity index 100% rename from azure-pipelines.yml rename to packages/apollo-angular-components/azure-pipelines.yml diff --git a/commitlint.config.js b/packages/apollo-angular-components/commitlint.config.js similarity index 100% rename from commitlint.config.js rename to packages/apollo-angular-components/commitlint.config.js diff --git a/eslint-configs/angular-html.js b/packages/apollo-angular-components/eslint-configs/angular-html.js similarity index 100% rename from eslint-configs/angular-html.js rename to packages/apollo-angular-components/eslint-configs/angular-html.js diff --git a/eslint-configs/angular.js b/packages/apollo-angular-components/eslint-configs/angular.js similarity index 100% rename from eslint-configs/angular.js rename to packages/apollo-angular-components/eslint-configs/angular.js diff --git a/eslint-configs/base.js b/packages/apollo-angular-components/eslint-configs/base.js similarity index 100% rename from eslint-configs/base.js rename to packages/apollo-angular-components/eslint-configs/base.js diff --git a/eslint-configs/rxjs.js b/packages/apollo-angular-components/eslint-configs/rxjs.js similarity index 100% rename from eslint-configs/rxjs.js rename to packages/apollo-angular-components/eslint-configs/rxjs.js diff --git a/favicon.ico b/packages/apollo-angular-components/favicon.ico similarity index 100% rename from favicon.ico rename to packages/apollo-angular-components/favicon.ico diff --git a/import-sorter.json b/packages/apollo-angular-components/import-sorter.json similarity index 100% rename from import-sorter.json rename to packages/apollo-angular-components/import-sorter.json diff --git a/logo.png b/packages/apollo-angular-components/logo.png similarity index 100% rename from logo.png rename to packages/apollo-angular-components/logo.png diff --git a/package-lock.json b/packages/apollo-angular-components/package-lock.json similarity index 99% rename from package-lock.json rename to packages/apollo-angular-components/package-lock.json index a3785b431..a00513e2c 100644 --- a/package-lock.json +++ b/packages/apollo-angular-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "angular-components", - "version": "15.2.5", + "version": "15.0.9", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "angular-components", - "version": "15.2.5", + "version": "15.0.9", "license": "MIT", "dependencies": { "@angular/animations": "15.2.9", @@ -19,6 +19,7 @@ "@angular/platform-browser": "15.2.9", "@angular/platform-browser-dynamic": "15.2.9", "@angular/router": "15.2.9", + "@ngrx/component": "15.4.0", "clipboard": "2.0.8", "lodash-es": "4.17.21", "luxon": "3.2.1", @@ -5832,6 +5833,19 @@ "@angular/router": ">= 15.1.0" } }, + "node_modules/@ngrx/component": { + "version": "15.4.0", + "resolved": "https://registry.npmjs.org/@ngrx/component/-/component-15.4.0.tgz", + "integrity": "sha512-mkSFYAOBQ6i8BNioJj0PWcXQ6D9x6LYmhmDdMrs9cUeCRT4ePbvy05D3m+45UPSQQoNMtS+g209D63tYXYy3uQ==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": "^15.0.0", + "@angular/core": "^15.0.0", + "rxjs": "^6.5.3 || ^7.5.0" + } + }, "node_modules/@ngtools/webpack": { "version": "15.2.10", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-15.2.10.tgz", @@ -13823,9 +13837,9 @@ "dev": true }, "node_modules/follow-redirects": { - "version": "1.15.5", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", - "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", "dev": true, "funding": [ { @@ -30906,6 +30920,14 @@ "tslib": "^2.1.0" } }, + "@ngrx/component": { + "version": "15.4.0", + "resolved": "https://registry.npmjs.org/@ngrx/component/-/component-15.4.0.tgz", + "integrity": "sha512-mkSFYAOBQ6i8BNioJj0PWcXQ6D9x6LYmhmDdMrs9cUeCRT4ePbvy05D3m+45UPSQQoNMtS+g209D63tYXYy3uQ==", + "requires": { + "tslib": "^2.0.0" + } + }, "@ngtools/webpack": { "version": "15.2.10", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-15.2.10.tgz", @@ -37214,9 +37236,9 @@ "dev": true }, "follow-redirects": { - "version": "1.15.5", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", - "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", "dev": true }, "for-each": { diff --git a/package.json b/packages/apollo-angular-components/package.json similarity index 98% rename from package.json rename to packages/apollo-angular-components/package.json index 1bc70c731..95169891c 100644 --- a/package.json +++ b/packages/apollo-angular-components/package.json @@ -1,6 +1,6 @@ { "name": "angular-components", - "version": "15.2.5", + "version": "15.0.9", "author": { "name": "UiPath Inc", "url": "https://uipath.com" @@ -80,6 +80,7 @@ "@angular/platform-browser": "15.2.9", "@angular/platform-browser-dynamic": "15.2.9", "@angular/router": "15.2.9", + "@ngrx/component": "15.4.0", "clipboard": "2.0.8", "lodash-es": "4.17.21", "luxon": "3.2.1", diff --git a/projects/angular/.eslintrc.json b/packages/apollo-angular-components/projects/angular/.eslintrc.json similarity index 100% rename from projects/angular/.eslintrc.json rename to packages/apollo-angular-components/projects/angular/.eslintrc.json diff --git a/projects/angular/_uipath-angular.theme.scss b/packages/apollo-angular-components/projects/angular/_uipath-angular.theme.scss similarity index 100% rename from projects/angular/_uipath-angular.theme.scss rename to packages/apollo-angular-components/projects/angular/_uipath-angular.theme.scss diff --git a/projects/angular/a11y/ng-package.json b/packages/apollo-angular-components/projects/angular/a11y/ng-package.json similarity index 100% rename from projects/angular/a11y/ng-package.json rename to packages/apollo-angular-components/projects/angular/a11y/ng-package.json diff --git a/projects/angular/a11y/src/public_api.ts b/packages/apollo-angular-components/projects/angular/a11y/src/public_api.ts similarity index 100% rename from projects/angular/a11y/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/a11y/src/public_api.ts diff --git a/projects/angular/a11y/src/queued-announcer/queued-announcer.ts b/packages/apollo-angular-components/projects/angular/a11y/src/queued-announcer/queued-announcer.ts similarity index 100% rename from projects/angular/a11y/src/queued-announcer/queued-announcer.ts rename to packages/apollo-angular-components/projects/angular/a11y/src/queued-announcer/queued-announcer.ts diff --git a/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.spec.ts b/packages/apollo-angular-components/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.spec.ts similarity index 100% rename from projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.spec.ts diff --git a/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.ts b/packages/apollo-angular-components/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.ts similarity index 100% rename from projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.ts rename to packages/apollo-angular-components/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.ts diff --git a/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.module.ts b/packages/apollo-angular-components/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.module.ts similarity index 100% rename from projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.module.ts rename to packages/apollo-angular-components/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.module.ts diff --git a/projects/angular/axe-helper.ts b/packages/apollo-angular-components/projects/angular/axe-helper.ts similarity index 96% rename from projects/angular/axe-helper.ts rename to packages/apollo-angular-components/projects/angular/axe-helper.ts index dee54972b..5f88a722e 100644 --- a/projects/angular/axe-helper.ts +++ b/packages/apollo-angular-components/projects/angular/axe-helper.ts @@ -1,56 +1,56 @@ -import { RunOptions } from 'axe-core'; -import * as jasmineAxe from 'jasmine-axe'; - -/* eslint-disable */ -export const axe = jasmineAxe.configureAxe({ - globalOptions: { - standards: { - ariaRoles: { - combobox: { - type: 'widget', - requiredOwned: [], - requiredAttrs: ['aria-expanded'], - allowedAttrs: [ - 'aria-controls', - 'aria-autocomplete', - 'aria-readonly', - 'aria-required', - 'aria-activedescendant', - 'aria-orientation', - ], - }, - }, - }, - }, -}); - -let _specFn: typeof it = () => { }; -let _focusedSpecFn: typeof fit = () => { }; -let _excludedSpecFn: typeof xit = () => { }; - -export const setSpecFn = (_it: typeof it, _fit: typeof fit, _xit: typeof xit) => { - _specFn = _it.bind(null); - _focusedSpecFn = _fit.bind(null); - _excludedSpecFn = _xit.bind(null); -}; - -export const a11y = { - fit: function (...args: Parameters) { - _focusedSpecFn?.call(null, ...args); - }, - xit: function (...args: Parameters) { - _excludedSpecFn?.call(null, ...args); - }, - it: function (...args: Parameters) { - _specFn?.call(null, ...args); - }, - suite: function (cb: (customSpecOptions: RunOptions) => void) { - cb(customSpecOptions); - }, -}; - -const customSpecOptions: RunOptions = { - rules: { - 'color-contrast': { enabled: false }, - }, -}; +import { RunOptions } from 'axe-core'; +import * as jasmineAxe from 'jasmine-axe'; + +/* eslint-disable */ +export const axe = jasmineAxe.configureAxe({ + globalOptions: { + standards: { + ariaRoles: { + combobox: { + type: 'widget', + requiredOwned: [], + requiredAttrs: ['aria-expanded'], + allowedAttrs: [ + 'aria-controls', + 'aria-autocomplete', + 'aria-readonly', + 'aria-required', + 'aria-activedescendant', + 'aria-orientation', + ], + }, + }, + }, + }, +}); + +let _specFn: typeof it = () => { }; +let _focusedSpecFn: typeof fit = () => { }; +let _excludedSpecFn: typeof xit = () => { }; + +export const setSpecFn = (_it: typeof it, _fit: typeof fit, _xit: typeof xit) => { + _specFn = _it.bind(null); + _focusedSpecFn = _fit.bind(null); + _excludedSpecFn = _xit.bind(null); +}; + +export const a11y = { + fit: function (...args: Parameters) { + _focusedSpecFn?.call(null, ...args); + }, + xit: function (...args: Parameters) { + _excludedSpecFn?.call(null, ...args); + }, + it: function (...args: Parameters) { + _specFn?.call(null, ...args); + }, + suite: function (cb: (customSpecOptions: RunOptions) => void) { + cb(customSpecOptions); + }, +}; + +const customSpecOptions: RunOptions = { + rules: { + 'color-contrast': { enabled: false }, + }, +}; diff --git a/projects/angular/components/styles/_ellipse.scss b/packages/apollo-angular-components/projects/angular/components/styles/_ellipse.scss similarity index 100% rename from projects/angular/components/styles/_ellipse.scss rename to packages/apollo-angular-components/projects/angular/components/styles/_ellipse.scss diff --git a/projects/angular/components/ui-file-picker/ng-package.json b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/ng-package.json similarity index 100% rename from projects/angular/components/ui-file-picker/ng-package.json rename to packages/apollo-angular-components/projects/angular/components/ui-file-picker/ng-package.json diff --git a/projects/angular/components/ui-file-picker/src/_ui-file-picker.theme.scss b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/_ui-file-picker.theme.scss similarity index 95% rename from projects/angular/components/ui-file-picker/src/_ui-file-picker.theme.scss rename to packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/_ui-file-picker.theme.scss index 7b6d58968..61cc8365a 100644 --- a/projects/angular/components/ui-file-picker/src/_ui-file-picker.theme.scss +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/_ui-file-picker.theme.scss @@ -11,7 +11,7 @@ .ui-file-picker { .upload-wrapper { border-color: $border-color; - &.ui-file-drop-zone-highlight { + &.file-drop-zone-highlight { border-color: $color-primary; } .upload-input-wrapper { diff --git a/projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.html b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.html similarity index 100% rename from projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.html diff --git a/projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.scss similarity index 89% rename from projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.scss index a302a3f3d..f45180e14 100644 --- a/projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.scss +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.scss @@ -1,6 +1,5 @@ :host { display: block; - position: relative; input { position: absolute; diff --git a/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.spec.ts new file mode 100644 index 000000000..03c767cfa --- /dev/null +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.spec.ts @@ -0,0 +1,136 @@ +import { + byTestId, + createComponentFactory, + Spectator, + SpyObject, + createMouseEvent, +} from '@ngneat/spectator'; +import { Subject } from 'rxjs'; +import { + a11y, + axe, +} from 'projects/angular/axe-helper'; + +import { UiFileDropZoneComponent as SuT } from './file-drop-zone.component'; +import { FileReaderService } from './file-reader.service'; + +describe('FileDropZoneComponent:', () => { + let spectator: Spectator; + let sut: SuT; + let fileReaderService: SpyObject; + const filesMock$ = new Subject(); + const errorMock$ = new Subject(); + + const filesReceivedOutput = jasmine.createSpy(); + const fileErrorOutput = jasmine.createSpy(); + + const createComponent = createComponentFactory({ + component: SuT, + detectChanges: false, + componentMocks: [ FileReaderService ], + }); + + const createMockFiles = (ext = '.pdf') => { + const files: File[] = []; + for (let i = 0; i < 5; i++) { + // name the files from 5 to 1 so we can test the sorting + files.push(new File([], (5 - i) + ext)); + } + return files; + }; + + beforeEach(() => { + spectator = createComponent(); + + fileReaderService = spectator.inject(FileReaderService, true); + spyOnProperty(fileReaderService, 'files$').and.returnValue(filesMock$); + spyOnProperty(fileReaderService, 'error$').and.returnValue(errorMock$); + spectator.detectChanges(); + sut = spectator.component; + + sut.filesReceived.subscribe(filesReceivedOutput); + sut.fileError.subscribe(fileErrorOutput); + }); + + describe('self', () => { + it('should create', () => { + spectator.detectChanges(); + expect(sut).toBeTruthy(); + }); + + a11y.suite((runOptions) => { + a11y.it('should have no violations', async () => { + expect(await axe(spectator.fixture.nativeElement, runOptions)).toHaveNoViolations(); + }); + }); + }); + + describe('dropping or browsing files', () => { + it('should display file over effect when dragged over', () => { + const mouseEvent = createMouseEvent('dragover'); + spectator.dispatchMouseEvent(byTestId('file-input'), 'dragover', undefined, undefined, mouseEvent); + spectator.detectChanges(); + + expect(spectator.query('input')).toHaveClass('file-drop-zone-highlight'); + }); + + it('should call service with files that were dropped', () => { + const mouseEvent = createMouseEvent('drop'); + + spectator.dispatchMouseEvent(byTestId('file-input'), 'drop', undefined, undefined, mouseEvent); + spectator.detectChanges(); + + expect(fileReaderService.processDroppedItems).toHaveBeenCalledWith(mouseEvent); + }); + + it('should call service with files that were browsed by clicking the input', () => { + const input = spectator.query(byTestId('file-input')) as HTMLInputElement; + const dataTransfer = new DataTransfer(); + dataTransfer.items.add(new File([''], 'test-file.pdf')); + input.files = dataTransfer.files; + + input.dispatchEvent(new InputEvent('change')); + + expect(fileReaderService.processFilesFromFileList).toHaveBeenCalledTimes(1); + }); + }); + + describe('files returned from the service', () => { + it('should sort the files if sortBy input is present', () => { + const files = createMockFiles(''); + const sortBy = 'name'; + const sortedFiles = [ '1', '2', '3', '4', '5' ].map(n => new File([], n)); + + spectator.setInput({ sortBy }); + filesMock$.next(files); + + spectator.detectChanges(); + + expect(filesReceivedOutput).toHaveBeenCalledWith(sortedFiles); + }); + + it('should filter files by extension if accept input is present', () => { + const accept = '.png'; + const acceptedFiles = createMockFiles(accept); + const files = createMockFiles().concat(acceptedFiles); + + spectator.setInput({ accept }); + filesMock$.next(files); + + spectator.detectChanges(); + + expect(filesReceivedOutput).toHaveBeenCalledWith(acceptedFiles); + }); + + it('should display the error returned from the service', () => { + const errorText = 'Test error'; + errorMock$.next(errorText); + + spectator.detectChanges(); + + expect(fileErrorOutput).toHaveBeenCalledWith(errorText); + }); + + }); +}); + diff --git a/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.ts new file mode 100644 index 000000000..fc2036c09 --- /dev/null +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-drop-zone.component.ts @@ -0,0 +1,184 @@ +import { + AfterViewInit, + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + HostListener, + Input, + OnDestroy, + OnInit, + Output, + ViewChild, +} from '@angular/core'; +import { sort } from '@uipath/angular/utilities'; +import { Subject } from 'rxjs'; +import { + map, + takeUntil, +} from 'rxjs/operators'; +import { FileReaderService } from './file-reader.service'; + +// The highlight class gets added to the supplied custom drop zone HTML element, +// so to display properly the component containing it should have that +// class defined in its styles. If no custom drop zone is supplied, the style is applied to +// the input element of this component, and also needs to be described in the css + +const DROP_ZONE_HIGHLIGHT_CLASS = 'file-drop-zone-highlight'; + +@Component({ + selector: 'ui-file-drop-zone', + templateUrl: './file-drop-zone.component.html', + styleUrls: [ './file-drop-zone.component.scss' ], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ FileReaderService ], +}) +export class UiFileDropZoneComponent implements OnInit, AfterViewInit, OnDestroy { + + @Input() disabled?: boolean; + // key of File and '-' prefix for descending sort + @Input() sortBy?: string; + @Input() single?: boolean; + // The HTML element that will act as a drop zone + // The drop events and the dragover highlight will be applied to this element + // or the element of this component if customDropZone is not supplied + @Input() set customDropZone(customDropZone: HTMLElement) { + this._dropZone = customDropZone; + } + // comma-separated extension list, example: '.jpg,.png,.pdf' + @Input() set accept(value: string | undefined) { + if (value) { + this._accept = value.split(',') + .map(v => v.trim().toLowerCase()) + .filter(v => !!v); + } + } + // if not provided, input is removed from tab order and aria is disabled + @Input() ariaLabel?: string; + + @Output() filesReceived = new EventEmitter(); + @Output() filesLoading = new EventEmitter(); + @Output() fileError = new EventEmitter(); + + @ViewChild('uploadInput', { + read: ElementRef, + static: true, + }) defaultDropZone!: ElementRef; + + private _accept: string[] = []; + private _destroyed$ = new Subject(); + private _dropZone!: HTMLElement; + + constructor( + private readonly _fileReaderService: FileReaderService, + ) { } + + @HostListener('drop', ['$event']) + drop(e: DragEvent) { + e.stopPropagation(); + e.preventDefault(); + if (this.disabled) { + return; + } + this._clearDropZoneHighlight(); + this.filesLoading.next(true); + this._fileReaderService.processDroppedItems(e); + } + + @HostListener('dragover', ['$event']) + dragover(e: DragEvent) { + e.preventDefault(); + e.stopPropagation(); + if (!this.disabled) { + this._highlightDropZone(); + } + } + + @HostListener('dragleave') + dragleave() { + if (!this.disabled) { + this._clearDropZoneHighlight(); + } + } + + click() { + this.defaultDropZone.nativeElement.click(); + } + + ngOnInit(): void { + this._fileReaderService.files$ + .pipe( + map(unsortedFiles => this._sortAndFilter(unsortedFiles)), + takeUntil(this._destroyed$), + ) + .subscribe(files => this._emitFiles(files)); + + this._fileReaderService.error$ + .pipe( + takeUntil(this._destroyed$), + ) + .subscribe(err => this.fileError.emit(err)); + } + + ngAfterViewInit(): void { + if (!this._dropZone) { + this._dropZone = this.defaultDropZone.nativeElement; + } + } + + ngOnDestroy(): void { + this._destroyed$.next(); + this._destroyed$.complete(); + } + + onBrowseFiles($event: Event) { + const filesReceived = ($event.target as HTMLInputElement).files; + if (!filesReceived) { + return; + } + this._fileReaderService.processFilesFromFileList(filesReceived); + } + + private _highlightDropZone() { + if (!this._dropZone || this._dropZone.classList.contains(DROP_ZONE_HIGHLIGHT_CLASS)) { + return; + } + this._dropZone.classList.add(DROP_ZONE_HIGHLIGHT_CLASS); + } + + private _clearDropZoneHighlight() { + if (!this._dropZone) { + return; + } + this._dropZone.classList.remove(DROP_ZONE_HIGHLIGHT_CLASS); + } + + private _emitFiles(files: File[]) { + this.fileError.emit(null); + this.filesReceived.emit(files); + this.filesLoading.emit(false); + // force change callback on input to get called + // for consecutive selections of the same files + this.defaultDropZone.nativeElement.value = null; + } + + private _sortAndFilter(files: File[]) { + files = files.filter(f => this._isAcceptedExtension(f.name)); + return this.sortBy ? sort(files, this.sortBy, false) : files; + } + + private _getFileExtension(fileName: string) { + const fileNameParts = fileName.split('.'); + const extension = fileNameParts.length > 1 ? fileNameParts.slice(-1)[0] : ''; + return `.${extension.toLowerCase()}`; + } + + private _isAcceptedExtension(fileName: string) { + if (!this._accept.length) { + return true; + } + + const fileExtension = this._getFileExtension(fileName); + return this._accept.includes(fileExtension); + } +} diff --git a/projects/angular/directives/ui-file-drop-zone/src/file-reader.service.ts b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-reader.service.ts similarity index 89% rename from projects/angular/directives/ui-file-drop-zone/src/file-reader.service.ts rename to packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-reader.service.ts index 1092ec4ad..5a1d21ca0 100644 --- a/projects/angular/directives/ui-file-drop-zone/src/file-reader.service.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/file-drop-zone/file-reader.service.ts @@ -3,6 +3,7 @@ import { NgZone, OnDestroy, } from '@angular/core'; +import { flatten } from 'lodash-es'; import { Observable, ReplaySubject, @@ -16,21 +17,17 @@ import { take, takeUntil, } from 'rxjs/operators'; - -export interface FileReaderError { - entryName: string; - error: string; - errorMessage: string; -} +import { UiFilePickerIntl } from '../ui-file-picker.intl'; @Injectable() export class FileReaderService implements OnDestroy { - private readonly _fileError$ = new Subject(); + private readonly _fileError$ = new Subject(); private readonly _files$ = new ReplaySubject(1); private readonly _destroyed$ = new Subject(); constructor( + private readonly _intl: UiFilePickerIntl, private readonly _ngZone: NgZone, ) { } @@ -96,11 +93,11 @@ export class FileReaderService implements OnDestroy { forkJoin(fileObservables).pipe( catchError((err) => { this._fileError$.next(err); - return of([] as File[][]); + return of([]); }), takeUntil(this._destroyed$), ) - .subscribe(files => this._ngZone.run(() => this._files$.next(files.reduce((acc, current) => acc.concat(current), [])))); + .subscribe(files => this._ngZone.run(() => this._files$.next(flatten(files)))); } private _isFolderUploadSupported(items: DataTransferItemList) { @@ -152,11 +149,9 @@ export class FileReaderService implements OnDestroy { readEntries(); } }, (err) => { - emitter.error({ - entryName: entry.name, - error: err.name, - errorMessage: err.message, - }); + this._intl.errorReadingFiles$(entry.name, err.name, err.message) + .pipe(take(1)) + .subscribe(error => emitter.error(error)); }); }; readEntries(); @@ -166,7 +161,7 @@ export class FileReaderService implements OnDestroy { private _readAndEmitEntries(entries: FileSystemEntry[]) { const entryObservables = entries.map(entry => this._traverseFileTree(entry)); return forkJoin(entryObservables).pipe( - map(filesMatrix => filesMatrix.reduce((acc, current) => acc.concat(current), [])), + map(filesMatrix => flatten(filesMatrix)), takeUntil(this._destroyed$), ); } diff --git a/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/public_api.ts b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/public_api.ts new file mode 100644 index 000000000..0ed75d996 --- /dev/null +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/public_api.ts @@ -0,0 +1,4 @@ +export { UiFileDropZoneComponent } from './file-drop-zone/file-drop-zone.component'; +export { UiFilePickerComponent } from './ui-file-picker.component'; +export { UiFilePickerIntl } from './ui-file-picker.intl'; +export { UiFilePickerModule } from './ui-file-picker.module'; diff --git a/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.html b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.html new file mode 100644 index 000000000..234f94459 --- /dev/null +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.html @@ -0,0 +1,98 @@ + +
+
+ + + + {{entry.name}} + + + + {{getFileExtension(entry.name)}} + + + + {{entry.size | uiFileSize | ngrxPush}} + + + + + + + + +
+
+ + +
+ +
+
+ {{intl.clickUploadDragDrop$ | ngrxPush}} +
+ {{secondaryMessage}} +
+
+ +
+
+ {{ state.fileError }} + diff --git a/projects/angular/components/ui-file-picker/src/ui-file-picker.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.scss similarity index 100% rename from projects/angular/components/ui-file-picker/src/ui-file-picker.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.scss diff --git a/projects/angular/components/ui-file-picker/src/ui-file-picker.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.spec.ts similarity index 81% rename from projects/angular/components/ui-file-picker/src/ui-file-picker.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.spec.ts index ad9b098d0..85055428a 100644 --- a/projects/angular/components/ui-file-picker/src/ui-file-picker.component.spec.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.spec.ts @@ -7,14 +7,17 @@ import { byTestId, createComponentFactory, } from '@ngneat/spectator'; +import { + LetModule, + PushModule, +} from '@ngrx/component'; import { UiGridModule } from '@uipath/angular/components/ui-grid'; import { UiPipeModule } from '@uipath/angular/pipes'; import { a11y, axe, } from 'projects/angular/axe-helper'; -import { FileReaderError } from '@uipath/angular/directives/ui-file-drop-zone'; -import { UiInputFileDropZoneComponent } from './ui-input-file-drop-zone/ui-input-file-drop-zone.component'; +import { UiFileDropZoneComponent } from './file-drop-zone/file-drop-zone.component'; import { UiFilePickerComponent as SuT } from './ui-file-picker.component'; describe('UiFilePickerComponent:', () => { @@ -38,12 +41,14 @@ describe('UiFilePickerComponent:', () => { imports: [ UiGridModule, UiPipeModule, - + LetModule, + PushModule, MatIconModule, MatProgressSpinnerModule, MatFormFieldModule, MatTooltipModule, ], + declarations: [ UiFileDropZoneComponent ], }); beforeEach(() => { @@ -95,7 +100,7 @@ describe('UiFilePickerComponent:', () => { }); it('should display spinner when files are loading', () => { - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); + const fileDropZone = spectator.query(UiFileDropZoneComponent); fileDropZone?.filesLoading.next(true); spectator.detectChanges(); @@ -104,23 +109,19 @@ describe('UiFilePickerComponent:', () => { }); it('should display error from file reader service', () => { - const testError: FileReaderError = { - entryName: 'dir-1', - error: 'test error', - errorMessage: 'test error message', - }; + const testError = 'test error'; - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); + const fileDropZone = spectator.query(UiFileDropZoneComponent); fileDropZone?.fileError.next(testError); spectator.detectChanges(); const errorElement = spectator.query('mat-error'); expect(errorElement).toBeTruthy(); - expect(errorElement).toHaveText('Error reading directory: dir-1. test error: test error message'); + expect(errorElement).toHaveText(testError); }); it('should not display large input', () => { - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); + const fileDropZone = spectator.query(UiFileDropZoneComponent); fileDropZone?.filesReceived.next(createMockFiles()); spectator.detectChanges(); const inputWrapper = spectator.query('.upload-input-wrapper'); @@ -129,7 +130,7 @@ describe('UiFilePickerComponent:', () => { }); it('should display and emit all files from the drop zone in the grid', () => { - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); + const fileDropZone = spectator.query(UiFileDropZoneComponent); fileDropZone?.filesReceived.next(createMockFiles()); spectator.detectChanges(); const gridRows = spectator.queryAll('.ui-grid-row'); @@ -140,7 +141,7 @@ describe('UiFilePickerComponent:', () => { }); it('should add newly dropped files to the grid and emit the new file list', () => { - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); + const fileDropZone = spectator.query(UiFileDropZoneComponent); fileDropZone?.filesReceived.next(createMockFiles()); spectator.detectChanges(); @@ -155,7 +156,7 @@ describe('UiFilePickerComponent:', () => { }); it('should not add a file if it is a duplicate', () => { - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); + const fileDropZone = spectator.query(UiFileDropZoneComponent); fileDropZone?.filesReceived.next(createMockFiles()); spectator.detectChanges(); @@ -170,7 +171,7 @@ describe('UiFilePickerComponent:', () => { describe('deleting files', () => { it('should remove the grid, return to the "large" state, and emit an empty file list when clicking Delete All', () => { - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); + const fileDropZone = spectator.query(UiFileDropZoneComponent); fileDropZone?.filesReceived.next(createMockFiles()); spectator.detectChanges(); @@ -188,7 +189,7 @@ describe('UiFilePickerComponent:', () => { }); it('should remove the correct row and emit the new file list when clicking its delete button', () => { - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); + const fileDropZone = spectator.query(UiFileDropZoneComponent); fileDropZone?.filesReceived.next(createMockFiles()); spectator.detectChanges(); @@ -231,7 +232,7 @@ describe('UiFilePickerComponent:', () => { const sortedFiles = [ '1', '2', '3', '4', '5' ].map(n => new File([], n)); spectator.setInput({ sortBy }); - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); + const fileDropZone = spectator.query(UiFileDropZoneComponent); fileDropZone?.filesReceived.next(files); spectator.detectChanges(); @@ -240,19 +241,15 @@ describe('UiFilePickerComponent:', () => { }); it('should display the error returned from the service', () => { - const testError: FileReaderError = { - entryName: 'dir-1', - error: 'test error', - errorMessage: 'test error message', - }; + const errorText = 'Test error'; const errorSubscription = jasmine.createSpy(); sut.fileError$.subscribe(errorSubscription); - const fileDropZone = spectator.query(UiInputFileDropZoneComponent); - fileDropZone?.fileError.next(testError); + const fileDropZone = spectator.query(UiFileDropZoneComponent); + fileDropZone?.fileError.next(errorText); spectator.detectChanges(); - expect(errorSubscription).toHaveBeenCalledWith('Error reading directory: dir-1. test error: test error message'); + expect(errorSubscription).toHaveBeenCalledWith(errorText); }); }); diff --git a/projects/angular/components/ui-file-picker/src/ui-file-picker.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.ts similarity index 67% rename from projects/angular/components/ui-file-picker/src/ui-file-picker.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.ts index 2cdc76483..dca624402 100644 --- a/projects/angular/components/ui-file-picker/src/ui-file-picker.component.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.component.ts @@ -15,55 +15,20 @@ import { ReplaySubject, Subject, } from 'rxjs'; -import { - take, - takeUntil, -} from 'rxjs/operators'; +import { takeUntil } from 'rxjs/operators'; import { getFileExtension, sort, } from '@uipath/angular/utilities'; -import { CommonModule } from '@angular/common'; - -import { MatButtonModule } from '@angular/material/button'; -import { MatIconModule } from '@angular/material/icon'; -import { MatInputModule } from '@angular/material/input'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { MatTooltipModule } from '@angular/material/tooltip'; - -import { UiGridModule } from '@uipath/angular/components/ui-grid'; - -import { UiPipeModule } from '@uipath/angular/pipes'; -import { - UiFileDropZoneDirective, - FileReaderError, -} from '@uipath/angular/directives/ui-file-drop-zone'; -import { UiNgLetModule } from '@uipath/angular/directives/ui-ng-let'; +import { UiFileDropZoneComponent } from './file-drop-zone/file-drop-zone.component'; import { UiFilePickerIntl } from './ui-file-picker.intl'; -import { UiInputFileDropZoneComponent } from './ui-input-file-drop-zone/ui-input-file-drop-zone.component'; @Component({ selector: 'ui-file-picker', templateUrl: './ui-file-picker.component.html', styleUrls: [ './ui-file-picker.component.scss' ], changeDetection: ChangeDetectionStrategy.OnPush, - standalone: true, - imports: [ - CommonModule, - MatButtonModule, - MatIconModule, - MatInputModule, - MatProgressSpinnerModule, - MatTooltipModule, - - UiGridModule, - UiPipeModule, - UiNgLetModule, - - UiFileDropZoneDirective, - UiInputFileDropZoneComponent, - ], }) export class UiFilePickerComponent implements OnInit, OnDestroy { @@ -86,7 +51,7 @@ export class UiFilePickerComponent implements OnInit, OnDestroy { @HostBinding('class.ui-file-picker') cls = true; - @ViewChild('fileDropzone', { read: UiInputFileDropZoneComponent }) fileDropZone?: UiInputFileDropZoneComponent; + @ViewChild('fileDropzone', { read: UiFileDropZoneComponent }) fileDropZone?: UiFileDropZoneComponent; @ViewChild('deleteAll', { read: ElementRef }) deleteAllButton!: ElementRef; files$ = new ReplaySubject(1); @@ -151,15 +116,8 @@ export class UiFilePickerComponent implements OnInit, OnDestroy { this.filesLoading$.next(loading); } - handleFileError(error: FileReaderError | null) { - if (error) { - this.intl.errorReadingFiles$(error.entryName, error.error, error.errorMessage) - .pipe( - take(1), - ).subscribe(errorMessage => this.fileError$.next(errorMessage)); - } else { - this.fileError$.next(null); - } + handleFileError(error: string | null) { + this.fileError$.next(error); } private _sortFiles(files: File[]) { diff --git a/projects/angular/components/ui-file-picker/src/ui-file-picker.intl.ts b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.intl.ts similarity index 100% rename from projects/angular/components/ui-file-picker/src/ui-file-picker.intl.ts rename to packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.intl.ts diff --git a/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.module.ts b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.module.ts new file mode 100644 index 000000000..f92e14b6f --- /dev/null +++ b/packages/apollo-angular-components/projects/angular/components/ui-file-picker/src/ui-file-picker.module.ts @@ -0,0 +1,43 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatTooltipModule } from '@angular/material/tooltip'; + +import { UiGridModule } from '@uipath/angular/components/ui-grid'; + +import { + LetModule, + PushModule, +} from '@ngrx/component'; +import { UiPipeModule } from '@uipath/angular/pipes'; +import { UiFileDropZoneComponent } from './file-drop-zone/file-drop-zone.component'; +import { UiFilePickerComponent } from './ui-file-picker.component'; + +@NgModule({ + imports: [ + CommonModule, + MatButtonModule, + MatIconModule, + MatInputModule, + MatProgressSpinnerModule, + MatTooltipModule, + + UiGridModule, + UiPipeModule, + + LetModule, + PushModule, + ], + declarations: [ + UiFileDropZoneComponent, + UiFilePickerComponent, + ], + exports: [ + UiFileDropZoneComponent, + UiFilePickerComponent, + ], +}) +export class UiFilePickerModule { } diff --git a/projects/angular/components/ui-grid/ng-package.json b/packages/apollo-angular-components/projects/angular/components/ui-grid/ng-package.json similarity index 100% rename from projects/angular/components/ui-grid/ng-package.json rename to packages/apollo-angular-components/projects/angular/components/ui-grid/ng-package.json diff --git a/projects/angular/components/ui-grid/src/_ui-grid-variables.scss b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/_ui-grid-variables.scss similarity index 64% rename from projects/angular/components/ui-grid/src/_ui-grid-variables.scss rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/_ui-grid-variables.scss index 3e404f5df..7973995dd 100644 --- a/projects/angular/components/ui-grid/src/_ui-grid-variables.scss +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/_ui-grid-variables.scss @@ -1,9 +1,7 @@ $ui-grid-cell-background-color: var(--color-background, #ffffff); $ui-grid-border-color: var(--color-border-de-emp, #cfd8dd); $ui-grid-cell-bottom-border: 1px solid $ui-grid-border-color; -$ui-grid-row-hover-color: var(--color-data-grid-hover, #F1F2F3); -$ui-grid-header-pressed-color: var(--color-data-grid-pressed, #EAECED); +$ui-grid-row-hover-color: var(--color-hover, #e9f1fa); $header-background-color: var(--color-background-secondary, #f4f5f7); $grid-actions-box-shadow: var(--color-background, #ffffff); $highlighted-entity-color: var(--color-primary, #0067df); -$scroll-margin-shadow-color: var(--color-background-inverse, #182027); diff --git a/projects/angular/components/ui-grid/src/_ui-grid.theme.scss b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/_ui-grid.theme.scss similarity index 88% rename from projects/angular/components/ui-grid/src/_ui-grid.theme.scss rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/_ui-grid.theme.scss index fe22bc395..4ea08787f 100644 --- a/projects/angular/components/ui-grid/src/_ui-grid.theme.scss +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/_ui-grid.theme.scss @@ -157,7 +157,12 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition; &-header-cell:not(.ui-grid-feature-cell):focus, &-header-cell.ui-grid-state-resizing { - background-color: $ui-grid-header-pressed-color; + background-color: $ui-grid-row-hover-color; + outline: none; + } + + &-state-resizing { + background-color: $ui-grid-row-hover-color; outline: none; } @@ -199,13 +204,14 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition; .ui-grid-row { &:focus, - &:hover, &.cdk-focused { background-color: $ui-grid-row-hover-color; - .ui-grid-header-cell, - .ui-grid-cell { - background-color: $ui-grid-row-hover-color; + &:not(.ui-grid-row-state-expanded) { + .ui-grid-header-cell, + .ui-grid-cell { + background-color: $ui-grid-row-hover-color; + } } outline: none; @@ -216,15 +222,21 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition; } } - .grid-margin-shadow { - position: sticky; - right: 0; - height: 100%; + &:hover { + background-color: $ui-grid-row-hover-color; + + &:not(.ui-grid-row-state-expanded) { + .ui-grid-header-cell, + .ui-grid-cell { + background-color: $ui-grid-row-hover-color; + } + } + + outline: none; - @if $is-dark { - box-shadow: -7px 20px 20px 4px #000000; - } @else { - box-shadow: -3px 5px 20px 1.6px $scroll-margin-shadow-color; + .ui-grid-action-cell-container { + opacity: 1; + background-color: $ui-grid-row-hover-color; } } } diff --git a/projects/angular/components/ui-grid/src/body/ui-grid-column.directive.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-column.directive.spec.ts similarity index 100% rename from projects/angular/components/ui-grid/src/body/ui-grid-column.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-column.directive.spec.ts diff --git a/projects/angular/components/ui-grid/src/body/ui-grid-column.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-column.directive.ts similarity index 98% rename from projects/angular/components/ui-grid/src/body/ui-grid-column.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-column.directive.ts index 27982b8c1..ecfc2bf48 100644 --- a/projects/angular/components/ui-grid/src/body/ui-grid-column.directive.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-column.directive.ts @@ -227,10 +227,6 @@ export class UiGridColumnDirective implements OnChanges, OnDestroy { @Input() refetch = false; - /** - * Determines the message which appears in the tooltip of an info icon inside the column header. - * - */ @Input() description = ''; diff --git a/projects/angular/components/ui-grid/src/body/ui-grid-expanded-row.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-expanded-row.directive.ts similarity index 100% rename from projects/angular/components/ui-grid/src/body/ui-grid-expanded-row.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-expanded-row.directive.ts diff --git a/projects/angular/components/ui-grid/src/body/ui-grid-loading.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-loading.directive.ts similarity index 100% rename from projects/angular/components/ui-grid/src/body/ui-grid-loading.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-loading.directive.ts diff --git a/projects/angular/components/ui-grid/src/body/ui-grid-no-content.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-no-content.directive.ts similarity index 100% rename from projects/angular/components/ui-grid/src/body/ui-grid-no-content.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-no-content.directive.ts diff --git a/projects/angular/components/ui-grid/src/body/ui-grid-row-action.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-row-action.directive.ts similarity index 100% rename from projects/angular/components/ui-grid/src/body/ui-grid-row-action.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-row-action.directive.ts diff --git a/projects/angular/components/ui-grid/src/body/ui-grid-row-card-view.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-row-card-view.directive.ts similarity index 100% rename from projects/angular/components/ui-grid/src/body/ui-grid-row-card-view.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-row-card-view.directive.ts diff --git a/projects/angular/components/ui-grid/src/body/ui-grid-row-config.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-row-config.directive.ts similarity index 100% rename from projects/angular/components/ui-grid/src/body/ui-grid-row-config.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/body/ui-grid-row-config.directive.ts diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.html b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.html similarity index 77% rename from projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.html index e6d1a5750..963b19afb 100644 --- a/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.html +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.html @@ -41,30 +41,9 @@ -
+
- - {{ _intl.getPageOnlyLabel() }} - - - - {{ possiblePage.label }} - - - - {{ _intl.getTotalPages(pageCount) }} - - - - {{_intl.getPageLabel(pageIndex+1, pageCount)}} - + {{_intl.getPageLabel(pageIndex+1, pageCount)}} {{ pageIndex + 1 }} diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss similarity index 98% rename from projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss index 47ba6c90e..f20306667 100644 --- a/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss @@ -8,8 +8,6 @@ $mat-paginator-selector-trigger-width: 56px; $mat-paginator-selector-trigger-outline-width: 64px; $mat-paginator-selector-trigger-fill-width: 64px; -$mat-paginator-index-selector-width: 48px; - $mat-paginator-page-label-margin: 0 32px 0 24px; $mat-paginator-button-icon-size: 14px; $mat-paginator-button-size: 32px; @@ -56,7 +54,6 @@ ui-grid-custom-paginator { .mat-mdc-paginator-page-size-label { margin: $mat-paginator-items-per-page-label-margin; } - .mat-mdc-paginator-page-size-select { margin: $mat-paginator-selector-margin; width: $mat-paginator-selector-trigger-width; diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.spec.ts similarity index 59% rename from projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.spec.ts index f3468e320..47a95cb9a 100644 --- a/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.spec.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.spec.ts @@ -7,7 +7,6 @@ import { TestBed, } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { EventGenerator } from '@uipath/angular/testing'; import { @@ -21,8 +20,7 @@ import { UiGridCustomPaginatorModule } from './ui-grid-custom-paginator.module'; + [showFirstLastButtons]="true"> `, }) @@ -34,7 +32,6 @@ class TestFixtureComponent { pageIndex = 0; pageSize = 10; length = 120; - selectablePageIndex = false; } describe('Component: UiGrid', () => { @@ -43,11 +40,10 @@ describe('Component: UiGrid', () => { let component: TestFixtureComponent; let intl: UiMatPaginatorIntl; - const setup = (selectablePageIndex = false, length = 120) => { + beforeEach(() => { TestBed.configureTestingModule({ imports: [ UiGridCustomPaginatorModule, - NoopAnimationsModule, ], providers: [ UiMatPaginatorIntl, @@ -59,26 +55,22 @@ describe('Component: UiGrid', () => { intl = TestBed.inject(UiMatPaginatorIntl); fixture = TestBed.createComponent(TestFixtureComponent); - component = fixture.componentInstance; - - component.selectablePageIndex = selectablePageIndex; - component.length = length; fixture.detectChanges(); - }; + + component = fixture.componentInstance; + }); afterEach(() => { fixture.destroy(); }); it('should display correct page label', () => { - setup(); const label = fixture.debugElement.query(By.css('.mat-mdc-paginator-page-label')); expect(label.nativeElement.innerText).toEqual(intl.getPageLabel(1, 12)); }); it('should update page label on page change', () => { - setup(); const nextButton = fixture.debugElement.query(By.css('.mat-mdc-paginator-navigation-next')); const label = fixture.debugElement.query(By.css('.mat-mdc-paginator-page-label')); @@ -89,47 +81,6 @@ describe('Component: UiGrid', () => { expect(label.nativeElement.innerText).toEqual(intl.getPageLabel(2, 12)); }); - - it('should be able to change page index if selectablePageIndex is true and length is greater than pageSize', async () => { - setup(true); - const SELECTED_PAGE = 2; - - const pageIndexInputDebugEl = fixture.debugElement.query(By.css('[data-cy="page-index-select"]')); - const pageIndexInput: HTMLInputElement = pageIndexInputDebugEl.nativeElement; - - pageIndexInput.click(); - - fixture.detectChanges(); - await fixture.whenStable(); - fixture.detectChanges(); - - const secondOption: HTMLElement = fixture.debugElement.queryAll(By.css('.mat-mdc-option'))[SELECTED_PAGE].nativeElement; - secondOption.click(); - - fixture.detectChanges(); - await fixture.whenStable(); - fixture.detectChanges(); - - const pageRangeLabel = fixture.debugElement.query(By.css('.mat-mdc-paginator-range-label')); - - expect(pageRangeLabel.nativeElement.innerText).toEqual( - component.paginator._intl.getRangeLabel(SELECTED_PAGE, component.pageSize, component.length), - ); - }); - - it('should not display page index select if selectablePageIndex is true and length is less than pageSize', () => { - setup(true, 9); - const pageIndexInput = fixture.debugElement.query(By.css('[data-cy="page-index-select"]')); - - expect(pageIndexInput).toBeNull(); - }); - - it('should not display page index select if selectablePageIndex is false', () => { - setup(); - const pageIndexInput = fixture.debugElement.query(By.css('[data-cy="page-index-select"]')); - - expect(pageIndexInput).toBeNull(); - }); }); describe('Service: UiMatPaginatorIntl', () => { diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.ts similarity index 63% rename from projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.ts index bc29632e5..5b5ed5da8 100644 --- a/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.ts @@ -19,22 +19,12 @@ import { @Injectable() export class UiMatPaginatorIntl extends MatPaginatorIntl { - pageSelectLabel = 'Select page'; - getPageLabel(currentPage: number, pageCount?: number): string { if (!pageCount) { return `Page ${currentPage}`; } return `Page ${currentPage} / ${pageCount}`; } - - getPageOnlyLabel(): string { - return 'Page'; - } - - getTotalPages(pageCount: number): string { - return `/ ${pageCount}`; - } } @Component({ @@ -56,12 +46,8 @@ export class UiGridCustomPaginatorComponent extends _MatPaginatorBase ({ - label: i + 1, - value: i, - })); - } } diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.module.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.module.ts similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.module.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.module.ts diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-search/_ui-grid-search.theme.scss b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/_ui-grid-search.theme.scss similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-search/_ui-grid-search.theme.scss rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/_ui-grid-search.theme.scss diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.html b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.html similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.html diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.scss similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.scss diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.spec.ts similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.spec.ts diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.ts similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.ts diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.module.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.module.ts similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.module.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.module.ts diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.html b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.html similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.html diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.scss similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.scss diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.ts similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.ts diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.module.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.module.ts similarity index 100% rename from projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.module.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.module.ts diff --git a/projects/angular/components/ui-grid/src/events/page-change-event.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/events/page-change-event.ts similarity index 100% rename from projects/angular/components/ui-grid/src/events/page-change-event.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/events/page-change-event.ts diff --git a/packages/apollo-angular-components/projects/angular/components/ui-grid/src/filters/ui-grid-dropdown-filter.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/filters/ui-grid-dropdown-filter.directive.ts new file mode 100644 index 000000000..d0249f80a --- /dev/null +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/filters/ui-grid-dropdown-filter.directive.ts @@ -0,0 +1,98 @@ +import { BehaviorSubject } from 'rxjs'; + +import { + Directive, + Input, + OnDestroy, +} from '@angular/core'; + +import { UiGridFilterDirective } from './ui-grid-filter'; + +/** + * Dropdown option schema. + * + * @export + */ +export interface IDropdownOption { + /** + * The current dropdown value. + * + */ + value: string | number | boolean; + /** + * The dropdown option label. + * + */ + label: string; + /** + * The dropdown translation key, used by the `intl` service. + * + */ + translationKey?: string; +} + +/** + * The dropdown filter definition directive. + * + * @export + */ +@Directive({ + selector: '[uiGridDropdownFilter], ui-grid-dropdown-filter', +}) +export class UiGridDropdownFilterDirective extends UiGridFilterDirective implements OnDestroy { + /** + * The dropdown items. + * + */ + @Input() + items?: IDropdownOption[]; + + /** + * If it should display the `All` option. + * + */ + @Input() + showAllOption = true; + + /** + * The current dropdown option. + * + */ + @Input() + value?: IDropdownOption; + + /** + * The empty dropdown state. + * + */ + @Input() + emptyStateValue?: IDropdownOption['value']; + /** + * Wether the filter should be rendered in the grid. + * + */ + @Input() + get visible() { return this.visible$.value; } + set visible(visible: boolean) { this.visible$.next(visible); } + + /** + * @ignore + */ + visible$ = new BehaviorSubject(true); + + /** + * Updates the dropdown value. + * + */ + updateValue(value?: IDropdownOption) { + this.value = value; + } + + /** + * @ignore + */ + ngOnDestroy() { + super.ngOnDestroy(); + this.filterChange.complete(); + } +} diff --git a/projects/angular/components/ui-grid/src/filters/ui-grid-filter.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/filters/ui-grid-filter.ts similarity index 100% rename from projects/angular/components/ui-grid/src/filters/ui-grid-filter.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/filters/ui-grid-filter.ts diff --git a/projects/angular/components/ui-grid/src/filters/ui-grid-search-filter.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/filters/ui-grid-search-filter.directive.ts similarity index 92% rename from projects/angular/components/ui-grid/src/filters/ui-grid-search-filter.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/filters/ui-grid-search-filter.directive.ts index 0937709fd..fefbf46ae 100644 --- a/projects/angular/components/ui-grid/src/filters/ui-grid-search-filter.directive.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/filters/ui-grid-search-filter.directive.ts @@ -123,12 +123,6 @@ export class UiGridSearchFilterDirective extends UiGridFilterDirective imp this.filterChange.complete(); } - get hasValue() { - return this.multiple - ? (this.value as ISuggestValue[] ?? []).length > 0 - : this.value != null; - } - private checkAlreadyExisting(value: ISuggestValue, isSelected?: boolean) { if (this.multiple) { return (isSelected && (this.value as ISuggestValue[] ?? []).find(item => item.id === value.id)); @@ -138,12 +132,7 @@ export class UiGridSearchFilterDirective extends UiGridFilterDirective imp } private handleMultiple(value?: ISuggestValue, isSelected?: boolean) { - if (!value) { - this.value = []; - return; - } - - if (this.checkAlreadyExisting(value, isSelected)) { + if (!value || this.checkAlreadyExisting(value, isSelected)) { return; } diff --git a/projects/angular/components/ui-grid/src/footer/ui-grid-footer.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/footer/ui-grid-footer.directive.ts similarity index 100% rename from projects/angular/components/ui-grid/src/footer/ui-grid-footer.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/footer/ui-grid-footer.directive.ts diff --git a/projects/angular/components/ui-grid/src/header/ui-grid-header-button.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/header/ui-grid-header-button.directive.ts similarity index 100% rename from projects/angular/components/ui-grid/src/header/ui-grid-header-button.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/header/ui-grid-header-button.directive.ts diff --git a/projects/angular/components/ui-grid/src/header/ui-grid-header.directive.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/header/ui-grid-header.directive.ts similarity index 100% rename from projects/angular/components/ui-grid/src/header/ui-grid-header.directive.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/header/ui-grid-header.directive.ts diff --git a/projects/angular/components/ui-grid/src/managers/data-manager.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/data-manager.spec.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/data-manager.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/data-manager.spec.ts diff --git a/projects/angular/components/ui-grid/src/managers/data-manager.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/data-manager.ts similarity index 96% rename from projects/angular/components/ui-grid/src/managers/data-manager.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/data-manager.ts index 2498402db..b1cbe86e5 100644 --- a/projects/angular/components/ui-grid/src/managers/data-manager.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/data-manager.ts @@ -5,7 +5,7 @@ import get from 'lodash-es/get'; import isArray from 'lodash-es/isArray'; import isDate from 'lodash-es/isDate'; import isObject from 'lodash-es/isObject'; -import objectHash from 'object-hash'; +import * as hash from 'object-hash'; import { BehaviorSubject } from 'rxjs'; import { isDevMode } from '@angular/core'; @@ -173,10 +173,7 @@ export class DataManager - this._hashMap.set(`${entry[this.idProperty]}`, objectHash(entry, { - algorithm: 'md5', - ignoreUnknown: true, - })); + this._hashMap.set(`${entry[this.idProperty]}`, hash.MD5(entry)); private _emit(data?: T[]) { this.data$.next([...(data ?? this.data$.value)]); diff --git a/projects/angular/components/ui-grid/src/managers/filter-manager.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/filter-manager.spec.ts similarity index 96% rename from projects/angular/components/ui-grid/src/managers/filter-manager.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/filter-manager.spec.ts index 15cee93ac..af1d1b1a4 100644 --- a/projects/angular/components/ui-grid/src/managers/filter-manager.spec.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/filter-manager.spec.ts @@ -10,13 +10,11 @@ import { } from 'rxjs/operators'; import { TestBed } from '@angular/core/testing'; -import { - IDropdownOption, - UiGridFooterDirective, -} from '@uipath/angular/components/ui-grid'; +import { UiGridFooterDirective } from '@uipath/angular/components/ui-grid'; import { ISuggestValue } from '@uipath/angular/components/ui-suggest'; import { UiGridColumnDirective } from '../body/ui-grid-column.directive'; +import { IDropdownOption } from '../filters/ui-grid-dropdown-filter.directive'; import { UiGridHeaderDirective } from '../header/ui-grid-header.directive'; import { FilterManager, @@ -202,7 +200,7 @@ describe('Component: UiGrid', () => { ) .subscribe(filter => { expect(filter).toBeDefined(); - expect(filter!.value as IDropdownOption['value']).toEqual(columnOptionDefinition.option.value); + expect(filter!.value).toEqual(columnOptionDefinition.option.value); expect(filter!.method).toBe(columnOptionDefinition.column.dropdown!.method!); }); @@ -220,7 +218,7 @@ describe('Component: UiGrid', () => { const [filter] = filters; expect(filter).toBeDefined(); - expect(filter.value as IDropdownOption['value']).toEqual(columnOptionDefinition.option.value); + expect(filter.value).toEqual(columnOptionDefinition.option.value); expect(filter.method).toBe(columnOptionDefinition.column.dropdown!.method!); }); @@ -247,7 +245,7 @@ describe('Component: UiGrid', () => { const columnOptionDefinition = columnOptionDefinitionList[idx]; expect(filter).toBeDefined(); - expect(filter.value as IDropdownOption['value']).toEqual(columnOptionDefinition.option.value); + expect(filter.value).toEqual(columnOptionDefinition.option.value); expect(filter.method).toBe(columnOptionDefinition.column.dropdown!.method!); }); }); @@ -401,7 +399,7 @@ describe('Component: UiGrid', () => { manager.searchableDropdownUpdate(columnOptionDefinition.column, columnOptionDefinition.option, true); }); - it('should emit undefined if the value is deselected', (done) => { + it('should emit empty list if the value is deselected', (done) => { const columnOptionDefinition = searchableDropdownToFilterOptionDefinition( faker.helpers.randomize(columnWithSearchableList), searchableDropdownItemList, @@ -414,7 +412,10 @@ describe('Component: UiGrid', () => { ).subscribe(filters => { const [filter] = filters; - expect(filter).toBeUndefined(); + expect(filter).toBeDefined(); + expect(Array.isArray(filter.value)).toEqual(true); + expect(filter.value).toEqual([]); + expect(filter.method).toBe(columnOptionDefinition.column.searchableDropdown!.method!); }); manager.searchableDropdownUpdate(columnOptionDefinition.column, columnOptionDefinition.option, true); diff --git a/projects/angular/components/ui-grid/src/managers/filter-manager.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/filter-manager.ts similarity index 70% rename from projects/angular/components/ui-grid/src/managers/filter-manager.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/filter-manager.ts index 720e14bb7..d7d52e47c 100644 --- a/projects/angular/components/ui-grid/src/managers/filter-manager.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/filter-manager.ts @@ -1,4 +1,3 @@ -import { isArray } from 'lodash-es'; import isEqual from 'lodash-es/isEqual'; import { BehaviorSubject, @@ -13,9 +12,10 @@ import { ISuggestValue } from '@uipath/angular/components/ui-suggest'; import { UiGridColumnDirective } from '../body/ui-grid-column.directive'; import { - FilterDropdownPossibleOption, - ISuggestDropdownValueData, + IDropdownOption, + UiGridDropdownFilterDirective, } from '../filters/ui-grid-dropdown-filter.directive'; +import { UiGridSearchFilterDirective } from '../filters/ui-grid-search-filter.directive'; import { UiGridFooterDirective } from '../footer/ui-grid-footer.directive'; import { UiGridHeaderDirective } from '../header/ui-grid-header.directive'; import { IFilterModel } from '../models'; @@ -61,23 +61,6 @@ export class FilterManager { distinctUntilChanged(), ); - activeFilterValueCount$ = combineLatest([ - this.activeCount$, - this.filter$, - ]).pipe( - map(([activeCount, filters]) => { - const activeFilterValueCount = activeCount + filters.reduce((acc, filterModel) => { - const filterValue = filterModel?.value; - if (isArray(filterValue) && filterValue.length > 1) { - return acc + filterValue.length - 1; - } - return acc; - }, 0); - - return activeFilterValueCount; - }), - ); - private _initialFilters: IFilterModel[] | null = null; constructor( @@ -97,43 +80,11 @@ export class FilterManager { this.filter$.complete(); } - selectFilters(column: UiGridColumnDirective, selection?: ISuggestDropdownValueData) { - if (selection?.data === undefined) { return this.dropdownUpdate(column, undefined); } - - const selectedDropdownOption = column.dropdown!.findDropDownOptionBySuggestValue(selection); - if (!selectedDropdownOption) { return; } - - const currentValue = column.dropdown?.value; - - if (isArray(currentValue)) { - const valueAlreadySelected = currentValue.some(v => v.value === selectedDropdownOption.value); - const filterSelection = (valueAlreadySelected - ? currentValue.filter(v => v.value !== selectedDropdownOption?.value) - : [...currentValue, selectedDropdownOption]); - - this.dropdownUpdate(column, filterSelection); - return; - } - - this.dropdownUpdate(column, selectedDropdownOption); - } - - searchableDropdownUpdate = (column?: UiGridColumnDirective, value?: ISuggestValue | ISuggestValue[], selected?: boolean) => { - if (isArray(value)) { - if (column?.searchableDropdown) { - value.forEach(filterValue => { - column!.searchableDropdown!.updateValue(filterValue, true); - }); - this._emitFilterOptions(); - } - return; - } - + searchableDropdownUpdate = (column?: UiGridColumnDirective, value?: ISuggestValue, selected?: boolean) => this._updateFilterValue(column, value, selected, this._mapSearchableDropdownItem); - }; - dropdownUpdate = (column?: UiGridColumnDirective, dropdownOption?: FilterDropdownPossibleOption) => - this._updateFilterValue(column, dropdownOption, false, this._mapDropdownItem); + dropdownUpdate = (column?: UiGridColumnDirective, value?: IDropdownOption) => + this._updateFilterValue(column, value, false, this._mapDropdownItem); searchChange(term: string | undefined, header: UiGridHeaderDirective, footer?: UiGridFooterDirective) { if (term === header.searchValue) { return; } @@ -181,7 +132,7 @@ export class FilterManager { private _updateFilterValue = ( column: UiGridColumnDirective | undefined, - value: ISuggestValue | FilterDropdownPossibleOption | undefined, + value: ISuggestValue | IDropdownOption | undefined, selected: boolean | undefined, mapper: (column: UiGridColumnDirective) => IFilterModel, ): void => { @@ -192,7 +143,7 @@ export class FilterManager { if (!dropdown) { return; } (dropdown as { - updateValue: (value: ISuggestValue | FilterDropdownPossibleOption | undefined, selected: boolean | undefined) => void; + updateValue: (value: ISuggestValue | IDropdownOption | undefined, selected: boolean | undefined) => void; }).updateValue(value, selected); dropdown.filterChange.emit(value ? mapper(column) : null); @@ -201,14 +152,14 @@ export class FilterManager { private _emitFilterOptions = () => { this.defaultValueDropdownFilters = this._columns - .filter(({ dropdown }) => dropdown?.hasValue) + .filter(({ dropdown }) => this._hasFilterValue(dropdown)) .map(this._mapDropdownItem); const emptyStateDropdownFilters = this._columns .filter(col => col.dropdown?.emptyStateValue) .map(this._mapDropdownEmptyStateItem); const searchableFilters = this._columns - .filter(({ searchableDropdown }) => searchableDropdown?.hasValue) + .filter(({ searchableDropdown }) => this._hasFilterValue(searchableDropdown)) .map(this._mapSearchableDropdownItem); const updatedFilters = [...this.defaultValueDropdownFilters, ...searchableFilters]; @@ -224,12 +175,14 @@ export class FilterManager { ); }; + private _hasFilterValue = (dropdown?: UiGridSearchFilterDirective | UiGridDropdownFilterDirective) => + !!dropdown && + dropdown.value; + private _mapDropdownItem = (column: UiGridColumnDirective) => ({ method: column.dropdown!.method, property: column.property, - value: isArray(column.dropdown!.value) - ? column.dropdown!.value - : column.dropdown!.value!.value, + value: column.dropdown!.value!.value, }) as IFilterModel; private _mapDropdownEmptyStateItem = (column: UiGridColumnDirective) => ({ diff --git a/projects/angular/components/ui-grid/src/managers/index.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/index.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/index.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/index.ts diff --git a/projects/angular/components/ui-grid/src/managers/live-announcer-manager.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/live-announcer-manager.spec.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/live-announcer-manager.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/live-announcer-manager.spec.ts diff --git a/projects/angular/components/ui-grid/src/managers/live-announcer-manager.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/live-announcer-manager.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/live-announcer-manager.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/live-announcer-manager.ts diff --git a/projects/angular/components/ui-grid/src/managers/performance.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/performance.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/performance.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/performance.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize-strategy-token.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize-strategy-token.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize-strategy-token.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize-strategy-token.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/index.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/index.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/index.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/index.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/resize-manager.constants.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/resize-manager.constants.spec.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/resize-manager.constants.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/resize-manager.constants.spec.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/resize-manager.constants.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/resize-manager.constants.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/resize-manager.constants.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/resize-manager.constants.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/resize-manager.factory.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/resize-manager.factory.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/resize-manager.factory.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/resize-manager.factory.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts similarity index 99% rename from projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts index 0eafdcb0c..688482576 100644 --- a/projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/resize-manager.ts @@ -286,7 +286,7 @@ export abstract class ResizeManager { endResize() { const entries = [this.current!, this._previous!.neighbour, this._previous!.oppositeNeighbour]; - this._emitNewColumnPercentages(entries.filter(e => e != null && !!e.column) as IResizeInfo[]); + this._emitNewColumnPercentages(entries.filter(e => e != null) as IResizeInfo[]); this._endResizeCommon(...entries); this.current = undefined; diff --git a/projects/angular/components/ui-grid/src/managers/resize/strategies/aggresive-neighbour-push-resizer.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/strategies/aggresive-neighbour-push-resizer.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/strategies/aggresive-neighbour-push-resizer.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/strategies/aggresive-neighbour-push-resizer.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/strategies/immediate-neighbour-halt-resizer.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/strategies/immediate-neighbour-halt-resizer.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/strategies/immediate-neighbour-halt-resizer.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/strategies/immediate-neighbour-halt-resizer.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/strategies/index.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/strategies/index.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/strategies/index.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/strategies/index.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/strategies/scrollable-grid-resizer.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/strategies/scrollable-grid-resizer.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/strategies/scrollable-grid-resizer.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/strategies/scrollable-grid-resizer.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/types/index.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/index.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/types/index.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/index.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/types/resizableGrid.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizableGrid.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/types/resizableGrid.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizableGrid.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/types/resizeDefinition.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeDefinition.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/types/resizeDefinition.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeDefinition.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/types/resizeDirection.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeDirection.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/types/resizeDirection.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeDirection.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/types/resizeEvent.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeEvent.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/types/resizeEvent.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeEvent.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/types/resizeInfo.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeInfo.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/types/resizeInfo.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeInfo.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/types/resizeState.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeState.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/types/resizeState.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeState.ts diff --git a/projects/angular/components/ui-grid/src/managers/resize/types/resizeStrategy.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeStrategy.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/resize/types/resizeStrategy.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/resize/types/resizeStrategy.ts diff --git a/projects/angular/components/ui-grid/src/managers/selection-manager.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/selection-manager.spec.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/selection-manager.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/selection-manager.spec.ts diff --git a/projects/angular/components/ui-grid/src/managers/selection-manager.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/selection-manager.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/selection-manager.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/selection-manager.ts diff --git a/projects/angular/components/ui-grid/src/managers/sort-manager.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/sort-manager.spec.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/sort-manager.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/sort-manager.spec.ts diff --git a/projects/angular/components/ui-grid/src/managers/sort-manager.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/sort-manager.ts similarity index 100% rename from projects/angular/components/ui-grid/src/managers/sort-manager.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/sort-manager.ts diff --git a/projects/angular/components/ui-grid/src/managers/visibility-manager.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/visibility-manager.ts similarity index 96% rename from projects/angular/components/ui-grid/src/managers/visibility-manager.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/visibility-manager.ts index cc40cb104..12b1670b2 100644 --- a/projects/angular/components/ui-grid/src/managers/visibility-manager.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/managers/visibility-manager.ts @@ -37,7 +37,7 @@ export class VisibilityManger { isDirty$ = this.options$.pipe( filter(() => !!this._initial), map(o => ([o.map(this._mapToVisibleDiff), this._initial])), - map(([current, initial]) => !isEqual(current?.filter(v => v.checked), initial?.filter(v => v.checked))), + map(([current, initial]) => !isEqual(current, initial)), ); set columns(columns: UiGridColumnDirective[]) { diff --git a/projects/angular/components/ui-grid/src/models/dataModel.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/dataModel.ts similarity index 92% rename from projects/angular/components/ui-grid/src/models/dataModel.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/dataModel.ts index 53bb6eceb..4057c2823 100644 --- a/projects/angular/components/ui-grid/src/models/dataModel.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/dataModel.ts @@ -29,6 +29,4 @@ export interface GridOptions { idProperty?: keyof T; rowSize?: number; resizeStrategy?: ResizeStrategy; - selectablePageIndex?: boolean; - hasHighDensity?: boolean; } diff --git a/projects/angular/components/ui-grid/src/models/filterModel.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/filterModel.ts similarity index 100% rename from projects/angular/components/ui-grid/src/models/filterModel.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/filterModel.ts diff --git a/projects/angular/components/ui-grid/src/models/index.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/index.ts similarity index 100% rename from projects/angular/components/ui-grid/src/models/index.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/index.ts diff --git a/projects/angular/components/ui-grid/src/models/selectionDiff.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/selectionDiff.ts similarity index 100% rename from projects/angular/components/ui-grid/src/models/selectionDiff.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/selectionDiff.ts diff --git a/projects/angular/components/ui-grid/src/models/sortModel.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/sortModel.ts similarity index 100% rename from projects/angular/components/ui-grid/src/models/sortModel.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/sortModel.ts diff --git a/projects/angular/components/ui-grid/src/models/visibleModel.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/visibleModel.ts similarity index 100% rename from projects/angular/components/ui-grid/src/models/visibleModel.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/models/visibleModel.ts diff --git a/projects/angular/components/ui-grid/src/public_api.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/public_api.ts similarity index 95% rename from projects/angular/components/ui-grid/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/public_api.ts index 59a0c82b4..1ff26f8b4 100644 --- a/projects/angular/components/ui-grid/src/public_api.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/public_api.ts @@ -19,7 +19,6 @@ export { UiGridRowCardViewDirective } from './body/ui-grid-row-card-view.directi export { UiGridLoadingDirective } from './body/ui-grid-loading.directive'; export { UiGridNoContentDirective } from './body/ui-grid-no-content.directive'; export { UiGridSearchComponent } from './components/ui-grid-search/ui-grid-search.component'; -export { UiGridCustomSearchDirective } from './components/ui-grid-search/ui-grid-custom-search.directive'; export { UiGridSearchModule } from './components/ui-grid-search/ui-grid-search.module'; export { UiGridToggleColumnsModule } from './components/ui-grid-toggle-columns/ui-grid-toggle-columns.module'; export { UiGridToggleColumnsComponent } from './components/ui-grid-toggle-columns/ui-grid-toggle-columns.component'; diff --git a/projects/angular/components/ui-grid/src/test/column.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/column.ts similarity index 89% rename from projects/angular/components/ui-grid/src/test/column.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/column.ts index 30c03d788..388371352 100644 --- a/projects/angular/components/ui-grid/src/test/column.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/column.ts @@ -1,4 +1,3 @@ -import { TestBed } from '@angular/core/testing'; import * as faker from 'faker'; import { of } from 'rxjs'; @@ -21,10 +20,7 @@ export const generateColumn = () => { }; export const generateDropdownFilter = () => { - let dropdown!: UiGridDropdownFilterDirective; - TestBed.runInInjectionContext(() => { - dropdown = new UiGridDropdownFilterDirective(); - }); + const dropdown = new UiGridDropdownFilterDirective(); const items = faker.random.words(15) .split(' ') diff --git a/projects/angular/components/ui-grid/src/test/data.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/data.ts similarity index 100% rename from projects/angular/components/ui-grid/src/test/data.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/data.ts diff --git a/projects/angular/components/ui-grid/src/test/generics.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/generics.ts similarity index 100% rename from projects/angular/components/ui-grid/src/test/generics.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/generics.ts diff --git a/projects/angular/components/ui-grid/src/test/index.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/index.ts similarity index 100% rename from projects/angular/components/ui-grid/src/test/index.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/index.ts diff --git a/projects/angular/components/ui-grid/src/test/testEntity.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/testEntity.ts similarity index 100% rename from projects/angular/components/ui-grid/src/test/testEntity.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/test/testEntity.ts diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.html b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.html similarity index 81% rename from projects/angular/components/ui-grid/src/ui-grid.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.html index b3182f9e7..c0271fa7d 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.component.html +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.html @@ -11,16 +11,82 @@ (isAnyFilterDefined$ | async)" class="ui-grid-filter-container">
- - - +
+ + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ + + + + + +
+
+
+ +
- - - +
+ + + + + + +
@@ -137,12 +203,11 @@ class="ui-grid-resize-handle">
- - - + + + - +
- - -
-
-
- -
-
-
- - + + +
+
+
+ +
+
+
+ + @@ -250,9 +314,9 @@ }"> - - - + @@ -265,9 +329,9 @@ }"> - - - + + + @@ -284,10 +348,10 @@ }"> - - - - + @@ -300,30 +364,29 @@ }"> - - - + + + - -
- - -
- + +
+ + +
+ -
-
-
visibility_off

{{ noDataMessage || intl.noDataMessageAlternative(header?.searchValue, activeFilterCount) }}

@@ -672,50 +729,49 @@
- - - - - -
- - {{ (column.dropdown!.multi && selectedFilters?.length > 1) - ? intl.translateMultiDropdownOptions(value[0].text!, selectedFilters.length) - : value?.[0]?.text ?? intl.noFilterPlaceholder - }} -
- - + + + + +
- - - -
- - - - - - - - - - - - - - - - - - - - - - -
- - - - - - -
- - - -
- - - - - - -
-
-
- -
- - - -
- - - - - - -
- diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.scss similarity index 70% rename from projects/angular/components/ui-grid/src/ui-grid.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.scss index ad7d23849..7a6823cde 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.component.scss +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @import "../../styles/ellipse"; @import "./ui-grid-variables"; @@ -10,78 +8,29 @@ } ui-grid { - --ui-grid-header-row-height: 56px; - --ui-grid-row-height: 48px; - --ui-grid-filter-container-min-height: var(--ui-grid-header-row-height); - --ui-grid-row-horizontal-padding: 24px; - --ui-feature-cell-width: 50px; - --ui-row-border-width: 1px; - --ui-header-resize-handle-width: 18px; - --ui-handle-size-width: 6px; - --ui-grid-default-spacing: 5px; - --ui-border-radius: 4px; - --ui-grid-button-size: 40px; - --ui-grid-main-font-size: 13.5px; - --ui-grid-secondary-font-size: 12px; - --ui-grid-action-buttons-spacing: 16px; - - &.ui-grid-state-high-density { - --ui-grid-header-row-height: 40px; - --ui-grid-row-height: 32px; - --ui-grid-filter-container-min-height: 48px; - --ui-grid-foother-height: 32px; - --ui-grid-button-size: 32px; - - @include mat.checkbox-density(-3); - @include mat.radio-density(-3); - @include mat.button-density(-1); - @include mat.icon-button-density(-5); - - .ui-grid-footer-container .mat-mdc-paginator .mat-mdc-paginator-container { - min-height: var(--ui-grid-foother-height); - } - - .ui-grid-filter-container { - padding: 0; - } - - .ui-grid-refresh-cell, - .ui-grid-action-cell { - mat-icon { - scale: calc(18 / 24); - } - } - - mat-checkbox .mdc-checkbox__background { - scale: calc(16 / 18); - } - - mat-radio-button .mdc-radio__background { - scale: calc(16 / 20); - } - - [mat-icon-button] .mat-mdc-button-touch-target, - mat-checkbox .mat-mdc-checkbox-touch-target, - mat-radio-button .mat-mdc-radio-touch-target { - display: initial !important; - width: var(--ui-grid-row-height); - height: var(--ui-grid-row-height); - } - } + $ui-grid-header-row-height: 56px; + $ui-grid-header-alternate-row-height: 52px; + $ui-grid-row-height: 48px; + $ui-grid-row-horizontal-padding: 24px; + $ui-feature-cell-width: 50px; + $ui-row-border-width: 1px; + $ui-header-resize-handle-width: 18px; + $ui-handle-size-width: 6px; + $ui-grid-default-spacing: 5px; + $ui-border-radius: 4px; + $ui-grid-button-size: 40px; + $ui-grid-main-font-size: 13.5px; + $ui-grid-secondary-font-size: 12px; + $ui-grid-action-buttons-spacing: 16px; position: relative; display: block; - p { - margin-block-start: 0; - margin-block-end: 0; - } - &.ui-grid-mode-multi-select { .ui-grid-table { cdk-virtual-scroll-viewport.ui-grid-viewport { - min-height: calc(var(--ui-grid-row-height) * 3); - height: calc(100vh - 300px - #{var(--ui-grid-row-height)}); + min-height: $ui-grid-row-height * 3; + height: calc(100vh - 300px - #{$ui-grid-row-height}); .cdk-virtual-scroll-content-wrapper { width: 100%; @@ -92,7 +41,7 @@ ui-grid { .ui-grid-table { cdk-virtual-scroll-viewport.ui-grid-viewport { - min-height: calc(var(--ui-grid-row-height) * 3); + min-height: $ui-grid-row-height * 3; height: calc(100vh - 300px); .cdk-virtual-scroll-content-wrapper { @@ -139,7 +88,7 @@ ui-grid { &.ui-grid-checkbox-cell { overflow: visible; justify-content: flex-start; - margin-left: calc($ui-grid-projected-spacing-lr + var(--ui-grid-default-spacing)); + margin-left: $ui-grid-projected-spacing-lr + $ui-grid-default-spacing; } } @@ -151,12 +100,12 @@ ui-grid { } .ui-grid-cell.ui-grid-mobile-feature-cell { - margin-left: var(--ui-grid-default-spacing); + margin-left: $ui-grid-default-spacing; overflow: visible; justify-content: flex-start; .ui-grid-mobile-feature-container { - margin: 0 var(--ui-grid-default-spacing); + margin: 0 $ui-grid-default-spacing; &:first-of-type { margin-left: 0; @@ -178,7 +127,7 @@ ui-grid { } .mat-mdc-paginator-container { - padding: 0 var(--ui-grid-default-spacing); + padding: 0 $ui-grid-default-spacing; } &.ui-grid-state-resizing { @@ -194,32 +143,23 @@ ui-grid { } &-filter-container { - padding: 0 0 var(--ui-grid-default-spacing) var(--ui-grid-default-spacing); - min-height: var(--ui-grid-header-row-height); + padding: 0 0 $ui-grid-default-spacing $ui-grid-default-spacing; + min-height: $ui-grid-header-row-height; display: flex; flex-wrap: wrap; align-items: flex-start; + container: filterContainer / inline-size; width: 100%; - .ui-grid-filter-suggest { - .display-title { - white-space: pre; - } - - .display-container { - display: flex; - } - } - &-lhs-group { display: flex; flex-direction: column; &-actions { - min-height: var(--ui-grid-filter-container-min-height); + min-height: $ui-grid-header-row-height; display: flex; flex-wrap: wrap; align-items: center; @@ -230,7 +170,7 @@ ui-grid { } &-filters { - min-height: var(--ui-grid-filter-container-min-height); + min-height: $ui-grid-header-row-height; flex-wrap: wrap; align-items: center; display: flex; @@ -238,14 +178,14 @@ ui-grid { } &-rhs-group { - min-height: var(--ui-grid-filter-container-min-height); + min-height: $ui-grid-header-row-height; display: flex; margin-left: auto; align-items: center; .ui-grid-action-buttons-main { display: flex; - gap: var(--ui-grid-action-buttons-spacing); + gap: $ui-grid-action-buttons-spacing; } } @@ -261,7 +201,7 @@ ui-grid { // single main button on default design &-action-button { position: absolute; - right: var(--ui-grid-button-size); + right: $ui-grid-button-size; top: -21px; z-index: 2; } @@ -273,18 +213,18 @@ ui-grid { } &-container { - border-radius: var(--ui-border-radius); + border-radius: $ui-border-radius; .mat-mdc-paginator { &-container { - min-height: calc(var(--ui-grid-header-row-height) - 1px); + min-height: $ui-grid-header-row-height - 1; } .mat-mdc-paginator-page-size-label, .mat-mdc-paginator-range-label, .mat-mdc-select-value { - font-size: var(--ui-grid-secondary-font-size); - line-height: var(--ui-grid-secondary-font-size); + font-size: $ui-grid-secondary-font-size; + line-height: $ui-grid-secondary-font-size; } .mat-mdc-form-field-infix { @@ -296,6 +236,13 @@ ui-grid { } } + .ui-grid-header { + &-row, + &-cell { + height: $ui-grid-header-alternate-row-height; + } + } + .ui-grid-selection-info { &-clear-button { order: 1; @@ -303,7 +250,7 @@ ui-grid { } .ui-grid-row.ui-grid-no-data-container { - height: calc(4 * var(--ui-grid-row-height)); + height: 4 * $ui-grid-row-height; align-items: flex-start; &.ui-grid-no-content-available { @@ -313,15 +260,9 @@ ui-grid { } } - .sticky-no-data { - position: sticky; - left: 0; - top: 0; - } - ui-grid-custom-paginator { .mat-mdc-paginator-page-label { - font-size: var(--ui-grid-secondary-font-size); + font-size: $ui-grid-secondary-font-size; } .mat-mdc-paginator-page-size .mat-mdc-form-field { @@ -332,21 +273,29 @@ ui-grid { padding: 0.4375em 0; } } + + .ui-grid-resize-handle-container { + height: $ui-grid-header-alternate-row-height; + + .ui-grid-resize-handle { + height: $ui-grid-header-alternate-row-height; + } + } } } &-no-data-container { - padding: var(--ui-grid-default-spacing); + padding: $ui-grid-default-spacing; mat-icon { font-size: 32px; width: 32px; height: 32px; - margin-left: var(--ui-grid-default-spacing); + margin-left: $ui-grid-default-spacing; } p { - margin-left: var(--ui-grid-default-spacing); + margin-left: $ui-grid-default-spacing; } } @@ -360,15 +309,15 @@ ui-grid { .ui-grid-no-data-container p { position: sticky; - left: calc(2 * var(--ui-grid-default-spacing)); + left: 2 * $ui-grid-default-spacing; } } } &-selection-info-container { &-alternate { - min-height: var(--ui-grid-button-size); - padding: var(--ui-grid-default-spacing) 0; + min-height: $ui-grid-button-size; + padding: $ui-grid-default-spacing 0; display: flex; align-items: center; @@ -385,7 +334,7 @@ ui-grid { } .ui-grid-selection-info-message { - margin-left: calc(var(--ui-grid-default-spacing) * 2); + margin-left: $ui-grid-default-spacing * 2; } .ui-grid-selection-info-icon { @@ -399,7 +348,7 @@ ui-grid { display: flex; justify-content: flex-start; flex-direction: row-reverse; - margin-right: calc(var(--ui-grid-button-size) + var(--ui-grid-row-horizontal-padding)); + margin-right: $ui-grid-button-size + $ui-grid-row-horizontal-padding; } } @@ -407,14 +356,28 @@ ui-grid { cursor: col-resize; } + &-dropdown-filter { + &-button { + text-transform: none !important; + font-size: 0.8rem; + height: $ui-grid-button-size; + line-height: normal; + padding-right: 6px; + + .ui-grid-dropdown-filter-title { + font-weight: 700; + } + } + } + &-filter-option { - margin-right: calc(var(--ui-grid-default-spacing) * 2); + margin-right: $ui-grid-default-spacing * 2; &.ui-grid-search { - $search-padding: var(--ui-grid-default-spacing); + $search-padding: $ui-grid-default-spacing; bottom: $search-padding; position: relative; - height: calc(var(--ui-grid-header-row-height) - $search-padding - 1px); + height: $ui-grid-header-row-height - $search-padding - 1px; } &:last-child { @@ -452,10 +415,10 @@ ui-grid { } .ui-grid-header-row { - font-size: var(--ui-grid-secondary-font-size); - line-height: var(--ui-grid-secondary-font-size); + font-size: $ui-grid-secondary-font-size; + line-height: $ui-grid-secondary-font-size; text-transform: uppercase; - height: var(--ui-grid-header-row-height); + height: $ui-grid-header-row-height; position: relative; overflow: clip; @@ -463,7 +426,7 @@ ui-grid { padding-left: 0; .ui-grid-header-cell[role="columnheader"] { - padding-left: var(--ui-grid-row-horizontal-padding); + padding-left: $ui-grid-row-horizontal-padding; } } @@ -475,7 +438,7 @@ ui-grid { overflow: hidden; .ui-grid-header-cell[role="columnheader"] { - padding: 0 0 0 var(--ui-grid-default-spacing); + padding: 0 0 0 $ui-grid-default-spacing; } } } @@ -483,7 +446,6 @@ ui-grid { mat-progress-bar.ui-grid-loader { z-index: 2; position: relative; - margin-bottom: -4px !important; } .ui-grid-header { @@ -499,7 +461,7 @@ ui-grid { &.ui-grid-state-resizing, &:focus, &.cdk-focused { - background-color: $ui-grid-header-pressed-color; + background-color: $ui-grid-row-hover-color; } } } @@ -507,13 +469,13 @@ ui-grid { .ui-grid-expanded-row-container { width: 100%; height: 100%; - padding: var(--ui-grid-default-spacing); + padding: $ui-grid-default-spacing; box-sizing: border-box; } .ui-grid-row { - height: var(--ui-grid-row-height); - font-size: var(--ui-grid-main-font-size); + height: $ui-grid-row-height; + font-size: $ui-grid-main-font-size; &.ui-grid-row-state-expanded { height: auto; @@ -533,7 +495,7 @@ ui-grid { padding-left: 0; .ui-grid-cell { - padding-left: var(--ui-grid-row-horizontal-padding); + padding-left: $ui-grid-row-horizontal-padding; } } @@ -554,7 +516,7 @@ ui-grid { } .invisible-refresh { - display: none; + opacity: 0; } } @@ -578,40 +540,40 @@ ui-grid { &:not(.ui-grid-table-refreshable) { .ui-grid-action-cell { - min-width: var(--ui-feature-cell-width); + min-width: $ui-feature-cell-width; } } .ui-grid-resize-handle-container { position: relative; - flex: 0 0 var(--ui-header-resize-handle-width); - height: calc(var(--ui-grid-header-row-height) + 1px); + flex: 0 0 $ui-header-resize-handle-width; + height: $ui-grid-header-row-height + 1; &.last-sticky-handle-container { - flex: 0 0 var(--ui-header-resize-handle-width); + flex: 0 0 $ui-header-resize-handle-width; } .ui-grid-resize-handle { position: absolute; top: 0; - width: var(--ui-header-resize-handle-width); - height: calc(var(--ui-grid-header-row-height) + 1px); + width: $ui-header-resize-handle-width; + height: $ui-grid-header-row-height + 1; } } .ui-grid-cell-resizing-border-container { position: relative; - height: calc(var(--ui-grid-row-height) + var(--ui-row-border-width)); + height: $ui-grid-row-height + $ui-row-border-width; .ui-grid-cell-resizing-border { - width: var(--ui-header-resize-handle-width); - height: var(--ui-grid-row-height); + width: $ui-header-resize-handle-width; + height: $ui-grid-row-height; } } .ui-grid-header-cell { &.ui-grid-spacer-cell { - min-width: var(--ui-feature-cell-width); + min-width: $ui-feature-cell-width; } } @@ -627,8 +589,8 @@ ui-grid { position: absolute; right: 0; top: 0; - width: var(--ui-header-resize-handle-width); - padding-left: calc(var(--ui-header-resize-handle-width) - var(--ui-handle-size-width)); + width: $ui-header-resize-handle-width; + padding-left: $ui-header-resize-handle-width - $ui-handle-size-width; box-sizing: border-box; left: unset !important; background-color: transparent; @@ -636,20 +598,20 @@ ui-grid { cursor: col-resize; .ui-grid-resize-handle { - width: var(--ui-handle-size-width); + width: $ui-handle-size-width; } } .ui-grid-cell-resizing-border-container { position: relative; - width: var(--ui-header-resize-handle-width); - padding-left: calc(var(--ui-header-resize-handle-width) - (var(--ui-handle-size-width) / 2)); + width: $ui-header-resize-handle-width; + padding-left: $ui-header-resize-handle-width - ($ui-handle-size-width / 2); box-sizing: border-box; background-color: transparent; .ui-grid-cell-resizing-border { - width: calc(var(--ui-handle-size-width) / 2); - min-width: calc(var(--ui-handle-size-width) / 2); + width: $ui-handle-size-width / 2; + min-width: $ui-handle-size-width / 2; } } @@ -664,30 +626,30 @@ ui-grid { &:not(.ui-grid-feature-cell):not(:first-child, .sticky-columns-cell-container) { box-sizing: border-box; - padding: 0 0 0 var(--ui-grid-default-spacing); + padding: 0 0 0 $ui-grid-default-spacing; } &:not(.ui-grid-feature-cell, .sticky-columns-cell-container):first-of-type { - padding-left: var(--ui-grid-row-horizontal-padding); + padding-left: $ui-grid-row-horizontal-padding; [dir="rtl"] & { padding-left: 0; - padding-right: var(--ui-grid-row-horizontal-padding); + padding-right: $ui-grid-row-horizontal-padding; } } &:not(.ui-grid-feature-cell):last-of-type { - padding-right: var(--ui-grid-row-horizontal-padding); + padding-right: $ui-grid-row-horizontal-padding; [dir="rtl"] & { padding-right: 0; - padding-left: var(--ui-grid-row-horizontal-padding); + padding-left: $ui-grid-row-horizontal-padding; } } &.ui-grid-refresh-cell, &.ui-grid-checkbox-cell { - min-width: var(--ui-feature-cell-width); + min-width: $ui-feature-cell-width; justify-content: center; box-sizing: border-box; } @@ -695,10 +657,6 @@ ui-grid { &.ui-grid-refresh-cell { position: sticky; right: 0; - - &.refresh-shadow { - box-shadow: -16px 0px 16px -4px $ui-grid-row-hover-color; - } } &.ui-grid-action-cell { @@ -717,9 +675,9 @@ ui-grid { justify-content: flex-end; align-items: center; position: absolute; - height: calc(var(--ui-grid-row-height) - var(--ui-row-border-width)); - min-width: var(--ui-feature-cell-width); - padding-right: var(--ui-grid-default-spacing); + height: $ui-grid-row-height - $ui-row-border-width; + min-width: $ui-feature-cell-width; + padding-right: $ui-grid-default-spacing; right: 0; bottom: 0; } @@ -740,7 +698,7 @@ ui-grid { .ui-grid-sort { &-indicator { - height: calc(var(--ui-grid-header-row-height) - var(--ui-row-border-width)); + height: $ui-grid-header-row-height - $ui-row-border-width; align-items: center; display: flex; @@ -770,12 +728,16 @@ ui-grid { } .ui-grid-header-cell { - height: calc(var(--ui-grid-header-row-height) - var(--ui-row-border-width)); + height: $ui-grid-header-row-height - $ui-row-border-width; } .ui-grid-cell { - height: calc(var(--ui-grid-row-height) - var(--ui-row-border-width)); + height: $ui-grid-row-height - $ui-row-border-width; background: $ui-grid-cell-background-color; + + &.ui-grid-state-resizing { + background: $ui-grid-row-hover-color; + } } .sticky-columns-cell-container.ui-grid-cell { @@ -783,10 +745,10 @@ ui-grid { z-index: 10; padding-left: 0px; display: flex; - height: calc(var(--ui-grid-row-height) - 1px); + height: $ui-grid-row-height - 1; .ui-grid-cell { - padding: 0 0 0 var(--ui-grid-default-spacing); + padding: 0 0 0 $ui-grid-default-spacing; } } diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts similarity index 92% rename from projects/angular/components/ui-grid/src/ui-grid.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts index 0d029185c..748c61d46 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts @@ -19,7 +19,6 @@ import { import { Component, - Input, ViewChild, } from '@angular/core'; import { @@ -66,12 +65,6 @@ import { import { UiGridIntl } from './ui-grid.intl'; import { UiGridModule } from './ui-grid.module'; -const selectors = { - filterDropdown: '.ui-grid-filter-suggest span', - filterOption: 'mat-list .text-label-rendered', - notSelectedFilterOption: 'mat-list [aria-selected="false"] .text-label-rendered', -}; - describe('Component: UiGrid', () => { const GRID_COLUMN_CHANGE_DELAY = 10; @@ -1060,118 +1053,6 @@ describe('Component: UiGrid', () => { }); }); - @Component({ - template: ` - - - - - - - - - - - `, - }) - class TestFixtureGridWithHighDensityModeComponent { - @Input() - hasHighDensity: boolean | null = null; - - data: ITestEntity[] = []; - - @ViewChild(UiGridComponent, { - static: false, - }) - grid!: UiGridComponent; - } - - describe('Scenario: simple grid with high density mode', () => { - let fixture: ComponentFixture; - - afterEach(() => { - fixture.destroy(); - }); - - it('should have the default structure when the high density mode is OFF', () => { - TestBed.configureTestingModule({ - imports: [UiGridModule], - declarations: [TestFixtureGridWithHighDensityModeComponent], - }); - - const data = generateListFactory(generateEntity, TestBed.runInInjectionContext)(1); - fixture = TestBed.createComponent(TestFixtureGridWithHighDensityModeComponent); - fixture.componentInstance.data = data; - fixture.detectChanges(); - - const grid = fixture.componentInstance.grid; - - expect(Object.keys(fixture.debugElement.classes).includes('ui-grid-state-high-density')).toBeFalsy(); - expect(grid.rowSize).toBe(48); - - const contentRow = fixture.debugElement.query(By.css('.ui-grid-row')).nativeElement; - expect(getComputedStyle(contentRow).height).toBe('48px'); - }); - - it('should have the correct structure when the high density mode is set by the provider', () => { - TestBed.configureTestingModule({ - imports: [UiGridModule], - providers: [ - { - provide: UI_GRID_OPTIONS, - useValue: { hasHighDensity: true }, - }, - ], - declarations: [TestFixtureGridWithHighDensityModeComponent], - }); - - const data = generateListFactory(generateEntity, TestBed.runInInjectionContext)(1); - fixture = TestBed.createComponent(TestFixtureGridWithHighDensityModeComponent); - fixture.componentInstance.data = data; - fixture.detectChanges(); - - const grid = fixture.componentInstance.grid; - const gridElement = fixture.debugElement.queryAll(By.css('ui-grid'))[0]; - - expect(Object.keys(gridElement.classes).includes('ui-grid-state-high-density')).toBeTruthy(); - expect(grid.rowSize).toBe(32); - - const headerRow = fixture.debugElement.query(By.css('.ui-grid-header-row')).nativeElement; - expect(getComputedStyle(headerRow).height).toBe('40px'); - const contentRow = fixture.debugElement.query(By.css('.ui-grid-row')).nativeElement; - expect(getComputedStyle(contentRow).height).toBe('32px'); - }); - - it('should have the correct structure when the high density mode is set by input', () => { - TestBed.configureTestingModule({ - imports: [UiGridModule], - providers: [ - { - provide: UI_GRID_OPTIONS, - useValue: { hasHighDensity: true }, - }, - ], - declarations: [TestFixtureGridWithHighDensityModeComponent], - }); - - fixture = TestBed.createComponent(TestFixtureGridWithHighDensityModeComponent); - fixture.componentInstance.hasHighDensity = false; - fixture.detectChanges(); - - const grid = fixture.componentInstance.grid; - const gridElement = fixture.debugElement.queryAll(By.css('ui-grid'))[0]; - - expect(Object.keys(gridElement.classes).includes('ui-grid-state-high-density')).toBeFalsy(); - expect(grid.rowSize).toBe(48); - }); - }); - @Component({ template: ` @@ -1433,8 +1314,7 @@ describe('Component: UiGrid', () => { @Component({ template: ` - + { title="Number Header" width="50%"> - + [showAllOption]="showAllOption"> { value?: ISuggestValueData[]; multiple = false; - multiDropdown = false; - maxSelectedFilterValues$ = new BehaviorSubject(Infinity); searchFactory = (): Observable> => of({ data: this.dropdownItemList @@ -1488,21 +1364,14 @@ describe('Component: UiGrid', () => { let fixture: ComponentFixture; let component: TestFixtureGridHeaderWithFilterComponent; let grid: UiGridComponent; - let intl: UiGridIntl; + beforeEach(() => { - intl = new UiGridIntl(); TestBed.configureTestingModule({ imports: [ UiGridModule, NoopAnimationsModule, ], declarations: [TestFixtureGridHeaderWithFilterComponent], - providers: [ - { - provide: UiGridIntl, - useValue: intl, - }, - ], }); fixture = TestBed.createComponent(TestFixtureGridHeaderWithFilterComponent); @@ -1515,114 +1384,6 @@ describe('Component: UiGrid', () => { fixture.destroy(); }); - describe('Configuration: with multi dropdown', () => { - let dropdownItemList: {label: string; value: number}[]; - beforeEach(() => { - component.search = false; - component.multiDropdown = true; - dropdownItemList = generateListFactory(() => ({ - label: faker.random.word(), - value: faker.random.number(), - }))(); - component.dropdownItemList = dropdownItemList; - fixture.detectChanges(); - }); - - it('should update translation for filter options when language changes', fakeAsync(() => { - intl.translateDropdownOption = () => 'voila la traduction'; - intl.changes.next(); - fixture.detectChanges(); - - const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); - filterButton.nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - - const filterCheckboxes = fixture.debugElement.queryAll(By.css('mat-list-item mat-checkbox')); - filterCheckboxes[0].nativeElement.dispatchEvent(EventGenerator.click); - filterCheckboxes[1].nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - - const filterSpan = fixture.debugElement.query(By.css('.ui-grid-filter-suggest span.text-ellipsis')); - expect(filterSpan.nativeElement.innerText).toEqual('voila la traduction (+1 other)'); - flush(); - })); - - it('should emit all selected filter options', fakeAsync(() => { - const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); - filterButton.nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - - const filterCheckboxes = fixture.debugElement.queryAll(By.css('mat-list-item mat-checkbox')); - - grid.filterManager.filter$ - .pipe( - skip(2), - take(1), - ).subscribe(([filter]) => { - expect(filter.value as any).toEqual([dropdownItemList[0], dropdownItemList[1]]); - }); - - filterCheckboxes[0].nativeElement.dispatchEvent(EventGenerator.click); - filterCheckboxes[1].nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - - flush(); - })); - - it('should have options checked if dropdown was updated', fakeAsync(() => { - const [column] = grid.columns.toArray(); - grid.filterManager.dropdownUpdate(column, [dropdownItemList[0], dropdownItemList[1]] as any); - fixture.detectChanges(); - - const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); - filterButton.nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const filterCheckboxes = fixture.debugElement.queryAll(By.css('mat-list-item mat-checkbox')); - expect(filterCheckboxes[0].componentInstance.checked).toBe(true); - expect(filterCheckboxes[1].componentInstance.checked).toBe(true); - - flush(); - })); - - it('should display suggest warning when maximum number of options was reached', fakeAsync(() => { - component.maxSelectedFilterValues$.next(2); - fixture.detectChanges(); - - const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); - filterButton.nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const filterCheckboxes = fixture.debugElement.queryAll(By.css('mat-list-item mat-checkbox')); - - filterCheckboxes[0].nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - - filterCheckboxes[1].nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - - tick(1000); - - expect(filterCheckboxes[0].componentInstance.checked).toBe(true); - expect(filterCheckboxes[1].componentInstance.checked).toBe(true); - - const suggestFooterMsg = (document.querySelector('.no-more-options-footer span')! as HTMLSpanElement).innerText; - expect(suggestFooterMsg).toEqual('The maximum number of selected filters has been reached.'); - flush(); - })); - - }); - describe('Configuration: without search', () => { beforeEach(() => { component.search = false; @@ -1641,7 +1402,7 @@ describe('Component: UiGrid', () => { it('should render the filter button', () => { const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); + const filterButton = filterContainer.query(By.css('.ui-grid-dropdown-filter-button')); expect(filterButton).toBeDefined(); expect(filterButton.nativeElement).toBeDefined(); @@ -1730,7 +1491,7 @@ describe('Component: UiGrid', () => { it('should render the filter button', () => { const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); + const filterButton = filterContainer.query(By.css('.ui-grid-dropdown-filter-button')); expect(filterButton).toBeDefined(); expect(filterButton.nativeElement).toBeDefined(); @@ -1738,24 +1499,26 @@ describe('Component: UiGrid', () => { }); describe('Filter: dropdown', () => { - it(`should have only the 'All' option available`, fakeAsync(() => { + it(`should have only the 'All' option available`, () => { component.showAllOption = true; fixture.detectChanges(); - const filterSuggest = fixture.debugElement.query(By.css(selectors.filterDropdown)); + const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); + const filterButton = filterContainer.query(By.css('.ui-grid-dropdown-filter-button')); - filterSuggest.nativeElement.dispatchEvent(EventGenerator.click); + filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - const suggestItems = fixture.debugElement.queryAll(By.css(selectors.filterOption)) - .map(item => item.nativeElement.innerText); + const matMenuItems = filterContainer.queryAll(By.directive(MatMenuItem)) + .map(item => item.componentInstance as MatMenuItem); - expect(suggestItems.length).toEqual(1); - expect(suggestItems[0]).toEqual('All'); - })); + expect(matMenuItems.length).toEqual(1); + const [firstMenutItem] = matMenuItems; + + expect(firstMenutItem.getLabel()).toEqual('All'); + }); - it(`should display the 'All' option and the custom value list`, fakeAsync(() => { + it(`should display the 'All' option and the custom value list`, () => { component.showAllOption = true; fixture.detectChanges(); @@ -1768,26 +1531,26 @@ describe('Component: UiGrid', () => { fixture.detectChanges(); const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); + const filterButton = filterContainer.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const suggestItems = fixture.debugElement.queryAll(By.css(selectors.filterOption)) - .map(item => item.nativeElement.innerText); - expect(suggestItems.length).toEqual(items.length + 1); - expect(suggestItems[0]).toEqual('All'); - expect(suggestItems.slice(1)).toEqual(items.map(item => item.label)); - })); + const matMenuItems = filterContainer.queryAll(By.directive(MatMenuItem)).map(item => item.componentInstance as MatMenuItem); + + expect(matMenuItems.length).toEqual(items.length + 1); + const [firstMenutItem, ...rest] = matMenuItems; + + expect(firstMenutItem.getLabel()).toEqual('All'); + rest.forEach((menuItem, idx) => expect(menuItem.getLabel()).toEqual(items[idx].label)); + }); it(`should NOT have any filter options`, () => { component.showAllOption = false; fixture.detectChanges(); const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); + const filterButton = filterContainer.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); @@ -1797,7 +1560,7 @@ describe('Component: UiGrid', () => { expect(matMenuItems.length).toEqual(0); }); - it(`should display the custom value list`, fakeAsync(() => { + it(`should display the custom value list`, () => { component.showAllOption = false; fixture.detectChanges(); @@ -1810,18 +1573,17 @@ describe('Component: UiGrid', () => { fixture.detectChanges(); const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); + const filterButton = filterContainer.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const suggestItems = fixture.debugElement.queryAll(By.css(selectors.filterOption)) - .map(item => item.nativeElement.innerText); - expect(suggestItems.length).toEqual(items.length); - expect(suggestItems).toEqual(items.map(item => item.label)); - })); + const matMenuItems = filterContainer.queryAll(By.directive(MatMenuItem)).map(item => item.componentInstance as MatMenuItem); + + expect(matMenuItems.length).toEqual(items.length); + + matMenuItems.forEach((menuItem, idx) => expect(menuItem.getLabel()).toEqual(items[idx].label)); + }); }); describe('Filter: search', () => { @@ -1885,7 +1647,7 @@ describe('Component: UiGrid', () => { fixture.detectChanges(); }); - it('should display the selected filter value', fakeAsync(() => { + it('should display the selected filter value', () => { const items = generateListFactory(() => ({ label: faker.random.word(), value: faker.random.number(), @@ -1895,25 +1657,23 @@ describe('Component: UiGrid', () => { fixture.detectChanges(); const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); + const filterButton = filterContainer.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const suggestItems = fixture.debugElement.queryAll(By.css(selectors.filterOption)); - const selectedItem = faker.helpers.randomize(suggestItems); - selectedItem.nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); + const matMenuItems = filterContainer.queryAll(By.directive(MatMenuItem)); - const selectedFilterValue = filterContainer.query(By.css('.flex .text-ellipsis')).nativeElement.innerText; - expect(selectedFilterValue).toEqual(selectedItem.nativeElement.innerText); + const menuItem = faker.helpers.randomize(matMenuItems); - flush(); - })); + menuItem.nativeElement.dispatchEvent(EventGenerator.click); + fixture.detectChanges(); + + const filterValue = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-value')); + expect(filterValue.nativeElement.innerText.trim()).toEqual((menuItem.componentInstance as MatMenuItem).getLabel()); + }); - it('should trigger an event emission when the filter changes', fakeAsync(() => { + it('should trigger an event emission when the filter changes', (done) => { const items = generateListFactory(() => ({ label: faker.random.word(), value: faker.random.number(), @@ -1923,29 +1683,29 @@ describe('Component: UiGrid', () => { fixture.detectChanges(); const filterContainer = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-container')); - const filterButton = filterContainer.query(By.css(selectors.filterDropdown)); + const filterButton = filterContainer.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const suggestItems = fixture.debugElement.queryAll(By.css(selectors.filterOption)); - const selectedItem = faker.helpers.randomize(suggestItems); + const matMenuItems = filterContainer.queryAll(By.directive(MatMenuItem)); + + const menuItem = faker.helpers.randomize(matMenuItems); + const menuItemLabel = (menuItem.componentInstance as MatMenuItem).getLabel(); grid.filterManager.filter$ .pipe( skip(1), take(1), + finalize(done), ).subscribe(([filter]) => { expect(filter.property).toEqual('myNumber'); - expect(filter.value).toEqual(items.find(i => i.label === selectedItem.nativeElement.innerText)!.value); + expect(filter.value).toEqual(items.find(i => i.label === menuItemLabel)!.value); }); - selectedItem.nativeElement.dispatchEvent(EventGenerator.click); + menuItem.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - flush(); - })); + }); }); describe('Event: search filter change', () => { @@ -3023,13 +2783,12 @@ describe('Component: UiGrid', () => { discardPeriodicTasks(); })); - it('should use proper template when no data with filters', fakeAsync(() => { - const filterButton = fixture.debugElement.query(By.css(selectors.filterDropdown)); + it('should use proper template when no data with filters', () => { + const filterButton = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const filterFirstOptionButton = fixture.debugElement.queryAll(By.css(selectors.notSelectedFilterOption))[1]; + + const filterFirstOptionButton = fixture.debugElement.query(By.css('button.mat-mdc-menu-item:not(.active)')); filterFirstOptionButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); @@ -3037,17 +2796,15 @@ describe('Component: UiGrid', () => { expect(noDataContent).toBeTruthy(); expect(noDataContent.classes['ui-grid-no-content-available']).toBeFalsy(); expect(noDataContent.nativeElement.innerText).toContain('table_no_data_filters'); - flush(); - })); + }); it('should use proper template when no data with filters and search', fakeAsync(() => { - const filterButton = fixture.debugElement.query(By.css(selectors.filterDropdown)); + + const filterButton = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const filterFirstOptionButton = fixture.debugElement.queryAll(By.css(selectors.notSelectedFilterOption))[1]; + const filterFirstOptionButton = fixture.debugElement.query(By.css('button.mat-mdc-menu-item:not(.active)')); filterFirstOptionButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); @@ -3402,30 +3159,23 @@ describe('Component: UiGrid', () => { expect(collapisbleFiltersToggle).toBeFalsy(); }); - it('should display the correct filter label', fakeAsync(() => { + it('should display the correct filter label', () => { const collapisbleFiltersToggle = fixture.debugElement.query(By.css('.ui-grid-collapsible-filters-toggle')); const collapisbleFiltersToggleText = fixture.debugElement .query(By.css('.ui-grid-collapsible-filters-toggle span span')); collapisbleFiltersToggle.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const filterButton = fixture.debugElement.query(By.css(selectors.filterDropdown)); + const filterButton = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const filterFirstOptionButton = fixture.debugElement.queryAll(By.css(selectors.notSelectedFilterOption))[1]; + const filterFirstOptionButton = fixture.debugElement.query(By.css('button.mat-mdc-menu-item:not(.active)')); filterFirstOptionButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); expect(collapisbleFiltersToggleText.nativeElement.innerText).toBe('Filters (1)'); - flush(); - })); + }); it('should toggle filters', () => { const collapisbleFiltersToggle = fixture.debugElement.query(By.css('.ui-grid-collapsible-filters-toggle')); @@ -3814,26 +3564,23 @@ describe('Component: UiGrid', () => { expect(collapisbleFiltersToggle).toBeFalsy(); }); - it('should display the correct filter label', fakeAsync(() => { + it('should display the correct filter label', () => { const collapisbleFiltersToggle = fixture.debugElement.query(By.css('.ui-grid-collapsible-filters-toggle')); const collapisbleFiltersToggleText = fixture.debugElement .query(By.css('.ui-grid-collapsible-filters-toggle span span')); collapisbleFiltersToggle.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - const filterButton = fixture.debugElement.query(By.css(selectors.filterDropdown)); + const filterButton = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const filterFirstOptionButton = fixture.debugElement.queryAll(By.css(selectors.notSelectedFilterOption))[1]; + const filterFirstOptionButton = fixture.debugElement.query(By.css('button.mat-mdc-menu-item:not(.active)')); filterFirstOptionButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); expect(collapisbleFiltersToggleText.nativeElement.innerText).toBe('Filters (1)'); - })); + }); it('should toggle filters', () => { const collapisbleFiltersToggle = fixture.debugElement.query(By.css('.ui-grid-collapsible-filters-toggle')); @@ -4035,25 +3782,20 @@ describe('Component: UiGrid', () => { expect(loadingElement).toBeFalsy(); }); - it('should provide correct number of filters', fakeAsync(() => { + it('should provide correct number of filters', () => { const activeFiltersCount = fixture.debugElement.query(By.css('#active-count')); expect(activeFiltersCount.nativeElement.innerText).toBe('0'); - const filterButton = fixture.debugElement.query(By.css(selectors.filterDropdown)); + const filterButton = fixture.debugElement.query(By.css('.ui-grid-dropdown-filter-button')); filterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - const filterFirstOptionButton = fixture.debugElement.queryAll(By.css(selectors.notSelectedFilterOption))[1]; + const filterFirstOptionButton = fixture.debugElement.query(By.css('button.mat-mdc-menu-item:not(.active)')); filterFirstOptionButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); expect(activeFiltersCount.nativeElement.innerText).toBe('1'); - flush(); - })); + }); it('should provide search context', fakeAsync(() => { const debounceTime = 500; @@ -4333,13 +4075,14 @@ describe('Component: UiGrid', () => { it('should NOT display expanded filters when grid has custom filter', fakeAsync(() => { fixture.detectChanges(); + const toggleFiltersButton = document.querySelector('.ui-grid-collapsible-filters-toggle'); expect(toggleFiltersButton).toBeTruthy(); toggleFiltersButton?.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - expect(document.querySelectorAll('.ui-grid-filter-suggest').length).toBe(2); + expect(document.querySelectorAll('.ui-grid-dropdown-filter-button').length).toBe(2); fixture.componentInstance.customFilter = [{ property: 'myNumber2', @@ -4351,14 +4094,12 @@ describe('Component: UiGrid', () => { tick(500); fixture.detectChanges(); - expect(document.querySelectorAll('.ui-grid-filter-suggest').length).toBe(0); + expect(document.querySelectorAll('.ui-grid-dropdown-filter-button').length).toBe(0); const clearCustomFilterButton = fixture.debugElement.query(By.css('[data-cy="clear-custom-filter"]')); clearCustomFilterButton.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - expect(document.querySelectorAll('.ui-grid-filter-suggest').length).toBe(2); - flush(); - discardPeriodicTasks(); + expect(document.querySelectorAll('.ui-grid-dropdown-filter-button').length).toBe(2); })); it('should NOT display custom filter button if there are selected rows', fakeAsync(() => { @@ -4387,14 +4128,15 @@ describe('Component: UiGrid', () => { const toggleFiltersButton = document.querySelector('.ui-grid-collapsible-filters-toggle'); toggleFiltersButton!.dispatchEvent(EventGenerator.click); fixture.detectChanges(); - expect(document.querySelectorAll('.ui-grid-filter-suggest').length).toBe(2); + + expect(document.querySelectorAll('.ui-grid-dropdown-filter-button').length).toBe(2); const checkboxInput = fixture.debugElement.query(By.css('.ui-grid-header-cell.ui-grid-checkbox-cell input')); checkboxInput.nativeElement.dispatchEvent(EventGenerator.click); fixture.detectChanges(); tick(500); - expect(document.querySelectorAll('.ui-grid-filter-suggest').length).toBe(0); + expect(document.querySelectorAll('.ui-grid-dropdown-filter-button').length).toBe(0); })); }); @@ -4630,7 +4372,8 @@ describe('Component: UiGrid', () => { [sortable]="true" title="Number Header" width="50%"> - + { static: true, }) grid!: UiGridComponent; + data: ITestEntity[] = []; } @@ -4681,6 +4425,7 @@ describe('Component: UiGrid', () => { }); it('should render properties defined in the column section', () => { + const cells = fixture.debugElement.queryAll(By.css('.ui-grid-cards-container .ui-grid-card-default-cell-content')); expect((cells[0].nativeElement as HTMLElement).innerHTML).toContain('Number Header'); @@ -4856,13 +4601,6 @@ describe('Component: UiGrid', () => { expect(gridTable.nativeElement.style.minWidth).toBe(columnWidthSum + 'px'); })); - it('should display margin shadow when the grid has horizontal scroll', fakeAsync(() => { - const widths = [250, 1000, 330, 400, 100, 100]; // large enough too cause overflow - beforeConfig({ widths }); - const tableMarginShadowDivs = fixture.debugElement.queryAll(By.css('.grid-margin-shadow')); - expect(tableMarginShadowDivs.length).toBe(widths.length); - })); - it('should increase the width of last column if default column width sum does not fill the table', fakeAsync(() => { const widths = [50, 50, 0, 50, 50, 50]; const lastColumnIdx = 4; // refresh btn & 1 missing column @@ -5035,13 +4773,13 @@ describe('Component: UiGrid', () => { expect(+newMinWidth.replace('px', '')).toBeLessThan(+startingMinWidth.replace('px', '')); })); - it(`should set overflow to visible and hide margin shadow if total width of columns does not exceed container width`, fakeAsync(() => { + it(`should set overflow to visible if total width of columns does not exceed container width`, fakeAsync(() => { const gridTable = fixture.debugElement.query(By.css('.ui-grid-table')); const options = fixture.debugElement .queryAll(By.css('.ui-grid-toggle-panel .mat-mdc-option:not(.mdc-list-item--disabled)')); expect(gridTable.styles.overflow).toEqual('visible'); - expect(fixture.debugElement.queryAll(By.css('.grid-margin-shadow')).length).toBe(6); + options.forEach(o => { const checkbox = o.query(By.css('.mat-pseudo-checkbox')); checkbox.nativeElement.dispatchEvent(EventGenerator.click); @@ -5051,7 +4789,6 @@ describe('Component: UiGrid', () => { fixture.detectChanges(); expect(gridTable.styles.overflow).toEqual('hidden'); - expect(fixture.debugElement.queryAll(By.css('.grid-margin-shadow')).length).toBe(0); })); }); diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.ts similarity index 91% rename from projects/angular/components/ui-grid/src/ui-grid.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.ts index f93f8e37e..ba6c87e85 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.component.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.component.ts @@ -1,12 +1,9 @@ -import isArray from 'lodash-es/isArray'; import range from 'lodash-es/range'; import { animationFrameScheduler, BehaviorSubject, combineLatest, defer, - fromEvent, - iif, merge, Observable, of, @@ -27,7 +24,6 @@ import { take, takeUntil, tap, - throttleTime, } from 'rxjs/operators'; import { @@ -54,7 +50,6 @@ import { NgZone, OnChanges, OnDestroy, - OnInit, Optional, Output, QueryList, @@ -77,7 +72,6 @@ import { UiGridNoContentDirective } from './body/ui-grid-no-content.directive'; import { UiGridRowActionDirective } from './body/ui-grid-row-action.directive'; import { UiGridRowCardViewDirective } from './body/ui-grid-row-card-view.directive'; import { UiGridRowConfigDirective } from './body/ui-grid-row-config.directive'; -import { UiGridCustomSearchDirective } from './components/ui-grid-search/ui-grid-custom-search.directive'; import { UiGridSearchFilterDirective } from './filters/ui-grid-search-filter.directive'; import { UiGridFooterDirective } from './footer/ui-grid-footer.directive'; import { UiGridHeaderDirective } from './header/ui-grid-header.directive'; @@ -112,8 +106,6 @@ const FOCUSABLE_ELEMENTS_QUERY = 'a, button:not([hidden]), input:not([hidden]), const EXCLUDED_ROW_SELECTION_ELEMENTS = ['a', 'button', 'input', 'textarea', 'select']; const REFRESH_WIDTH = 50; const DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE = 48; -const DEFAULT_VIRTUAL_SCROLL_HIGH_DENSITY_ITEM_SIZE = 32; -const SCROLL_LIMIT_FOR_DISPLAYING_SHADOW = 10; @Component({ selector: 'ui-grid', @@ -160,7 +152,7 @@ const SCROLL_LIMIT_FOR_DISPLAYING_SHADOW = 10; }) export class UiGridComponent extends ResizableGrid - implements AfterContentInit, OnChanges, OnDestroy, OnInit { + implements AfterContentInit, OnChanges, OnDestroy { /** * The data list that needs to be rendered within the grid. * @@ -192,14 +184,6 @@ export class UiGridComponent @Input() isProjected: boolean; - /** - * Set the grid in high density state. - * - */ - @HostBinding('class.ui-grid-state-high-density') - @Input() - hasHighDensity = false; - /** * Determines if all of the items are currently checked. * @@ -454,28 +438,6 @@ export class UiGridComponent } } - /** - * Maximum number of active filter values before the filter selection is disabled - * - */ - @Input() - set maxSelectedFilterValues(value: number) { - this.maxSelectedFilterValues$.next(value); - } - /** - * Configure if the pagination should be selectable - * - */ - @Input() - selectablePageIndex: boolean; - - /** - * Configure if the filter containers should be swapped - * - */ - @Input() - swapFilterContainers = false; - /** * Emits an event with the sort model when a column sort changes. * @@ -567,16 +529,6 @@ export class UiGridComponent }) header?: UiGridHeaderDirective; - /** - * Custom search directive reference. - * - * @ignore - */ - @ContentChild(UiGridCustomSearchDirective, { - static: true, - }) - search?: UiGridCustomSearchDirective; - /** * Column directive reference list. * @@ -776,12 +728,6 @@ export class UiGridComponent }), ); - /** - * Emits current max selected filter values count - * - */ - maxSelectedFilterValues$ = new BehaviorSubject(Infinity); - /** * Emits the id of the entity that should be highlighted. * @@ -838,20 +784,6 @@ export class UiGridComponent shareReplay(1), ); - shouldDisplayContainerShadow$ = defer(() => merge( - fromEvent(this._ref.nativeElement.querySelector('.ui-grid-table-container')!, 'scroll').pipe( - throttleTime(50, undefined, { trailing: true }), - map((event: any) => { - const { scrollWidth, scrollLeft, clientWidth } = event.target; - return Math.abs(scrollWidth - clientWidth - scrollLeft) >= SCROLL_LIMIT_FOR_DISPLAYING_SHADOW; - }), - ), - this.isOverflown$, - )).pipe( - distinctUntilChanged(), - shareReplay(), - ); - areFilersCollapsed$: Observable; /** @@ -868,7 +800,6 @@ export class UiGridComponent } deficit$ = new BehaviorSubject(0); - containerWidth = 0; minWidth$ = defer(() => merge( this.visible$, @@ -879,33 +810,23 @@ export class UiGridComponent ).pipe( map(() => this._computeMinWidth()), tap(minWidth => { - this.containerWidth = this._ref.nativeElement.getBoundingClientRect().width; - this.deficit$.next(Math.round(Math.max(0, this.containerWidth - minWidth))); + const containerWidth = this._ref.nativeElement.getBoundingClientRect().width; + this.deficit$.next(Math.round(Math.max(0, containerWidth - minWidth))); }), tap(() => { this._cd.detectChanges(); }), )).pipe( shareReplay(1), ); - isOverflown$ = iif(() => this.isScrollable, this.minWidth$.pipe( + isOverflown$ = this.minWidth$.pipe( map(minWidth => this._isOverflown(minWidth)), distinctUntilChanged(), - shareReplay(1), - ), of(false)); + ); tableOverflowStyle$ = this.isOverflown$.pipe( map(value => value ? 'visible' : 'hidden'), ); - disableFilterSelection$ = defer(() => this.filterManager.activeFilterValueCount$.pipe( - switchMap(count => this.maxSelectedFilterValues$ - .pipe( - map(max => count >= max), - )), - distinctUntilChanged(), - )).pipe(shareReplay(1)); - - readonly Infinity = Infinity; protected _destroyed$ = new Subject(); protected _columnChanges$: Observable; @@ -942,12 +863,10 @@ export class UiGridComponent this.disableSelectionByEntry = () => null; this._fetchStrategy = _gridOptions?.fetchStrategy ?? 'onOpen'; - this.rowSize = _gridOptions?.rowSize ?? -1; - this.hasHighDensity = this._gridOptions?.hasHighDensity ?? false; + this.rowSize = _gridOptions?.rowSize ?? DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE; this._collapseFiltersCount$ = new BehaviorSubject( _gridOptions?.collapseFiltersCount ?? (_gridOptions?.collapsibleFilters === true ? 0 : Number.POSITIVE_INFINITY), ); - this.selectablePageIndex = _gridOptions?.selectablePageIndex ?? false; this.isProjected = this._ref.nativeElement.classList.contains('ui-grid-state-responsive'); @@ -1054,10 +973,6 @@ export class UiGridComponent return of(true); }; - ngOnInit(): void { - this._setInitialRowSize(); - } - /** * @ignore */ @@ -1115,6 +1030,7 @@ export class UiGridComponent } const dataChange = changes.data; + if ( dataChange && !dataChange.firstChange && @@ -1299,13 +1215,8 @@ export class UiGridComponent } isFilterApplied(column: UiGridColumnDirective) { - const searchableHasValue = column.searchableDropdown?.value != null && - (!column.searchableDropdown.multiple || (column.searchableDropdown.value as []).length > 0); - - const dropdownHasValue = column.dropdown?.value != null && column.dropdown.hasValue && - (isArray(column.dropdown.value) || column.dropdown!.value.value !== column.dropdown.emptyStateValue); - - return dropdownHasValue || searchableHasValue; + return (column.dropdown?.value != null && column.dropdown!.value!.value !== column.dropdown!.emptyStateValue) + || (column.searchableDropdown?.value != null && (column.searchableDropdown?.value as ISuggestValue[])?.length !== 0); } triggerColumnHeaderTooltip(event: FocusOrigin, tooltip: MatTooltip) { @@ -1320,11 +1231,24 @@ export class UiGridComponent this.focusedColumnHeader = false; } + focusActiveFilterItem() { + const activeItem: HTMLElement | null = document.querySelector('.cdk-overlay-container .active[role="menuitem"]'); + activeItem?.focus(); + } + rowSelected(row: T) { this.selectionManager.clear(); this.selectionManager.select(row); } + sumColumnPxWidths(columns: UiGridColumnDirective[]) { + return (columns.reduce((acc, curr) => acc + Number(curr.widthPx$.value), 0)) + 'px'; + } + + mapDirectivesToColumns(directives: { directive: UiGridColumnDirective }[]) { + return directives.map(d => d.directive); + } + private _announceGridHeaderActions() { this._queuedAnnouncer.enqueue(this.intl.gridHeaderActionsNotice); } @@ -1368,6 +1292,7 @@ export class UiGridComponent }, 0); return widthsPxSum + this._otherActionsWidth; + } private get _otherActionsWidth() { @@ -1395,12 +1320,4 @@ export class UiGridComponent } } } - - private _setInitialRowSize() { - if (this.rowSize === -1) { - this.rowSize = this.hasHighDensity ? - DEFAULT_VIRTUAL_SCROLL_HIGH_DENSITY_ITEM_SIZE : - DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE; - } - } } diff --git a/projects/angular/components/ui-grid/src/ui-grid.intl.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.intl.ts similarity index 90% rename from projects/angular/components/ui-grid/src/ui-grid.intl.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.intl.ts index f782bbf4a..c7d50d61f 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.intl.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.intl.ts @@ -128,16 +128,6 @@ export class UiGridIntl implements OnDestroy { * */ radioButtonSelectedRowMessage = 'The row is selected'; - /** - * Warning message displayed when the maximum number of selected filters has been reached. - * - */ - maxSelectedFilterValuesWarning = 'The maximum number of selected filters has been reached.'; - /** - * Filter item tooltip displayed when maximum number of options were selected. - * - */ - filterItemWarningTooltip = 'Current combination of filters does not allow selecting additional filters.'; /** * No data row message alternative function. * @@ -200,12 +190,6 @@ export class UiGridIntl implements OnDestroy { translateDropdownOption = (option: IDropdownOption) => option.label; - translateMultiDropdownOptions = (label: string, count: number) => `${label} ` + (count <= 1 - ? '' - : count === 2 - ? '(+1 other)' - : `(+${count - 1} others)`); - /** * Live announcer sort ascending notification. * diff --git a/projects/angular/components/ui-grid/src/ui-grid.module.ts b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.module.ts similarity index 95% rename from projects/angular/components/ui-grid/src/ui-grid.module.ts rename to packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.module.ts index ab5aebd85..48680a059 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.module.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-grid/src/ui-grid.module.ts @@ -13,10 +13,10 @@ import { MatSelectModule } from '@angular/material/select'; import { MatTooltipModule } from '@angular/material/tooltip'; import { UiAutoAccessibleLabelModule } from '@uipath/angular/a11y'; import { UiSuggestModule } from '@uipath/angular/components/ui-suggest'; +import { UiCustomMatMenuTriggerModule } from '@uipath/angular/directives/custom-mat-menu-trigger'; import { UiNgLetModule } from '@uipath/angular/directives/ui-ng-let'; import { UiVirtualScrollViewportResizeModule } from '@uipath/angular/directives/ui-virtual-scroll-viewport-resize'; -import { UiGridCustomSearchDirective } from './components/ui-grid-search/ui-grid-custom-search.directive'; import { UiGridColumnDirective } from './body/ui-grid-column.directive'; import { UiGridExpandedRowDirective } from './body/ui-grid-expanded-row.directive'; import { UiGridLoadingDirective } from './body/ui-grid-loading.directive'; @@ -55,6 +55,7 @@ import { UiGridComponent } from './ui-grid.component'; UiVirtualScrollViewportResizeModule, UiAutoAccessibleLabelModule, UiNgLetModule, + UiCustomMatMenuTriggerModule, ], declarations: [ UiGridComponent, @@ -70,7 +71,6 @@ import { UiGridComponent } from './ui-grid.component'; UiGridNoContentDirective, UiGridLoadingDirective, UiGridRowCardViewDirective, - UiGridCustomSearchDirective, ], exports: [ UiGridComponent, @@ -86,7 +86,6 @@ import { UiGridComponent } from './ui-grid.component'; UiGridNoContentDirective, UiGridLoadingDirective, UiGridRowCardViewDirective, - UiGridCustomSearchDirective, ], }) export class UiGridModule { } diff --git a/projects/angular/components/ui-password-indicator/ng-package.json b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/ng-package.json similarity index 100% rename from projects/angular/components/ui-password-indicator/ng-package.json rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/ng-package.json diff --git a/projects/angular/components/ui-password-indicator/src/_ui-password-indicator.theme.scss b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/_ui-password-indicator.theme.scss similarity index 100% rename from projects/angular/components/ui-password-indicator/src/_ui-password-indicator.theme.scss rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/_ui-password-indicator.theme.scss diff --git a/projects/angular/components/ui-password-indicator/src/public_api.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/public_api.ts similarity index 100% rename from projects/angular/components/ui-password-indicator/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/public_api.ts diff --git a/projects/angular/components/ui-password-indicator/src/ui-password-indicator.animations.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.animations.ts similarity index 100% rename from projects/angular/components/ui-password-indicator/src/ui-password-indicator.animations.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.animations.ts diff --git a/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.html b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.html similarity index 100% rename from projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.html diff --git a/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.scss similarity index 100% rename from projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.scss diff --git a/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.spec.ts similarity index 100% rename from projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.spec.ts diff --git a/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.ts similarity index 100% rename from projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.component.ts diff --git a/projects/angular/components/ui-password-indicator/src/ui-password-indicator.intl.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.intl.ts similarity index 100% rename from projects/angular/components/ui-password-indicator/src/ui-password-indicator.intl.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.intl.ts diff --git a/projects/angular/components/ui-password-indicator/src/ui-password-indicator.module.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.module.ts similarity index 100% rename from projects/angular/components/ui-password-indicator/src/ui-password-indicator.module.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.module.ts diff --git a/projects/angular/components/ui-password-indicator/src/ui-password-indicator.validator.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.validator.spec.ts similarity index 100% rename from projects/angular/components/ui-password-indicator/src/ui-password-indicator.validator.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.validator.spec.ts diff --git a/projects/angular/components/ui-password-indicator/src/ui-password-indicator.validator.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.validator.ts similarity index 100% rename from projects/angular/components/ui-password-indicator/src/ui-password-indicator.validator.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-indicator/src/ui-password-indicator.validator.ts diff --git a/projects/angular/components/ui-password-toggle/ng-package.json b/packages/apollo-angular-components/projects/angular/components/ui-password-toggle/ng-package.json similarity index 100% rename from projects/angular/components/ui-password-toggle/ng-package.json rename to packages/apollo-angular-components/projects/angular/components/ui-password-toggle/ng-package.json diff --git a/projects/angular/components/ui-password-toggle/src/public_api.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/public_api.ts similarity index 100% rename from projects/angular/components/ui-password-toggle/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/public_api.ts diff --git a/projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.html b/packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.html similarity index 100% rename from projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.html diff --git a/projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.spec.ts similarity index 100% rename from projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.spec.ts diff --git a/projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.ts similarity index 100% rename from projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.component.ts diff --git a/projects/angular/components/ui-password-toggle/src/ui-password-toggle.intl.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.intl.ts similarity index 100% rename from projects/angular/components/ui-password-toggle/src/ui-password-toggle.intl.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.intl.ts diff --git a/projects/angular/components/ui-password-toggle/src/ui-password-toggle.module.ts b/packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.module.ts similarity index 100% rename from projects/angular/components/ui-password-toggle/src/ui-password-toggle.module.ts rename to packages/apollo-angular-components/projects/angular/components/ui-password-toggle/src/ui-password-toggle.module.ts diff --git a/projects/angular/components/ui-snackbar/ng-package.json b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/ng-package.json similarity index 100% rename from projects/angular/components/ui-snackbar/ng-package.json rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/ng-package.json diff --git a/projects/angular/components/ui-snackbar/src/_ui-snackbar.theme.scss b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/_ui-snackbar.theme.scss similarity index 100% rename from projects/angular/components/ui-snackbar/src/_ui-snackbar.theme.scss rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/_ui-snackbar.theme.scss diff --git a/projects/angular/components/ui-snackbar/src/public_api.ts b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/public_api.ts similarity index 100% rename from projects/angular/components/ui-snackbar/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/public_api.ts diff --git a/projects/angular/components/ui-snackbar/src/ui-snackbar.component.html b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.component.html similarity index 100% rename from projects/angular/components/ui-snackbar/src/ui-snackbar.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.component.html diff --git a/projects/angular/components/ui-snackbar/src/ui-snackbar.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.component.scss similarity index 100% rename from projects/angular/components/ui-snackbar/src/ui-snackbar.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.component.scss diff --git a/projects/angular/components/ui-snackbar/src/ui-snackbar.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.component.spec.ts similarity index 100% rename from projects/angular/components/ui-snackbar/src/ui-snackbar.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.component.spec.ts diff --git a/projects/angular/components/ui-snackbar/src/ui-snackbar.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.component.ts similarity index 100% rename from projects/angular/components/ui-snackbar/src/ui-snackbar.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.component.ts diff --git a/projects/angular/components/ui-snackbar/src/ui-snackbar.intl.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.intl.spec.ts similarity index 100% rename from projects/angular/components/ui-snackbar/src/ui-snackbar.intl.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.intl.spec.ts diff --git a/projects/angular/components/ui-snackbar/src/ui-snackbar.intl.ts b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.intl.ts similarity index 100% rename from projects/angular/components/ui-snackbar/src/ui-snackbar.intl.ts rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.intl.ts diff --git a/projects/angular/components/ui-snackbar/src/ui-snackbar.module.ts b/packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.module.ts similarity index 100% rename from projects/angular/components/ui-snackbar/src/ui-snackbar.module.ts rename to packages/apollo-angular-components/projects/angular/components/ui-snackbar/src/ui-snackbar.module.ts diff --git a/projects/angular/components/ui-suggest/ng-package.json b/packages/apollo-angular-components/projects/angular/components/ui-suggest/ng-package.json similarity index 100% rename from projects/angular/components/ui-suggest/ng-package.json rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/ng-package.json diff --git a/projects/angular/components/ui-suggest/src/_ui-suggest.theme.scss b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/_ui-suggest.theme.scss similarity index 100% rename from projects/angular/components/ui-suggest/src/_ui-suggest.theme.scss rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/_ui-suggest.theme.scss diff --git a/projects/angular/components/ui-suggest/src/models/index.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/index.ts similarity index 82% rename from projects/angular/components/ui-suggest/src/models/index.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/index.ts index 03811af76..1debb6fd5 100644 --- a/projects/angular/components/ui-suggest/src/models/index.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/index.ts @@ -3,4 +3,3 @@ export * from './suggestValueData'; export * from './suggestValues'; export * from './suggestDisplayPriority'; export * from './suggestDirection'; -export * from './maxSelectionConfig'; diff --git a/projects/angular/components/ui-suggest/src/models/suggestDirection.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestDirection.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/models/suggestDirection.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestDirection.ts diff --git a/projects/angular/components/ui-suggest/src/models/suggestDisplayPriority.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestDisplayPriority.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/models/suggestDisplayPriority.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestDisplayPriority.ts diff --git a/projects/angular/components/ui-suggest/src/models/suggestValue.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestValue.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/models/suggestValue.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestValue.ts diff --git a/projects/angular/components/ui-suggest/src/models/suggestValueData.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestValueData.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/models/suggestValueData.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestValueData.ts diff --git a/projects/angular/components/ui-suggest/src/models/suggestValues.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestValues.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/models/suggestValues.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/models/suggestValues.ts diff --git a/projects/angular/components/ui-suggest/src/public_api.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/public_api.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/public_api.ts diff --git a/projects/angular/components/ui-suggest/src/test/index.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/test/index.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/test/index.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/test/index.ts diff --git a/projects/angular/components/ui-suggest/src/test/suggestionItem.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/test/suggestionItem.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/test/suggestionItem.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/test/suggestionItem.ts diff --git a/projects/angular/components/ui-suggest/src/test/ui-suggest-assert.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/test/ui-suggest-assert.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/test/ui-suggest-assert.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/test/ui-suggest-assert.ts diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.animations.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.animations.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/ui-suggest.animations.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.animations.ts diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.html b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.html similarity index 89% rename from projects/angular/components/ui-suggest/src/ui-suggest.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.html index 142af2df0..0182ae713 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.html +++ b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.html @@ -100,16 +100,16 @@ (keydown.shift.tab)="close()"> + [removable]="canRemoveChip" + [matTooltip]="intl.translateLabel(option.tooltip ?? option.text)" + (removed)="deselectItem(option)" + class="chip-selectable"> + [svgIcon]="option!.icon!.svgIcon!" + class="chip-selectable-icon"> + class="chip-selectable-icon"> {{option?.icon?.matIcon}} @@ -125,21 +125,21 @@ + [uiAutofocus]="isOpen" + [refocus]="isOpen" + [placeholder]="(isFormControl && !empty) ? '' : defaultValue" + [readonly]="readonly || !searchable" + [formControl]="inputControl" + [matChipInputFor]="chipList" + [attr.maxlength]="maxLength" + [attr.aria-label]="ariaLabel ?? placeholder" + [attr.aria-required]="required" + [attr.aria-expanded]="isOpen" + selectionLocation="end" + autocomplete="off" + aria-autocomplete="list" + role="combobox" + matInput> @@ -327,12 +327,6 @@ - -
- warning - {{maxSelectionConfig.footerMessage}} -
@@ -401,9 +395,9 @@ !multiple && isItemSelected(item)" [class.is-expandable]="itemExpandable" - [class.disabled]="item.disabled || (maxSelectionConfig.count <= value.length && !isItemSelected(item))" + [class.disabled]="item.disabled" [style.height.px]="!!item ? itemSize : 0" - [disabled]="item.disabled || (maxSelectionConfig.count <= value.length && !isItemSelected(item))" + [disabled]="item.disabled" (click)="preventDefault($event); updateValue(item, !multiple, true);" [attr.role]="'option'" @@ -418,14 +412,12 @@ -
diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.scss similarity index 90% rename from projects/angular/components/ui-suggest/src/ui-suggest.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.scss index 8da19e5e7..3d289209c 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.scss +++ b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.scss @@ -1,5 +1,6 @@ @import "../../styles/ellipse"; +$height: 40px; $item-height: 32px; $form-control-height: 18px; $display-padding: 15px; @@ -13,13 +14,6 @@ $ui-suggest-focus-transition: background-color 200ms cubic-bezier(0.35, 0, 0.25, $componentName: "ui-suggest"; #{$componentName} { - --ui-suggest-height: 40px; - --ui-suggest-list-item-height: 40px; - - &.ui-suggest-state-high-density { - --ui-suggest-height: 32px; - } - height: 100%; position: relative; display: block; @@ -105,8 +99,8 @@ $componentName: "ui-suggest"; } .display { - height: var(--ui-suggest-height); - line-height: var(--ui-suggest-height); + height: $height; + line-height: $height; transition: $ui-suggest-focus-transition; padding: 0 6px 0 16px; @@ -161,9 +155,9 @@ $componentName: "ui-suggest"; &:not(.is-form-control) { .mat-mdc-list { &-item { - height: var(--ui-suggest-list-item-height); + height: $height; &.text-ellipsis .mdc-list-item__content { - line-height: var(--ui-suggest-list-item-height); + line-height: $height; } &.no-results-text .mdc-list-item__content { font-size: 14px; @@ -199,7 +193,7 @@ $componentName: "ui-suggest"; padding: 0 $field-padding; width: calc(100% - #{$field-padding * 2}) !important; margin: 0 !important; - height: var(--ui-suggest-list-item-height); + height: $height; &-infix { border: 7px solid transparent; border-left: none; @@ -296,17 +290,4 @@ $componentName: "ui-suggest"; overflow: hidden; } } - - .no-more-options-footer { - padding: 6px 16px; - - span { - font-size: 14px - } - - mat-icon { - vertical-align: middle; - padding: 0 8px; - } - } } diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts similarity index 96% rename from projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts index ecd71aa06..fda1a9147 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts @@ -22,7 +22,6 @@ import { Component, DebugElement, Directive, - Input, ViewChild, } from '@angular/core'; import { @@ -105,11 +104,7 @@ class UiSuggestFixtureDirective { searchSourceStrategy: 'default' | 'lazy' = 'default'; minChars = 0; shouldHideTitle = false; - maxSelectionConfig = { - count: Infinity, - itemTooltip: '', - footerMessage: '', - }; + displayValueFactory?: (value: ISuggestValue[]) => string; set value(value: ISuggestValue[] | undefined) { @@ -1866,23 +1861,6 @@ const sharedSpecifications = ( .forEach(valueText => expect(displayValue.nativeElement.innerText.trim()).toContain(valueText)); }); - it('should have the checkbox disabled next to disabled item entry', waitForAsync(async () => { - component.items![0].disabled = true; - fixture.detectChanges(); - - const display = fixture.debugElement.query(By.css(SELECTORS.chipGrid)); - display.nativeElement.dispatchEvent(EventGenerator.click); - fixture.detectChanges(); - - await fixture.whenStable(); - fixture.detectChanges(); - - const itemList = fixture.debugElement.queryAll(By.css(SELECTORS.listItem)); - - const itemEntry = itemList[0]; - expect(itemEntry.nativeElement).toHaveClass('disabled'); - })); - it('should have a checkbox next to each item entry', waitForAsync(async () => { fixture.detectChanges(); @@ -1903,9 +1881,8 @@ const sharedSpecifications = ( } })); - it('should have the chechbox checked for selected items', waitForAsync(async () => { - const selectedValues = component.items!.slice(0, 5); - component.value = selectedValues; + it('should have the checkbox disabled next to disabled item entry', waitForAsync(async () => { + component.items![0].disabled = true; fixture.detectChanges(); const display = fixture.debugElement.query(By.css(SELECTORS.chipGrid)); @@ -1917,28 +1894,13 @@ const sharedSpecifications = ( const itemList = fixture.debugElement.queryAll(By.css(SELECTORS.listItem)); - for (const itemEntry of itemList) { - const label = itemEntry.query(By.css('.text-label')); - const labelText = label.nativeElement.innerText.trim(); - if (selectedValues.find(value => value.text === labelText)) { - const checkbox = itemEntry.query(By.css('input:checked')); - expect(checkbox).not.toBeNull(); - } - } - - const checkedCheckboxes = fixture.debugElement.queryAll(By.css('input:checked')); - expect(checkedCheckboxes.length).toBe(selectedValues.length); + const itemEntry = itemList[0]; + expect(itemEntry.nativeElement).toHaveClass('disabled'); })); - it('should display footer warning message if max selection count is reached', waitForAsync(async () => { - const maxSelectionConfig = { - count: 5, - footerMessage: 'No more than 5', - itemTooltip: 'Pas possible', - }; + it('should have the chechbox checked for selected items', waitForAsync(async () => { const selectedValues = component.items!.slice(0, 5); component.value = selectedValues; - component.maxSelectionConfig = maxSelectionConfig; fixture.detectChanges(); const display = fixture.debugElement.query(By.css(SELECTORS.chipGrid)); @@ -1959,8 +1921,8 @@ const sharedSpecifications = ( } } - const footerMsg = fixture.debugElement.query(By.css('.no-more-options-footer span')).nativeElement.innerText; - expect(footerMsg).toEqual(maxSelectionConfig.footerMessage); + const checkedCheckboxes = fixture.debugElement.queryAll(By.css('input:checked')); + expect(checkedCheckboxes.length).toBe(selectedValues.length); })); it('should remove a selected item if clicked', waitForAsync(async () => { @@ -2797,8 +2759,7 @@ describe('Component: UiSuggest', () => { [drillDown]="drillDown" [readonly]="readonly" [compact]="compact" - [shouldHideTitle]="shouldHideTitle" - [maxSelectionConfig]=maxSelectionConfig> + [shouldHideTitle]="shouldHideTitle"> `, }) @@ -2881,7 +2842,6 @@ describe('Component: UiSuggest', () => { [minChars]="minChars" [drillDown]="drillDown" [compact]="compact" - [maxSelectionConfig]=maxSelectionConfig formControlName="test"> @@ -3312,52 +3272,4 @@ describe('Component: UiSuggest', () => { }); }); }); - - @Component({ - template: ` - - - - - - `, - }) - class UiSuggestFixtureWithHighDensityComponent extends UiSuggestFixtureDirective { - @Input() - hasHighDensity: boolean | null = null; - } - describe('Scenario: standalone component with high density mode', () => { - it('should have high density mode turned OFF by default', () => { - TestBed.configureTestingModule({ - imports: [UiSuggestModule], - declarations: [UiSuggestFixtureWithHighDensityComponent], - }); - - const fixture = TestBed.createComponent(UiSuggestFixtureWithHighDensityComponent); - fixture.detectChanges(); - - expect(Object.keys(fixture.debugElement.classes).includes('ui-suggest-state-high-density')).toBeFalsy(); - - const container = fixture.debugElement.query(By.css('.ui-suggest-container')).nativeElement; - expect(getComputedStyle(container).height).toBe('40px'); - }); - - it('should generate the correct html in high density mode', () => { - TestBed.configureTestingModule({ - imports: [UiSuggestModule], - declarations: [UiSuggestFixtureWithHighDensityComponent], - }); - - const fixture = TestBed.createComponent(UiSuggestFixtureWithHighDensityComponent); - fixture.componentInstance.hasHighDensity = true; - fixture.detectChanges(); - - const appliedClasses = Object.keys(fixture.debugElement.query(By.css('ui-suggest')).classes); - expect(appliedClasses.includes('ui-suggest-state-high-density')).toBeTruthy(); - - const container = fixture.debugElement.query(By.css('.ui-suggest-container')).nativeElement; - expect(getComputedStyle(container).height).toBe('32px'); - }); - }); }); diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.ts similarity index 98% rename from projects/angular/components/ui-suggest/src/ui-suggest.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.ts index a6f6c407d..6f1faa642 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.component.ts @@ -67,7 +67,6 @@ import { ISuggestValue, ISuggestValues, SuggestDirection, - SuggestMaxSelectionConfig, } from './models'; import { UI_SUGGEST_ANIMATIONS } from './ui-suggest.animations'; import { UiSuggestIntl } from './ui-suggest.intl'; @@ -184,14 +183,6 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective this._cd.detectChanges(); } - /** - * Set the element in high density state. - * - */ - @HostBinding('class.ui-suggest-state-high-density') - @Input() - hasHighDensity = false; - /** * By default the onOpen fetchStrategy prevents additional requests if closed. * This allows you to bypass that check and update even if closed. @@ -244,7 +235,7 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective * If true, component wil place the dropdown over the input */ @Input() - forceDisplayDropdownOverInput = true; + forceDisplayDropdownOverInput = false; /** * Configure if the component allows multi-selection. @@ -614,16 +605,6 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective @Input() compactSummaryTemplate?: TemplateRef; - /** - * The config used to describe suggest when the maximum number of selected items is reached. - * - */ - @Input() - maxSelectionConfig: SuggestMaxSelectionConfig = { - count: Infinity, - itemTooltip: '', - footerMessage: '', - }; /** * Emits `once` when `data` is retrieved for the `first time`. * @@ -1213,7 +1194,6 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective // eslint-disable-next-line complexity updateValue(inputValue: ISuggestValue | string, closeAfterSelect = true, refocus = true) { let value = toSuggestValue(inputValue, this._isOnCustomValueIndex); - if (this.maxSelectionConfig.count <= this.value.length && !this.isItemSelected(value)) { return; } if (value.loading !== VirtualScrollItemStatus.loaded || value.disabled === true) { return; } this.itemSelected.emit(value); @@ -1351,14 +1331,14 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective } private _initOverlayPositions() { - const mustBePlacedBelowTheInput = !this.forceDisplayDropdownOverInput || this.multiple; + const mustBePlacedBesideTheInput = !this.forceDisplayDropdownOverInput && this.multiple; // We need this because we want to show the dropdown below the mat-form-field and not below the ui-suggest component if (this.isFormControl) { - this._setDropdownOffset(mustBePlacedBelowTheInput); + this._setDropdownOffset(mustBePlacedBesideTheInput); } - if (mustBePlacedBelowTheInput) { + if (mustBePlacedBesideTheInput) { this._setDropdownOrigin(); } } diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.intl.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.intl.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/ui-suggest.intl.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.intl.ts diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.mat-form-field.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.mat-form-field.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/ui-suggest.mat-form-field.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.mat-form-field.ts diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.module.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.module.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/ui-suggest.module.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/ui-suggest.module.ts diff --git a/projects/angular/components/ui-suggest/src/utils/index.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/utils/index.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/utils/index.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/utils/index.ts diff --git a/projects/angular/components/ui-suggest/src/utils/items.utils.ts b/packages/apollo-angular-components/projects/angular/components/ui-suggest/src/utils/items.utils.ts similarity index 100% rename from projects/angular/components/ui-suggest/src/utils/items.utils.ts rename to packages/apollo-angular-components/projects/angular/components/ui-suggest/src/utils/items.utils.ts diff --git a/projects/angular/components/ui-tree-select/ng-package.json b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/ng-package.json similarity index 100% rename from projects/angular/components/ui-tree-select/ng-package.json rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/ng-package.json diff --git a/projects/angular/components/ui-tree-select/src/models/tree.models.ts b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/models/tree.models.ts similarity index 100% rename from projects/angular/components/ui-tree-select/src/models/tree.models.ts rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/models/tree.models.ts diff --git a/projects/angular/components/ui-tree-select/src/public_api.ts b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/public_api.ts similarity index 100% rename from projects/angular/components/ui-tree-select/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/public_api.ts diff --git a/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.html b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.html similarity index 73% rename from projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.html index 75964d8dd..fdf06729a 100644 --- a/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.html +++ b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.html @@ -3,9 +3,6 @@ [class.selected]="isSelected" [ngClass]="'node-level-' + node.level" [class.node-type-leaf]="!node.hasChildren" - [attr.aria-level]="node.level" - [attr.aria-expanded]="isExpanded" - [attr.aria-selected]="isSelected" matRipple tabindex="-1" role="treeitem" diff --git a/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.spec.ts similarity index 100% rename from projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.spec.ts diff --git a/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.ts similarity index 97% rename from projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.ts index 469fc665c..5f5f6cbe8 100644 --- a/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.ts +++ b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.ts @@ -35,9 +35,6 @@ export class UiTreeItemComponent implements FocusableOption { @Input() isSelected = false; - @Input() - isExpanded = false; - @Output() expanded = new EventEmitter(); diff --git a/projects/angular/components/ui-tree-select/src/ui-tree-select.component.html b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.html similarity index 82% rename from projects/angular/components/ui-tree-select/src/ui-tree-select.component.html rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.html index 69a90ee65..cf22c13f6 100644 --- a/projects/angular/components/ui-tree-select/src/ui-tree-select.component.html +++ b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.html @@ -4,13 +4,13 @@ [ngTemplateOutlet]="headerTemplate"> - - + @@ -20,7 +20,6 @@ (expanded)="expand(node)" [node]="node" [attr.nodekey]="node.key" - [isExpanded]="isExpanded(node)" [isSelected]="isSelected(node)"> - - + +
diff --git a/projects/angular/components/ui-tree-select/src/ui-tree-select.component.scss b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.scss similarity index 81% rename from projects/angular/components/ui-tree-select/src/ui-tree-select.component.scss rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.scss index 38d087625..55c35436d 100644 --- a/projects/angular/components/ui-tree-select/src/ui-tree-select.component.scss +++ b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.scss @@ -1,11 +1,3 @@ -.mat-mdc-list.mdc-list.tree-container { - padding: 0; - height: 100%; - .virtual-scroll-container { - height: 100%; - } -} - .tree-item-container { height: 100%; diff --git a/projects/angular/components/ui-tree-select/src/ui-tree-select.component.spec.ts b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.spec.ts similarity index 100% rename from projects/angular/components/ui-tree-select/src/ui-tree-select.component.spec.ts rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.spec.ts diff --git a/projects/angular/components/ui-tree-select/src/ui-tree-select.component.ts b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.ts similarity index 100% rename from projects/angular/components/ui-tree-select/src/ui-tree-select.component.ts rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/ui-tree-select.component.ts diff --git a/projects/angular/components/ui-tree-select/src/utils/tree.utils.ts b/packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/utils/tree.utils.ts similarity index 100% rename from projects/angular/components/ui-tree-select/src/utils/tree.utils.ts rename to packages/apollo-angular-components/projects/angular/components/ui-tree-select/src/utils/tree.utils.ts diff --git a/projects/angular/directives/ui-file-drop-zone/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/ng-package.json similarity index 100% rename from projects/angular/directives/ui-file-drop-zone/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/ng-package.json diff --git a/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts b/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts new file mode 100644 index 000000000..fb822900d --- /dev/null +++ b/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts @@ -0,0 +1,69 @@ +import { + Subject, + takeUntil, +} from 'rxjs'; + +import { LiveAnnouncer } from '@angular/cdk/a11y'; +import { + AfterContentInit, + Directive, + ElementRef, + HostBinding, + inject, + Input, + OnDestroy, +} from '@angular/core'; +import { MatMenuTrigger as _MatMenuTriggerBase } from '@angular/material/menu'; + +// FIXME: this directive will not be necessary anymore in the @angular/material@15.x version +// its sole purpose is to fix the aria-expanded issue https://github.com/angular/components/issues/26262 + +@Directive({ + selector: '[uiCustomMatMenuTriggerFor]', +}) +export class UiCustomMatMenuTriggerDirective extends _MatMenuTriggerBase implements AfterContentInit, OnDestroy { + @HostBinding() + ariaExpanded = false; + + @Input() + expandedTranslation = 'expanded'; + + nativeElement = inject(ElementRef).nativeElement; + + private _liveAnnouncer = inject(LiveAnnouncer); + private _destroyed$ = new Subject(); + ngAfterContentInit() { + this.menuOpened.pipe( + takeUntil(this._destroyed$), + ).subscribe(() => { + // although setting aria-expanded to true, it is not announced + this.nativeElement.setAttribute('aria-expanded', 'true'); + this._liveAnnouncer.announce(this.expandedTranslation); + + // after closing the menu it would appear for a short time as expanded + // therefore we set it as collapsed before it is actually closed + setTimeout(() => { + this.nativeElement.setAttribute('aria-expanded', 'false'); + }, 100); + }); + + this.menuClosed.pipe( + takeUntil(this._destroyed$), + ).subscribe(() => { + this.nativeElement.setAttribute('aria-expanded', 'false'); + + // timeout is required because + // after focusing another element then returning to this one, it will lose collapsed state + setTimeout(() => { + this.nativeElement.setAttribute('aria-expanded', 'false'); + }, 100); + }); + } + + ngOnDestroy() { + super.ngOnDestroy(); + this._destroyed$.next(); + this._destroyed$.complete(); + } +} + diff --git a/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.module.ts b/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.module.ts new file mode 100644 index 000000000..fa31c706a --- /dev/null +++ b/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.module.ts @@ -0,0 +1,9 @@ +import { NgModule } from '@angular/core'; + +import { UiCustomMatMenuTriggerDirective } from './custom-mat-menu-trigger.directive'; + +@NgModule({ + declarations: [UiCustomMatMenuTriggerDirective], + exports: [UiCustomMatMenuTriggerDirective], +}) +export class UiCustomMatMenuTriggerModule { } diff --git a/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/src/public_api.ts new file mode 100644 index 000000000..fda813e9c --- /dev/null +++ b/packages/apollo-angular-components/projects/angular/directives/custom-mat-menu-trigger/src/public_api.ts @@ -0,0 +1,2 @@ +export { UiCustomMatMenuTriggerModule } from './custom-mat-menu-trigger.module'; +export { UiCustomMatMenuTriggerDirective } from './custom-mat-menu-trigger.directive'; diff --git a/projects/angular/directives/internal/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/internal/ng-package.json similarity index 100% rename from projects/angular/directives/internal/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/internal/ng-package.json diff --git a/projects/angular/directives/internal/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/internal/src/public_api.ts similarity index 100% rename from projects/angular/directives/internal/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/internal/src/public_api.ts diff --git a/projects/angular/directives/internal/src/ui-format.ts b/packages/apollo-angular-components/projects/angular/directives/internal/src/ui-format.ts similarity index 100% rename from projects/angular/directives/internal/src/ui-format.ts rename to packages/apollo-angular-components/projects/angular/directives/internal/src/ui-format.ts diff --git a/projects/angular/directives/internal/src/ui-loader-button.ts b/packages/apollo-angular-components/projects/angular/directives/internal/src/ui-loader-button.ts similarity index 100% rename from projects/angular/directives/internal/src/ui-loader-button.ts rename to packages/apollo-angular-components/projects/angular/directives/internal/src/ui-loader-button.ts diff --git a/projects/angular/directives/keyboard-shortcut/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/ng-package.json similarity index 100% rename from projects/angular/directives/keyboard-shortcut/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/ng-package.json diff --git a/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.spec.ts similarity index 100% rename from projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.spec.ts diff --git a/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.ts b/packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.ts similarity index 97% rename from projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.ts index cbc702568..2b515fd5e 100644 --- a/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.ts +++ b/packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.directive.ts @@ -18,7 +18,7 @@ import { }) export class KeyboardShortcutDirective { @Input() - shortcutKeys: string[][] = []; + shortcutKeys!: string[][]; @Output() shortcutPressed = new EventEmitter(); diff --git a/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.module.ts b/packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.module.ts similarity index 100% rename from projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.module.ts rename to packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/src/keyboard-shortcut.module.ts diff --git a/projects/angular/directives/keyboard-shortcut/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/src/public_api.ts similarity index 100% rename from projects/angular/directives/keyboard-shortcut/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/keyboard-shortcut/src/public_api.ts diff --git a/projects/angular/directives/ui-autofocus/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-autofocus/ng-package.json similarity index 100% rename from projects/angular/directives/ui-autofocus/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-autofocus/ng-package.json diff --git a/projects/angular/directives/ui-autofocus/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-autofocus/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-autofocus/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-autofocus/src/public_api.ts diff --git a/projects/angular/directives/ui-autofocus/src/ui-autofocus.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-autofocus/src/ui-autofocus.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-autofocus/src/ui-autofocus.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-autofocus/src/ui-autofocus.directive.spec.ts diff --git a/projects/angular/directives/ui-autofocus/src/ui-autofocus.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-autofocus/src/ui-autofocus.directive.ts similarity index 100% rename from projects/angular/directives/ui-autofocus/src/ui-autofocus.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-autofocus/src/ui-autofocus.directive.ts diff --git a/projects/angular/directives/ui-autofocus/src/ui-autofocus.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-autofocus/src/ui-autofocus.module.ts similarity index 100% rename from projects/angular/directives/ui-autofocus/src/ui-autofocus.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-autofocus/src/ui-autofocus.module.ts diff --git a/projects/angular/directives/ui-click-outside/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-click-outside/ng-package.json similarity index 100% rename from projects/angular/directives/ui-click-outside/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-click-outside/ng-package.json diff --git a/projects/angular/directives/ui-click-outside/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-click-outside/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-click-outside/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-click-outside/src/public_api.ts diff --git a/projects/angular/directives/ui-click-outside/src/ui-click-outside.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-click-outside/src/ui-click-outside.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-click-outside/src/ui-click-outside.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-click-outside/src/ui-click-outside.directive.spec.ts diff --git a/projects/angular/directives/ui-click-outside/src/ui-click-outside.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-click-outside/src/ui-click-outside.directive.ts similarity index 100% rename from projects/angular/directives/ui-click-outside/src/ui-click-outside.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-click-outside/src/ui-click-outside.directive.ts diff --git a/projects/angular/directives/ui-click-outside/src/ui-click-outside.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-click-outside/src/ui-click-outside.module.ts similarity index 100% rename from projects/angular/directives/ui-click-outside/src/ui-click-outside.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-click-outside/src/ui-click-outside.module.ts diff --git a/projects/angular/directives/ui-clipboard/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-clipboard/ng-package.json similarity index 100% rename from projects/angular/directives/ui-clipboard/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-clipboard/ng-package.json diff --git a/projects/angular/directives/ui-clipboard/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-clipboard/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-clipboard/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-clipboard/src/public_api.ts diff --git a/projects/angular/directives/ui-clipboard/src/ui-clipboard.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-clipboard/src/ui-clipboard.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-clipboard/src/ui-clipboard.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-clipboard/src/ui-clipboard.directive.spec.ts diff --git a/projects/angular/directives/ui-clipboard/src/ui-clipboard.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-clipboard/src/ui-clipboard.directive.ts similarity index 100% rename from projects/angular/directives/ui-clipboard/src/ui-clipboard.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-clipboard/src/ui-clipboard.directive.ts diff --git a/projects/angular/directives/ui-clipboard/src/ui-clipboard.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-clipboard/src/ui-clipboard.module.ts similarity index 100% rename from projects/angular/directives/ui-clipboard/src/ui-clipboard.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-clipboard/src/ui-clipboard.module.ts diff --git a/projects/angular/directives/ui-content-loader/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-content-loader/ng-package.json similarity index 100% rename from projects/angular/directives/ui-content-loader/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-content-loader/ng-package.json diff --git a/projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.html b/packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.html similarity index 100% rename from projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.html rename to packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.html diff --git a/projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.scss b/packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.scss similarity index 100% rename from projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.scss rename to packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.scss diff --git a/projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.ts b/packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.ts similarity index 100% rename from projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/internal/ui-content-spinner.component.ts diff --git a/projects/angular/directives/ui-content-loader/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-content-loader/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/public_api.ts diff --git a/projects/angular/directives/ui-content-loader/src/ui-content-loader.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/ui-content-loader.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-content-loader/src/ui-content-loader.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/ui-content-loader.directive.spec.ts diff --git a/projects/angular/directives/ui-content-loader/src/ui-content-loader.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/ui-content-loader.directive.ts similarity index 100% rename from projects/angular/directives/ui-content-loader/src/ui-content-loader.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/ui-content-loader.directive.ts diff --git a/projects/angular/directives/ui-content-loader/src/ui-content-loader.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/ui-content-loader.module.ts similarity index 100% rename from projects/angular/directives/ui-content-loader/src/ui-content-loader.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-content-loader/src/ui-content-loader.module.ts diff --git a/projects/angular/directives/ui-dateformat/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-dateformat/ng-package.json similarity index 100% rename from projects/angular/directives/ui-dateformat/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-dateformat/ng-package.json diff --git a/projects/angular/directives/ui-dateformat/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-dateformat/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-dateformat/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-dateformat/src/public_api.ts diff --git a/projects/angular/directives/ui-dateformat/src/ui-dateformat.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-dateformat/src/ui-dateformat.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-dateformat/src/ui-dateformat.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-dateformat/src/ui-dateformat.directive.spec.ts diff --git a/projects/angular/directives/ui-dateformat/src/ui-dateformat.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-dateformat/src/ui-dateformat.directive.ts similarity index 100% rename from projects/angular/directives/ui-dateformat/src/ui-dateformat.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-dateformat/src/ui-dateformat.directive.ts diff --git a/projects/angular/directives/ui-dateformat/src/ui-dateformat.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-dateformat/src/ui-dateformat.module.ts similarity index 100% rename from projects/angular/directives/ui-dateformat/src/ui-dateformat.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-dateformat/src/ui-dateformat.module.ts diff --git a/projects/angular/directives/ui-drag-and-drop-file/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/ng-package.json similarity index 100% rename from projects/angular/directives/ui-drag-and-drop-file/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/ng-package.json diff --git a/projects/angular/directives/ui-drag-and-drop-file/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-drag-and-drop-file/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/src/public_api.ts diff --git a/projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.spec.ts diff --git a/projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.ts similarity index 100% rename from projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.directive.ts diff --git a/projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.module.ts similarity index 100% rename from projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-drag-and-drop-file/src/ui-drag-and-drop-file.module.ts diff --git a/projects/angular/directives/ui-matformfield-required/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/ng-package.json similarity index 100% rename from projects/angular/directives/ui-matformfield-required/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/ng-package.json diff --git a/projects/angular/directives/ui-matformfield-required/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-matformfield-required/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/public_api.ts diff --git a/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.intl.ts b/packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.intl.ts similarity index 100% rename from projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.intl.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.intl.ts diff --git a/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.spec.ts diff --git a/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.ts similarity index 100% rename from projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.directive.ts diff --git a/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.module.ts similarity index 100% rename from projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-matformfield-required/src/ui-matformfield-required.module.ts diff --git a/projects/angular/directives/ui-ng-let/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-ng-let/ng-package.json similarity index 100% rename from projects/angular/directives/ui-ng-let/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-ng-let/ng-package.json diff --git a/projects/angular/directives/ui-ng-let/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-ng-let/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-ng-let/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-ng-let/src/public_api.ts diff --git a/projects/angular/directives/ui-ng-let/src/ui-ng-let.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-ng-let/src/ui-ng-let.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-ng-let/src/ui-ng-let.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-ng-let/src/ui-ng-let.directive.spec.ts diff --git a/projects/angular/directives/ui-ng-let/src/ui-ng-let.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-ng-let/src/ui-ng-let.directive.ts similarity index 100% rename from projects/angular/directives/ui-ng-let/src/ui-ng-let.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-ng-let/src/ui-ng-let.directive.ts diff --git a/projects/angular/directives/ui-ng-let/src/ui-ng-let.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-ng-let/src/ui-ng-let.module.ts similarity index 100% rename from projects/angular/directives/ui-ng-let/src/ui-ng-let.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-ng-let/src/ui-ng-let.module.ts diff --git a/projects/angular/directives/ui-progress-button/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-progress-button/ng-package.json similarity index 100% rename from projects/angular/directives/ui-progress-button/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-progress-button/ng-package.json diff --git a/projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.html b/packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.html similarity index 100% rename from projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.html rename to packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.html diff --git a/projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.scss b/packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.scss similarity index 100% rename from projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.scss rename to packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.scss diff --git a/projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.ts b/packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.ts similarity index 100% rename from projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.ts diff --git a/projects/angular/directives/ui-progress-button/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-progress-button/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/public_api.ts diff --git a/projects/angular/directives/ui-progress-button/src/ui-progress-button.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/ui-progress-button.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-progress-button/src/ui-progress-button.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/ui-progress-button.directive.spec.ts diff --git a/projects/angular/directives/ui-progress-button/src/ui-progress-button.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/ui-progress-button.directive.ts similarity index 100% rename from projects/angular/directives/ui-progress-button/src/ui-progress-button.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/ui-progress-button.directive.ts diff --git a/projects/angular/directives/ui-progress-button/src/ui-progress-button.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/ui-progress-button.module.ts similarity index 100% rename from projects/angular/directives/ui-progress-button/src/ui-progress-button.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-progress-button/src/ui-progress-button.module.ts diff --git a/projects/angular/directives/ui-scroll-into-view/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/ng-package.json similarity index 100% rename from projects/angular/directives/ui-scroll-into-view/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/ng-package.json diff --git a/projects/angular/directives/ui-scroll-into-view/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-scroll-into-view/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/src/public_api.ts diff --git a/projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.directive.spec.ts diff --git a/projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.directive.ts similarity index 100% rename from projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.directive.ts diff --git a/projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.module.ts similarity index 100% rename from projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-scroll-into-view/src/ui-scroll-into-view.module.ts diff --git a/projects/angular/directives/ui-secondformat/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-secondformat/ng-package.json similarity index 100% rename from projects/angular/directives/ui-secondformat/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-secondformat/ng-package.json diff --git a/projects/angular/directives/ui-secondformat/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-secondformat/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-secondformat/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-secondformat/src/public_api.ts diff --git a/projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.spec.ts diff --git a/projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.ts similarity index 100% rename from projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.ts diff --git a/projects/angular/directives/ui-secondformat/src/ui-secondformat.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-secondformat/src/ui-secondformat.module.ts similarity index 100% rename from projects/angular/directives/ui-secondformat/src/ui-secondformat.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-secondformat/src/ui-secondformat.module.ts diff --git a/projects/angular/directives/ui-spinner-button/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/ng-package.json similarity index 100% rename from projects/angular/directives/ui-spinner-button/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/ng-package.json diff --git a/projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.html b/packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.html similarity index 100% rename from projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.html rename to packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.html diff --git a/projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.scss b/packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.scss similarity index 100% rename from projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.scss rename to packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.scss diff --git a/projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.ts b/packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.ts similarity index 100% rename from projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/internal/ui-button-progress-spinner.component.ts diff --git a/projects/angular/directives/ui-spinner-button/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-spinner-button/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/public_api.ts diff --git a/projects/angular/directives/ui-spinner-button/src/ui-spinner-button.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/ui-spinner-button.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-spinner-button/src/ui-spinner-button.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/ui-spinner-button.directive.spec.ts diff --git a/projects/angular/directives/ui-spinner-button/src/ui-spinner-button.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/ui-spinner-button.directive.ts similarity index 100% rename from projects/angular/directives/ui-spinner-button/src/ui-spinner-button.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/ui-spinner-button.directive.ts diff --git a/projects/angular/directives/ui-spinner-button/src/ui-spinner-button.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/ui-spinner-button.module.ts similarity index 100% rename from projects/angular/directives/ui-spinner-button/src/ui-spinner-button.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-spinner-button/src/ui-spinner-button.module.ts diff --git a/projects/angular/directives/ui-virtual-scroll-range-loader/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/ng-package.json similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-range-loader/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/ng-package.json diff --git a/projects/angular/directives/ui-virtual-scroll-range-loader/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-range-loader/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/src/public_api.ts diff --git a/projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.directive.spec.ts diff --git a/projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.directive.ts similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.directive.ts diff --git a/projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.module.ts similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-range-loader/src/ui-virtual-scroll-range-loader.module.ts diff --git a/projects/angular/directives/ui-virtual-scroll-viewport-resize/ng-package.json b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/ng-package.json similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-viewport-resize/ng-package.json rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/ng-package.json diff --git a/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/public_api.ts b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/public_api.ts similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-viewport-resize/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/public_api.ts diff --git a/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.directive.spec.ts b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.directive.spec.ts similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.directive.spec.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.directive.spec.ts diff --git a/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.directive.ts b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.directive.ts similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.directive.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.directive.ts diff --git a/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.module.ts b/packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.module.ts similarity index 100% rename from projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.module.ts rename to packages/apollo-angular-components/projects/angular/directives/ui-virtual-scroll-viewport-resize/src/ui-virtual-scroll-viewport-resize.module.ts diff --git a/projects/angular/karma.conf.js b/packages/apollo-angular-components/projects/angular/karma.conf.js similarity index 100% rename from projects/angular/karma.conf.js rename to packages/apollo-angular-components/projects/angular/karma.conf.js diff --git a/projects/angular/ng-package.json b/packages/apollo-angular-components/projects/angular/ng-package.json similarity index 100% rename from projects/angular/ng-package.json rename to packages/apollo-angular-components/projects/angular/ng-package.json diff --git a/projects/angular/package.json b/packages/apollo-angular-components/projects/angular/package.json similarity index 64% rename from projects/angular/package.json rename to packages/apollo-angular-components/projects/angular/package.json index c29669d26..5b7fb168b 100644 --- a/projects/angular/package.json +++ b/packages/apollo-angular-components/projects/angular/package.json @@ -1,6 +1,6 @@ { "name": "@uipath/angular", - "version": "15.2.5", + "version": "15.0.9", "license": "MIT", "author": { "name": "UiPath Inc", @@ -28,16 +28,17 @@ "vladjerca" ], "peerDependencies": { - "@angular/animations": ">=15.2.0", - "@angular/cdk": ">=15.2.0", - "@angular/common": ">=15.2.0", - "@angular/compiler": ">=15.2.0", - "@angular/core": ">=15.2.0", - "@angular/forms": ">=15.2.0", - "@angular/material": ">=15.2.0", - "@angular/platform-browser": ">=15.2.0", - "@angular/platform-browser-dynamic": ">=15.2.0", - "@angular/router": ">=15.2.0", + "@angular/animations": "^15.2.0", + "@angular/cdk": "^15.2.0", + "@angular/common": "^15.2.0", + "@angular/compiler": "^15.2.0", + "@angular/core": "^15.2.0", + "@angular/forms": "^15.2.0", + "@angular/material": "^15.2.0", + "@angular/platform-browser": "^15.2.0", + "@angular/platform-browser-dynamic": "^15.2.0", + "@angular/router": "^15.2.0", + "@ngrx/component": "^15.4.0", "clipboard": "^2.0.8", "lodash-es": "^4.17.21", "luxon": "^3.2.1", diff --git a/projects/angular/pipes/ng-package.json b/packages/apollo-angular-components/projects/angular/pipes/ng-package.json similarity index 100% rename from projects/angular/pipes/ng-package.json rename to packages/apollo-angular-components/projects/angular/pipes/ng-package.json diff --git a/projects/angular/pipes/src/file-size/file-size.intl.ts b/packages/apollo-angular-components/projects/angular/pipes/src/file-size/file-size.intl.ts similarity index 100% rename from projects/angular/pipes/src/file-size/file-size.intl.ts rename to packages/apollo-angular-components/projects/angular/pipes/src/file-size/file-size.intl.ts diff --git a/projects/angular/pipes/src/file-size/file-size.pipe.spec.ts b/packages/apollo-angular-components/projects/angular/pipes/src/file-size/file-size.pipe.spec.ts similarity index 100% rename from projects/angular/pipes/src/file-size/file-size.pipe.spec.ts rename to packages/apollo-angular-components/projects/angular/pipes/src/file-size/file-size.pipe.spec.ts diff --git a/projects/angular/pipes/src/file-size/file-size.pipe.ts b/packages/apollo-angular-components/projects/angular/pipes/src/file-size/file-size.pipe.ts similarity index 100% rename from projects/angular/pipes/src/file-size/file-size.pipe.ts rename to packages/apollo-angular-components/projects/angular/pipes/src/file-size/file-size.pipe.ts diff --git a/projects/angular/pipes/src/nl2br/nl2br.pipe.spec.ts b/packages/apollo-angular-components/projects/angular/pipes/src/nl2br/nl2br.pipe.spec.ts similarity index 100% rename from projects/angular/pipes/src/nl2br/nl2br.pipe.spec.ts rename to packages/apollo-angular-components/projects/angular/pipes/src/nl2br/nl2br.pipe.spec.ts diff --git a/projects/angular/pipes/src/nl2br/nl2br.pipe.ts b/packages/apollo-angular-components/projects/angular/pipes/src/nl2br/nl2br.pipe.ts similarity index 100% rename from projects/angular/pipes/src/nl2br/nl2br.pipe.ts rename to packages/apollo-angular-components/projects/angular/pipes/src/nl2br/nl2br.pipe.ts diff --git a/projects/angular/pipes/src/pipe.module.ts b/packages/apollo-angular-components/projects/angular/pipes/src/pipe.module.ts similarity index 100% rename from projects/angular/pipes/src/pipe.module.ts rename to packages/apollo-angular-components/projects/angular/pipes/src/pipe.module.ts diff --git a/projects/angular/pipes/src/public_api.ts b/packages/apollo-angular-components/projects/angular/pipes/src/public_api.ts similarity index 100% rename from projects/angular/pipes/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/pipes/src/public_api.ts diff --git a/projects/angular/public_api.ts b/packages/apollo-angular-components/projects/angular/public_api.ts similarity index 100% rename from projects/angular/public_api.ts rename to packages/apollo-angular-components/projects/angular/public_api.ts diff --git a/projects/angular/test.theme.ts b/packages/apollo-angular-components/projects/angular/test.theme.ts similarity index 100% rename from projects/angular/test.theme.ts rename to packages/apollo-angular-components/projects/angular/test.theme.ts diff --git a/projects/angular/test.ts b/packages/apollo-angular-components/projects/angular/test.ts similarity index 100% rename from projects/angular/test.ts rename to packages/apollo-angular-components/projects/angular/test.ts diff --git a/projects/angular/testing/ng-package.json b/packages/apollo-angular-components/projects/angular/testing/ng-package.json similarity index 100% rename from projects/angular/testing/ng-package.json rename to packages/apollo-angular-components/projects/angular/testing/ng-package.json diff --git a/projects/angular/testing/src/component-utils/grid-testing-utils.ts b/packages/apollo-angular-components/projects/angular/testing/src/component-utils/grid-testing-utils.ts similarity index 100% rename from projects/angular/testing/src/component-utils/grid-testing-utils.ts rename to packages/apollo-angular-components/projects/angular/testing/src/component-utils/grid-testing-utils.ts diff --git a/projects/angular/testing/src/component-utils/index.ts b/packages/apollo-angular-components/projects/angular/testing/src/component-utils/index.ts similarity index 100% rename from projects/angular/testing/src/component-utils/index.ts rename to packages/apollo-angular-components/projects/angular/testing/src/component-utils/index.ts diff --git a/projects/angular/testing/src/component-utils/suggest-testing-utils.ts b/packages/apollo-angular-components/projects/angular/testing/src/component-utils/suggest-testing-utils.ts similarity index 100% rename from projects/angular/testing/src/component-utils/suggest-testing-utils.ts rename to packages/apollo-angular-components/projects/angular/testing/src/component-utils/suggest-testing-utils.ts diff --git a/projects/angular/testing/src/public_api.ts b/packages/apollo-angular-components/projects/angular/testing/src/public_api.ts similarity index 100% rename from projects/angular/testing/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/testing/src/public_api.ts diff --git a/projects/angular/testing/src/utilities/event-generator.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/event-generator.ts similarity index 100% rename from projects/angular/testing/src/utilities/event-generator.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/event-generator.ts diff --git a/projects/angular/testing/src/utilities/events/drop-event.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/events/drop-event.ts similarity index 100% rename from projects/angular/testing/src/utilities/events/drop-event.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/events/drop-event.ts diff --git a/projects/angular/testing/src/utilities/events/index.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/events/index.ts similarity index 100% rename from projects/angular/testing/src/utilities/events/index.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/events/index.ts diff --git a/projects/angular/testing/src/utilities/fake-file-list.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/fake-file-list.ts similarity index 100% rename from projects/angular/testing/src/utilities/fake-file-list.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/fake-file-list.ts diff --git a/projects/angular/testing/src/utilities/fixture-testing-utils.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/fixture-testing-utils.ts similarity index 100% rename from projects/angular/testing/src/utilities/fixture-testing-utils.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/fixture-testing-utils.ts diff --git a/projects/angular/testing/src/utilities/html-testing-utils.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/html-testing-utils.ts similarity index 100% rename from projects/angular/testing/src/utilities/html-testing-utils.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/html-testing-utils.ts diff --git a/projects/angular/testing/src/utilities/index.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/index.ts similarity index 100% rename from projects/angular/testing/src/utilities/index.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/index.ts diff --git a/projects/angular/testing/src/utilities/internal/cursor.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/internal/cursor.ts similarity index 100% rename from projects/angular/testing/src/utilities/internal/cursor.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/internal/cursor.ts diff --git a/projects/angular/testing/src/utilities/internal/index.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/internal/index.ts similarity index 100% rename from projects/angular/testing/src/utilities/internal/index.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/internal/index.ts diff --git a/projects/angular/testing/src/utilities/key.ts b/packages/apollo-angular-components/projects/angular/testing/src/utilities/key.ts similarity index 100% rename from projects/angular/testing/src/utilities/key.ts rename to packages/apollo-angular-components/projects/angular/testing/src/utilities/key.ts diff --git a/projects/angular/tsconfig.lib.json b/packages/apollo-angular-components/projects/angular/tsconfig.lib.json similarity index 100% rename from projects/angular/tsconfig.lib.json rename to packages/apollo-angular-components/projects/angular/tsconfig.lib.json diff --git a/projects/angular/tsconfig.lib.prod.json b/packages/apollo-angular-components/projects/angular/tsconfig.lib.prod.json similarity index 100% rename from projects/angular/tsconfig.lib.prod.json rename to packages/apollo-angular-components/projects/angular/tsconfig.lib.prod.json diff --git a/projects/angular/tsconfig.spec.json b/packages/apollo-angular-components/projects/angular/tsconfig.spec.json similarity index 100% rename from projects/angular/tsconfig.spec.json rename to packages/apollo-angular-components/projects/angular/tsconfig.spec.json diff --git a/projects/angular/utilities/ng-package.json b/packages/apollo-angular-components/projects/angular/utilities/ng-package.json similarity index 100% rename from projects/angular/utilities/ng-package.json rename to packages/apollo-angular-components/projects/angular/utilities/ng-package.json diff --git a/projects/angular/utilities/src/array/index.ts b/packages/apollo-angular-components/projects/angular/utilities/src/array/index.ts similarity index 100% rename from projects/angular/utilities/src/array/index.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/array/index.ts diff --git a/projects/angular/utilities/src/array/sort.spec.ts b/packages/apollo-angular-components/projects/angular/utilities/src/array/sort.spec.ts similarity index 100% rename from projects/angular/utilities/src/array/sort.spec.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/array/sort.spec.ts diff --git a/projects/angular/utilities/src/array/sort.ts b/packages/apollo-angular-components/projects/angular/utilities/src/array/sort.ts similarity index 100% rename from projects/angular/utilities/src/array/sort.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/array/sort.ts diff --git a/projects/angular/utilities/src/browser/extract-cookies.spec.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/extract-cookies.spec.ts similarity index 100% rename from projects/angular/utilities/src/browser/extract-cookies.spec.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/extract-cookies.spec.ts diff --git a/projects/angular/utilities/src/browser/extract-cookies.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/extract-cookies.ts similarity index 100% rename from projects/angular/utilities/src/browser/extract-cookies.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/extract-cookies.ts diff --git a/projects/angular/utilities/src/browser/has-support-for-prefers-color-scheme.spec.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/has-support-for-prefers-color-scheme.spec.ts similarity index 100% rename from projects/angular/utilities/src/browser/has-support-for-prefers-color-scheme.spec.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/has-support-for-prefers-color-scheme.spec.ts diff --git a/projects/angular/utilities/src/browser/has-support-for-prefers-color-scheme.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/has-support-for-prefers-color-scheme.ts similarity index 100% rename from projects/angular/utilities/src/browser/has-support-for-prefers-color-scheme.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/has-support-for-prefers-color-scheme.ts diff --git a/projects/angular/utilities/src/browser/index.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/index.ts similarity index 100% rename from projects/angular/utilities/src/browser/index.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/index.ts diff --git a/projects/angular/utilities/src/browser/is-browser-platform.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/is-browser-platform.ts similarity index 100% rename from projects/angular/utilities/src/browser/is-browser-platform.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/is-browser-platform.ts diff --git a/projects/angular/utilities/src/browser/is-edge.spec.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/is-edge.spec.ts similarity index 100% rename from projects/angular/utilities/src/browser/is-edge.spec.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/is-edge.spec.ts diff --git a/projects/angular/utilities/src/browser/is-edge.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/is-edge.ts similarity index 100% rename from projects/angular/utilities/src/browser/is-edge.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/is-edge.ts diff --git a/projects/angular/utilities/src/browser/is-internet-explorer.spec.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/is-internet-explorer.spec.ts similarity index 100% rename from projects/angular/utilities/src/browser/is-internet-explorer.spec.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/is-internet-explorer.spec.ts diff --git a/projects/angular/utilities/src/browser/is-internet-explorer.ts b/packages/apollo-angular-components/projects/angular/utilities/src/browser/is-internet-explorer.ts similarity index 100% rename from projects/angular/utilities/src/browser/is-internet-explorer.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/browser/is-internet-explorer.ts diff --git a/projects/angular/utilities/src/luxon/index.ts b/packages/apollo-angular-components/projects/angular/utilities/src/luxon/index.ts similarity index 100% rename from projects/angular/utilities/src/luxon/index.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/luxon/index.ts diff --git a/projects/angular/utilities/src/luxon/use-luxon.ts b/packages/apollo-angular-components/projects/angular/utilities/src/luxon/use-luxon.ts similarity index 100% rename from projects/angular/utilities/src/luxon/use-luxon.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/luxon/use-luxon.ts diff --git a/projects/angular/utilities/src/public_api.ts b/packages/apollo-angular-components/projects/angular/utilities/src/public_api.ts similarity index 100% rename from projects/angular/utilities/src/public_api.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/public_api.ts diff --git a/projects/angular/utilities/src/rxjs/async-of.spec.ts b/packages/apollo-angular-components/projects/angular/utilities/src/rxjs/async-of.spec.ts similarity index 100% rename from projects/angular/utilities/src/rxjs/async-of.spec.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/rxjs/async-of.spec.ts diff --git a/projects/angular/utilities/src/rxjs/async-of.ts b/packages/apollo-angular-components/projects/angular/utilities/src/rxjs/async-of.ts similarity index 100% rename from projects/angular/utilities/src/rxjs/async-of.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/rxjs/async-of.ts diff --git a/projects/angular/utilities/src/rxjs/concat-join.spec.ts b/packages/apollo-angular-components/projects/angular/utilities/src/rxjs/concat-join.spec.ts similarity index 100% rename from projects/angular/utilities/src/rxjs/concat-join.spec.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/rxjs/concat-join.spec.ts diff --git a/projects/angular/utilities/src/rxjs/concat-join.ts b/packages/apollo-angular-components/projects/angular/utilities/src/rxjs/concat-join.ts similarity index 100% rename from projects/angular/utilities/src/rxjs/concat-join.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/rxjs/concat-join.ts diff --git a/projects/angular/utilities/src/rxjs/index.ts b/packages/apollo-angular-components/projects/angular/utilities/src/rxjs/index.ts similarity index 100% rename from projects/angular/utilities/src/rxjs/index.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/rxjs/index.ts diff --git a/projects/angular/utilities/src/rxjs/internal/observed-value-of.ts b/packages/apollo-angular-components/projects/angular/utilities/src/rxjs/internal/observed-value-of.ts similarity index 100% rename from projects/angular/utilities/src/rxjs/internal/observed-value-of.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/rxjs/internal/observed-value-of.ts diff --git a/projects/angular/utilities/src/rxjs/repeat-stream.spec.ts b/packages/apollo-angular-components/projects/angular/utilities/src/rxjs/repeat-stream.spec.ts similarity index 100% rename from projects/angular/utilities/src/rxjs/repeat-stream.spec.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/rxjs/repeat-stream.spec.ts diff --git a/projects/angular/utilities/src/rxjs/repeat-stream.ts b/packages/apollo-angular-components/projects/angular/utilities/src/rxjs/repeat-stream.ts similarity index 100% rename from projects/angular/utilities/src/rxjs/repeat-stream.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/rxjs/repeat-stream.ts diff --git a/projects/angular/utilities/src/string/file-extension.ts b/packages/apollo-angular-components/projects/angular/utilities/src/string/file-extension.ts similarity index 100% rename from projects/angular/utilities/src/string/file-extension.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/string/file-extension.ts diff --git a/projects/angular/utilities/src/string/identifier.ts b/packages/apollo-angular-components/projects/angular/utilities/src/string/identifier.ts similarity index 100% rename from projects/angular/utilities/src/string/identifier.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/string/identifier.ts diff --git a/projects/angular/utilities/src/string/index.ts b/packages/apollo-angular-components/projects/angular/utilities/src/string/index.ts similarity index 100% rename from projects/angular/utilities/src/string/index.ts rename to packages/apollo-angular-components/projects/angular/utilities/src/string/index.ts diff --git a/projects/playground/.eslintrc.json b/packages/apollo-angular-components/projects/playground/.eslintrc.json similarity index 100% rename from projects/playground/.eslintrc.json rename to packages/apollo-angular-components/projects/playground/.eslintrc.json diff --git a/projects/playground/karma.conf.js b/packages/apollo-angular-components/projects/playground/karma.conf.js similarity index 100% rename from projects/playground/karma.conf.js rename to packages/apollo-angular-components/projects/playground/karma.conf.js diff --git a/projects/playground/src/app/app-routing.module.ts b/packages/apollo-angular-components/projects/playground/src/app/app-routing.module.ts similarity index 100% rename from projects/playground/src/app/app-routing.module.ts rename to packages/apollo-angular-components/projects/playground/src/app/app-routing.module.ts diff --git a/projects/playground/src/app/app.component.html b/packages/apollo-angular-components/projects/playground/src/app/app.component.html similarity index 100% rename from projects/playground/src/app/app.component.html rename to packages/apollo-angular-components/projects/playground/src/app/app.component.html diff --git a/projects/playground/src/app/app.component.scss b/packages/apollo-angular-components/projects/playground/src/app/app.component.scss similarity index 100% rename from projects/playground/src/app/app.component.scss rename to packages/apollo-angular-components/projects/playground/src/app/app.component.scss diff --git a/projects/playground/src/app/app.component.ts b/packages/apollo-angular-components/projects/playground/src/app/app.component.ts similarity index 100% rename from projects/playground/src/app/app.component.ts rename to packages/apollo-angular-components/projects/playground/src/app/app.component.ts diff --git a/projects/playground/src/app/app.module.ts b/packages/apollo-angular-components/projects/playground/src/app/app.module.ts similarity index 100% rename from projects/playground/src/app/app.module.ts rename to packages/apollo-angular-components/projects/playground/src/app/app.module.ts diff --git a/packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.module.ts b/packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.module.ts new file mode 100644 index 000000000..858a152ed --- /dev/null +++ b/packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.module.ts @@ -0,0 +1,18 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { FilePickerPageComponent } from 'projects/playground/src/app/pages/file-picker/file-picker.page'; +import { UiFilePickerModule } from 'projects/angular/components/ui-file-picker/src/ui-file-picker.module'; +import { PushModule } from '@ngrx/component'; + +@NgModule({ + declarations: [ + FilePickerPageComponent, + ], + imports: [ + CommonModule, + UiFilePickerModule, + PushModule, + ], +}) +export class FilePickerModule { } diff --git a/projects/playground/src/app/pages/file-picker/file-picker.page.html b/packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.page.html similarity index 54% rename from projects/playground/src/app/pages/file-picker/file-picker.page.html rename to packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.page.html index 9256af2c3..344d935ed 100644 --- a/projects/playground/src/app/pages/file-picker/file-picker.page.html +++ b/packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.page.html @@ -8,28 +8,24 @@ sortBy="-name"> File Picker with hideSummaryAfterFilesSelection = true (will emit files but will not show grid of files) -
{{hiddenSummaryFiles$ | async}}
+
{{hiddenSummaryFiles$ | ngrxPush}}
File Picker disabled -Input File Drop Zone - - Click to upload or drag and drop - - -
-
Drop zone without input
- -
- -
- Dropped files: {{files}} +Drop zone with custom wrapper +
+
+ Click to upload or drag and drop +
+ + +
+ Dropped files: {{files}} +
diff --git a/packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.page.scss b/packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.page.scss new file mode 100644 index 000000000..8549ed7e9 --- /dev/null +++ b/packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.page.scss @@ -0,0 +1,13 @@ +.custom-drop-zone { + display: flex; + flex-direction: column; + max-height: 100px; + border: 1px solid; + position: relative; + overflow: auto; + + div { + display: flex; + justify-content: center; + } +} diff --git a/projects/playground/src/app/pages/file-picker/file-picker.page.ts b/packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.page.ts similarity index 100% rename from projects/playground/src/app/pages/file-picker/file-picker.page.ts rename to packages/apollo-angular-components/projects/playground/src/app/pages/file-picker/file-picker.page.ts diff --git a/projects/playground/src/app/pages/grid/component/grid.component.html b/packages/apollo-angular-components/projects/playground/src/app/pages/grid/component/grid.component.html similarity index 96% rename from projects/playground/src/app/pages/grid/component/grid.component.html rename to packages/apollo-angular-components/projects/playground/src/app/pages/grid/component/grid.component.html index db330e770..05aca9a00 100644 --- a/projects/playground/src/app/pages/grid/component/grid.component.html +++ b/packages/apollo-angular-components/projects/playground/src/app/pages/grid/component/grid.component.html @@ -2,7 +2,6 @@ [collapsibleFilters]="inputs.collapsibleFilters ?? false" [collapseFiltersCount]="inputs.collapseFiltersCount" [isProjected]="inputs.isProjected" - [hasHighDensity]="inputs.hasHighDensity" [loading]="inputs.loading" [disabled]="inputs.disabled" [selectable]="inputs.selectable" @@ -18,9 +17,7 @@ [expandMode]="'preserve'" [resizeStrategy]="inputs.isScrollable ? scrollableGridStrategy : immediateNeighbourHaltStrategy" [customFilterValue]="inputs.customFilter ? [{property: 'parity', method: 'eq', value: 'odd'}] : []" - [allowHighlight]="inputs.allowHighlight" - [swapFilterContainers]="inputs.swapFilterContainers" - [selectablePageIndex]="inputs.selectablePageIndex"> + [allowHighlight]="inputs.allowHighlight"> -
-
- - - - {{entry.name}} - - - - {{getFileExtension(entry.name)}} - - - - {{entry.size | uiFileSize | async}} - - - - - - - - -
- - -
- -
-
- {{intl.clickUploadDragDrop$ | async}} -
- {{secondaryMessage}} -
-
- -
- {{ state.fileError }} - diff --git a/projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.spec.ts b/projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.spec.ts deleted file mode 100644 index a0bd267fb..000000000 --- a/projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.spec.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { - byTestId, - createComponentFactory, - Spectator, -} from '@ngneat/spectator'; -import { - a11y, - axe, -} from 'projects/angular/axe-helper'; - -import { UiFileDropZoneDirective } from '@uipath/angular/directives/ui-file-drop-zone'; -import { UiInputFileDropZoneComponent as SuT } from './ui-input-file-drop-zone.component'; - -describe('UiFileDropZoneComponent:', () => { - let spectator: Spectator; - let sut: SuT; - - const filesReceivedOutput = jasmine.createSpy(); - const fileErrorOutput = jasmine.createSpy(); - - const createComponent = createComponentFactory({ - component: SuT, - detectChanges: false, - overrideComponents: [ [ - SuT, { - remove: { hostDirectives: [ { - directive: UiFileDropZoneDirective, - inputs: [ 'sortBy', 'accept', 'disabled: disableDropZone' ], - // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property - outputs: [ 'filesReceived', 'filesLoading', 'fileError' ], - } ] }, - }, - ] ], - }); - - beforeEach(() => { - spectator = createComponent(); - - spectator.detectChanges(); - sut = spectator.component; - - sut.filesReceived.subscribe(filesReceivedOutput); - sut.fileError.subscribe(fileErrorOutput); - }); - - describe('self', () => { - - it('should create', () => { - spectator.detectChanges(); - expect(sut).toBeTruthy(); - }); - - a11y.suite((runOptions) => { - a11y.it('should have no violations', async () => { - expect(await axe(spectator.fixture.nativeElement, runOptions)).toHaveNoViolations(); - }); - }); - }); - - it('should emit files that were browsed by clicking the input', () => { - const file = new File([], 'test-file.pdf'); - Object.defineProperty(file, 'size', { value: 1024 }); - - mockChooseFileFromFilePicker([ file ]); - - expect(filesReceivedOutput).toHaveBeenCalledTimes(1); - expect(filesReceivedOutput).toHaveBeenCalledWith([ file ]); - }); - - it('should clear input value after emitting files', () => { - const file = new File([], 'test-file.pdf'); - Object.defineProperty(file, 'size', { value: 1024 }); - - mockChooseFileFromFilePicker([ file ]); - - const input = spectator.query(byTestId('file-input')) as HTMLInputElement; - expect(input.value).toBeFalsy(); - }); - - const mockChooseFileFromFilePicker = (files: File[]) => { - const input = spectator.query(byTestId('file-input')) as HTMLInputElement; - - const dataTransfer = new DataTransfer(); - files.forEach(file => dataTransfer.items.add(file)); - input.files = dataTransfer.files; - - input.dispatchEvent(new InputEvent('change')); - }; -}); diff --git a/projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.ts b/projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.ts deleted file mode 100644 index b1ad67285..000000000 --- a/projects/angular/components/ui-file-picker/src/ui-input-file-drop-zone/ui-input-file-drop-zone.component.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - EventEmitter, - Input, - OnDestroy, - Output, - ViewChild, -} from '@angular/core'; -import { - FileReaderError, - UiFileDropZoneDirective, - sortAndFilter, -} from '@uipath/angular/directives/ui-file-drop-zone'; -import { Subject } from 'rxjs'; - -@Component({ - selector: 'ui-input-file-drop-zone', - templateUrl: './ui-input-file-drop-zone.component.html', - styleUrls: [ './ui-input-file-drop-zone.component.scss' ], - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: true, - imports: [ CommonModule ], - hostDirectives: [{ - directive: UiFileDropZoneDirective, - inputs: [ 'sortBy', 'accept', 'disabled: disableDropZone' ], - // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property - outputs: [ 'filesReceived', 'filesLoading', 'fileError' ], - }], -}) -export class UiInputFileDropZoneComponent implements OnDestroy { - @Input() single?: boolean; - // if not provided, input is removed from tab order and aria is disabled - @Input() ariaLabel?: string; - @Input() disabled?: boolean; - // key of File and '-' prefix for descending sort - @Input() sortBy?: string; - // comma-separated extension list, example: '.jpg,.png,.pdf' - @Input() set accept(value: string | undefined) { - if (value) { - this._accept = value.split(',') - .map(v => v.trim().toLowerCase()) - .filter(v => !!v); - } - } - // disable UiFileDropZoneDirective, [disabled] component input will not also disable the directive - @Input() disableDropZone = false; - - @Output() filesReceived = new EventEmitter(); - @Output() filesLoading = new EventEmitter(); - @Output() fileError = new EventEmitter(); - - @ViewChild('uploadInput', { - read: ElementRef, - static: false, - }) inputElement?: ElementRef; - - protected _accept: string[] = []; - private _destroyed$ = new Subject(); - - ngOnDestroy(): void { - this._destroyed$.next(); - this._destroyed$.complete(); - } - - click() { - this.inputElement?.nativeElement.click(); - } - - onBrowseFiles($event: Event) { - const filesReceived = ($event.target as HTMLInputElement).files; - if (!filesReceived) { - return; - } - - this.filesLoading.next(true); - const unsortedFiles: File[] = []; - for (let i = 0; i < filesReceived.length; i++) { - const file = filesReceived.item(i); - if (file?.size) { - unsortedFiles.push(file); - } - } - - const sortedFiles = sortAndFilter(unsortedFiles, this.sortBy, this._accept); - this._emitFiles(sortedFiles); - } - - protected _emitFiles(files: File[]) { - this.fileError.emit(null); - this.filesReceived.emit(files); - this.filesLoading.emit(false); - // force change callback on input to get called - // for consecutive selections of the same files - if (this.inputElement) { - this.inputElement.nativeElement.value = null; - } - } - -} diff --git a/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-custom-search.directive.ts b/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-custom-search.directive.ts deleted file mode 100644 index f8e7141c3..000000000 --- a/projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-custom-search.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - ContentChild, - Directive, - TemplateRef, -} from '@angular/core'; - -@Directive({ - selector: '[uiGridCustomSearch], ui-grid-custom-search', -}) -export class UiGridCustomSearchDirective { - @ContentChild(TemplateRef, { - static: true, - }) - html?: TemplateRef; -} diff --git a/projects/angular/components/ui-grid/src/filters/ui-grid-dropdown-filter.directive.ts b/projects/angular/components/ui-grid/src/filters/ui-grid-dropdown-filter.directive.ts deleted file mode 100644 index bd94460a8..000000000 --- a/projects/angular/components/ui-grid/src/filters/ui-grid-dropdown-filter.directive.ts +++ /dev/null @@ -1,206 +0,0 @@ -import { - isArray, - isEqual, -} from 'lodash-es'; -import { - BehaviorSubject, - Subject, - takeUntil, -} from 'rxjs'; - -import { - Directive, - inject, - Input, - OnDestroy, - OnInit, -} from '@angular/core'; -import { ISuggestValueData } from '@uipath/angular/components/ui-suggest'; - -import { UiGridIntl } from '../ui-grid.intl'; -import { UiGridFilterDirective } from './ui-grid-filter'; - -/** - * Dropdown option schema. - * - * @export - */ -export interface IDropdownOption { - /** - * The current dropdown value. - * - */ - value: string | number | boolean; - /** - * The dropdown option label. - * - */ - label: string; - /** - * The dropdown translation key, used by the `intl` service. - * - */ - translationKey?: string; -} - -export type FilterDropdownPossibleOption = IDropdownOption | IDropdownOption[] | undefined; -export type ISuggestDropdownValueData = ISuggestValueData; - -/** - * The dropdown filter definition directive. - * - * @export - */ -@Directive({ - selector: '[uiGridDropdownFilter], ui-grid-dropdown-filter', -}) -export class UiGridDropdownFilterDirective extends UiGridFilterDirective implements OnDestroy, OnInit { - /** - * The dropdown items. - * - */ - @Input() - set items(value: IDropdownOption[] | null) { - this._items = value ?? []; - this.suggestItems = this._items.map((item, idx) => ({ - id: idx + 1, - text: this.intl.translateDropdownOption(item), - data: item.value, - })); - this._addNoFilterOption(); - } - get items() { return this._items!; } - - /** - * If true multiple values can be selected in the dropdown filter. - * - */ - @Input() - set multi(value: boolean) { - this._multi = value; - this.updateValue(this.value); - } - get multi() { - return this._multi; - } - - /** - * If it should display the `All` option. - * - */ - @Input() - showAllOption = true; - - /** - * The current dropdown option. - * - */ - @Input() - set value(v: FilterDropdownPossibleOption) { - this.updateValue(v); - } - get value() { - return this._value!; - } - - /** - * The empty dropdown state. - * - */ - @Input() - emptyStateValue?: IDropdownOption['value']; - /** - * Wether the filter should be rendered in the grid. - * - */ - @Input() - get visible() { return this.visible$.value; } - set visible(visible: boolean) { this.visible$.next(visible); } - - /** - * @ignore - */ - visible$ = new BehaviorSubject(true); - intl = inject(UiGridIntl, { optional: true }) ?? new UiGridIntl(); - suggestValue: ISuggestDropdownValueData[] = []; - - /** - * Dropdown items expressed as ISuggestDropdownValueData - */ - suggestItems: ISuggestDropdownValueData[] = []; - - private _items: IDropdownOption[] = []; - private _value: FilterDropdownPossibleOption; - private _multi = false; - private _destroy$ = new Subject(); - - ngOnInit() { - this._addNoFilterOption(); - - this.intl.changes.pipe( - takeUntil(this._destroy$), - ).subscribe(() => { - this.items = this._items; - this.suggestValue = this.suggestValue.map(suggestValue => ({ - ...suggestValue, - text: this.intl.translateDropdownOption(this.findDropDownOptionBySuggestValue(suggestValue)!), - })); - }); - } - - /** - * Updates the dropdown value. - * - */ - updateValue(value?: FilterDropdownPossibleOption) { - if (this.multi && !isArray(value) && !!value) { - value = [value]; - } - - this._value = value; - this.updateSuggestValue(value); - } - - updateSuggestValue(value?: FilterDropdownPossibleOption) { - if (value == null) { - this.suggestValue = []; - return; - } - - this.suggestValue = this.suggestItems.filter(item => isArray(value) && value.some(s => s.value === item?.data) - || (!isArray(value) && value.value === item?.data)); - } - - /** - * @ignore - */ - ngOnDestroy() { - super.ngOnDestroy(); - this.filterChange.complete(); - this._destroy$.complete(); - this._destroy$.next(); - } - - findDropDownOptionBySuggestValue(suggestValue: ISuggestDropdownValueData) { - return this._items.find(item => isEqual(item.value, suggestValue.data)); - } - - get hasValue() { - return this.value != null && ((!isArray(this.value) && this.value?.value !== undefined) || - (isArray(this.value) && this.value.length)); - } - - private _addNoFilterOption() { - const allOption = { - id: -1, - text: this.intl.noFilterPlaceholder, - }; - if (!this.multi && this.showAllOption) { - if (this.suggestItems[0]?.id !== allOption.id) { - this.suggestItems = [allOption, ...this.suggestItems]; - } - } else { - this.suggestItems = this.suggestItems.filter(item => item.id !== allOption.id); - } - } -} diff --git a/projects/angular/components/ui-suggest/src/models/maxSelectionConfig.ts b/projects/angular/components/ui-suggest/src/models/maxSelectionConfig.ts deleted file mode 100644 index 3c360a0e5..000000000 --- a/projects/angular/components/ui-suggest/src/models/maxSelectionConfig.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Suggest max selection config type definition. - * count: Max number of selected items. - * itemTooltip: Tooltip to be displayed on each unselected item. - * footerMessage: Message to be displayed in the dropdown footer. - * - * @export - */ -export type SuggestMaxSelectionConfig = { - count: number; - itemTooltip: string; - footerMessage: string; -}; diff --git a/projects/angular/directives/ui-file-drop-zone/src/file-drop-zone.utils.ts b/projects/angular/directives/ui-file-drop-zone/src/file-drop-zone.utils.ts deleted file mode 100644 index 9432aa2c0..000000000 --- a/projects/angular/directives/ui-file-drop-zone/src/file-drop-zone.utils.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { sort } from '@uipath/angular/utilities'; - -export const sortAndFilter = (files: File[], sortBy: string | undefined, accept: string[]) => { - files = files.filter(f => isAcceptedExtension(f.name, accept)); - return sortBy ? sort(files, sortBy, false) : files; -}; - -const isAcceptedExtension = (fileName: string, accept: string[]) => { - if (!accept.length) { - return true; - } - - const fileExtension = getFileExtension(fileName); - return accept.includes(fileExtension); -}; - -const getFileExtension = (fileName: string) => { - const fileNameParts = fileName.split('.'); - const extension = fileNameParts.length > 1 ? fileNameParts.slice(-1)[0] : ''; - return `.${extension.toLowerCase()}`; -}; - diff --git a/projects/angular/directives/ui-file-drop-zone/src/public_api.ts b/projects/angular/directives/ui-file-drop-zone/src/public_api.ts deleted file mode 100644 index 61d42cc11..000000000 --- a/projects/angular/directives/ui-file-drop-zone/src/public_api.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { sortAndFilter } from './file-drop-zone.utils'; -export { - FileReaderService, - FileReaderError, -} from './file-reader.service'; -export { UiFileDropZoneDirective } from './ui-file-drop-zone.directive'; diff --git a/projects/angular/directives/ui-file-drop-zone/src/ui-file-drop-zone.directive.spec.ts b/projects/angular/directives/ui-file-drop-zone/src/ui-file-drop-zone.directive.spec.ts deleted file mode 100644 index ca5e027e6..000000000 --- a/projects/angular/directives/ui-file-drop-zone/src/ui-file-drop-zone.directive.spec.ts +++ /dev/null @@ -1,178 +0,0 @@ -import { - SpectatorDirective, SpyObject, byTestId, createDirectiveFactory, createMouseEvent, -} from '@ngneat/spectator'; -import { Subject } from 'rxjs'; -import { FileReaderService } from './file-reader.service'; -import { UiFileDropZoneDirective as SuT } from './ui-file-drop-zone.directive'; - -describe('UiFileDropZoneDirective', () => { - let spectator: SpectatorDirective; - let sut: SuT; - - const filesMock$ = new Subject(); - const errorMock$ = new Subject(); - const fileReaderService: SpyObject = jasmine.createSpyObj( - 'FileReaderService', [ 'processDroppedItems' ]); - Object.defineProperties(fileReaderService, { - files$: { - get: () => filesMock$, - set: jasmine.createSpy(), - }, - error$: { - get: () => errorMock$, - set: jasmine.createSpy(), - }, - }); - - const filesReceivedOutput = jasmine.createSpy(); - const fileErrorOutput = jasmine.createSpy(); - const filesLoadingOutput = jasmine.createSpy(); - - const createDirective = createDirectiveFactory({ - directive: SuT, - detectChanges: false, - directiveProviders: [{ - provide: FileReaderService, - useValue: fileReaderService, - }], - template: ` -
- Custom file drop zone - -
- `, - }); - - const createMockFiles = (ext = '.pdf') => { - const files: File[] = []; - for (let i = 0; i < 5; i++) { - // name the files from 5 to 1 so we can test the sorting - files.push(new File([], (5 - i) + ext)); - } - return files; - }; - - beforeEach(() => { - spectator = createDirective(); - - spectator.detectChanges(); - sut = spectator.directive; - - sut.filesReceived.subscribe(filesReceivedOutput); - sut.fileError.subscribe(fileErrorOutput); - sut.filesLoading.subscribe(filesLoadingOutput); - }); - - describe('self', () => { - it('should create', () => { - expect(sut).toBeTruthy(); - }); - }); - - describe('dragging and dropping files', () => { - it('should not add class to drop zone when entering the drag zone', () => { - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'dragenter', 0, 0, getDragEventWithDataTransfer('dragover')); - spectator.detectChanges(); - - expect(spectator.query(byTestId('custom-drop-zone'))).not.toHaveClass('ui-file-drop-zone-highlight'); - }); - - it('should not add class to drop zone when entering the drag zone with data that does not include files', () => { - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'dragenter'); - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'dragover', 0, 0, getDragEventWithDataTransfer('dragover', false)); - spectator.detectChanges(); - - expect(spectator.query(byTestId('custom-drop-zone'))).not.toHaveClass('ui-file-drop-zone-highlight'); - }); - - it('should not remove highlight class when dragging over an element inside the dropzone', () => { - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'dragenter'); - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'dragover', 0, 0, getDragEventWithDataTransfer('dragover')); - spectator.dispatchMouseEvent('button', 'dragenter'); - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'dragleave'); - spectator.detectChanges(); - - expect(spectator.query(byTestId('custom-drop-zone'))).toHaveClass('ui-file-drop-zone-highlight'); - }); - - it('should remove highlight when dropping files', () => { - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'dragenter'); - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'dragover', 0, 0, getDragEventWithDataTransfer('dragover')); - expect(spectator.query(byTestId('custom-drop-zone'))).toHaveClass('ui-file-drop-zone-highlight'); - - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'drop', 0, 0, getDragEventWithDataTransfer('drop')); - spectator.detectChanges(); - - expect(spectator.query(byTestId('custom-drop-zone'))).not.toHaveClass('ui-file-drop-zone-highlight'); - }); - - it('should call service with files that were dropped', () => { - const mouseEvent = getDragEventWithDataTransfer('drop'); - - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'drop', undefined, undefined, mouseEvent); - spectator.detectChanges(); - - expect(fileReaderService.processDroppedItems).toHaveBeenCalledWith(mouseEvent); - }); - - it('should emit on filesLoading', () => { - const mouseEvent = createMouseEvent('drop'); - - spectator.dispatchMouseEvent(byTestId('custom-drop-zone'), 'drop', undefined, undefined, mouseEvent); - spectator.detectChanges(); - - expect(filesLoadingOutput).toHaveBeenCalledWith(true); - - filesMock$.next(createMockFiles()); - expect(filesLoadingOutput).toHaveBeenCalledWith(false); - }); - }); - - describe('files returned from the service', () => { - it('should sort the files if sortBy input is present', () => { - const files = createMockFiles(''); - const sortBy = 'name'; - const sortedFiles = [ '1', '2', '3', '4', '5' ].map(n => new File([], n)); - - spectator.setInput({ sortBy }); - filesMock$.next(files); - - spectator.detectChanges(); - - expect(filesReceivedOutput).toHaveBeenCalledWith(sortedFiles); - }); - - it('should filter files by extension if accept input is present', () => { - const accept = '.png'; - const acceptedFiles = createMockFiles(accept); - const files = createMockFiles().concat(acceptedFiles); - - spectator.setInput({ accept }); - filesMock$.next(files); - - spectator.detectChanges(); - - expect(filesReceivedOutput).toHaveBeenCalledWith(acceptedFiles); - }); - - it('should emit error returned from the service', () => { - const errorText = 'Test error'; - errorMock$.next(errorText); - - spectator.detectChanges(); - - expect(fileErrorOutput).toHaveBeenCalledWith(errorText); - }); - }); -}); - -const getDragEventWithDataTransfer = (type: 'dragover' | 'drop', containsFiles = true) => { - const dataTransfer = new DataTransfer(); - if (containsFiles) { - const file = new File([''], 'file.jog'); - dataTransfer.items.add(file); - } - return new DragEvent(type, { dataTransfer }); -}; diff --git a/projects/angular/directives/ui-file-drop-zone/src/ui-file-drop-zone.directive.ts b/projects/angular/directives/ui-file-drop-zone/src/ui-file-drop-zone.directive.ts deleted file mode 100644 index 561ca2bcc..000000000 --- a/projects/angular/directives/ui-file-drop-zone/src/ui-file-drop-zone.directive.ts +++ /dev/null @@ -1,149 +0,0 @@ -import { - AfterViewInit, - Directive, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, -} from '@angular/core'; -import { - Subject, map, takeUntil, -} from 'rxjs'; -import { sortAndFilter } from './file-drop-zone.utils'; -import { - FileReaderError, - FileReaderService, -} from './file-reader.service'; - -// The highlight class gets added to the host HTML element, -// so to display properly the component containing it -// should have that class defined in its styles. -const DROP_ZONE_HIGHLIGHT_CLASS = 'ui-file-drop-zone-highlight'; - -/** - * A directive that turns any html element into a file drop zone - * - does not use a dynamically created input element and only reacts on file drag and drop - * - adds a css class to the host element when files are being dragged over - * - * @export - */ -@Directive({ - selector: '[uiFileDropZone]', - providers: [ FileReaderService ], - standalone: true, -}) -export class UiFileDropZoneDirective implements OnInit, AfterViewInit, OnDestroy { - @Input() disabled?: boolean; - // key of File and '-' prefix for descending sort - @Input() sortBy?: string; - // comma-separated extension list, example: '.jpg,.png,.pdf' - @Input() set accept(value: string | undefined) { - if (value) { - this._accept = value.split(',') - .map(v => v.trim().toLowerCase()) - .filter(v => !!v); - } - } - - @Output() filesReceived = new EventEmitter(); - @Output() filesLoading = new EventEmitter(); - @Output() fileError = new EventEmitter(); - - private _accept: string[] = []; - private _dragCount = 0; - private _dropZone?: HTMLElement; - private _destroyed$ = new Subject(); - - constructor( - private readonly _element: ElementRef, - protected readonly _fileReaderService: FileReaderService, - ) { } - - @HostListener('drop', ['$event']) - drop(e: DragEvent) { - if (this.disabled) { - return; - } - e.stopPropagation(); - e.preventDefault(); - this._dragCount -= 1; - const dragDataContainsFiles = this._dragEventContainsFiles(e); - if (dragDataContainsFiles) { - this._clearDropZoneHighlight(); - this.filesLoading.next(true); - this._fileReaderService.processDroppedItems(e); - } - } - - @HostListener('dragover', ['$event']) - dragover(e: DragEvent) { - // preventDefault is needed to enable drop event - e.preventDefault(); - const dragDataContainsFiles = this._dragEventContainsFiles(e); - if (this._dragCount > 0 && dragDataContainsFiles) { - this._highlightDropZone(); - } - } - - @HostListener('dragenter') - dragenter() { - if (!this.disabled) { - this._dragCount += 1; - } - } - - @HostListener('dragleave') - dragleave() { - if (this.disabled) { - return; - } - this._dragCount -= 1; - if (this._dragCount === 0) { - this._clearDropZoneHighlight(); - } - } - - ngOnInit(): void { - this._fileReaderService.files$ - .pipe( - map(unsortedFiles => sortAndFilter(unsortedFiles, this.sortBy, this._accept)), - takeUntil(this._destroyed$), - ) - .subscribe(files => this._emitFiles(files)); - - this._fileReaderService.error$ - .pipe( - takeUntil(this._destroyed$), - ) - .subscribe(err => this.fileError.emit(err)); - } - - ngAfterViewInit() { - this._dropZone = this._element.nativeElement; - } - - ngOnDestroy(): void { - this._destroyed$.next(); - this._destroyed$.complete(); - } - - protected _emitFiles(files: File[]) { - this.fileError.emit(null); - this.filesReceived.emit(files); - this.filesLoading.emit(false); - } - - private _highlightDropZone() { - if (!this._dropZone || this._dropZone.classList.contains(DROP_ZONE_HIGHLIGHT_CLASS)) { - return; - } - this._dropZone.classList.add(DROP_ZONE_HIGHLIGHT_CLASS); - } - - private _clearDropZoneHighlight() { - if (!this._dropZone) { - return; - } - this._dropZone.classList.remove(DROP_ZONE_HIGHLIGHT_CLASS); - } - - private _dragEventContainsFiles(e: DragEvent) { - return e.dataTransfer?.types.includes('Files'); - } -} diff --git a/projects/playground/src/app/pages/file-picker/file-picker.module.ts b/projects/playground/src/app/pages/file-picker/file-picker.module.ts deleted file mode 100644 index 180de7a0b..000000000 --- a/projects/playground/src/app/pages/file-picker/file-picker.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; - -import { - UiFilePickerComponent, UiInputFileDropZoneComponent, -} from '@uipath/angular/components/ui-file-picker'; -import { UiFileDropZoneDirective } from '@uipath/angular/directives/ui-file-drop-zone'; - -import { FilePickerPageComponent } from './file-picker.page'; - -@NgModule({ - declarations: [ - FilePickerPageComponent, - ], - imports: [ - CommonModule, - - UiFileDropZoneDirective, - UiFilePickerComponent, - UiInputFileDropZoneComponent, - ], -}) -export class FilePickerModule { } diff --git a/projects/playground/src/app/pages/file-picker/file-picker.page.scss b/projects/playground/src/app/pages/file-picker/file-picker.page.scss deleted file mode 100644 index 65443aacd..000000000 --- a/projects/playground/src/app/pages/file-picker/file-picker.page.scss +++ /dev/null @@ -1,29 +0,0 @@ -:host { - display: flex; - flex-direction: column; - gap: 10px; -} - -.custom-drop-zone { - display: flex; - flex-direction: column; - max-height: 100px; - border: 1px solid; - position: relative; - overflow: auto; - - div { - display: flex; - justify-content: center; - } -} - -.drop-zone { - border-radius: 3px; - border-width: 2px; - border-style: dashed; - - &.ui-file-drop-zone-highlight { - border-style: solid; - } -}