diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 1be6387a87..562dcd9697 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -29,6 +29,7 @@ /libs/barista-components/formatters/** @ffriedl89 @rowa-audil /libs/barista-components/highlight/** @lukasholzer @thomaspink /libs/barista-components/icon/** @thomaspink +/libs/barista-components/indicator/** @ffriedl89 @rowa-audil /libs/barista-components/info-group/** @ffriedl89 @NinaKammerlander /libs/barista-components/inline-editor/** @thomaspink /libs/barista-components/input/** @thomaspink @@ -126,6 +127,7 @@ /apps/dev/src/formatters/** @ffriedl89 @rowa-audil /apps/dev/src/highlight/** @lukasholzer @thomaspink /apps/dev/src/icon/** @thomaspink +/apps/dev/src/indicator/** @ffriedl89 @rowa-audil /apps/dev/src/info-group/** @ffriedl89 @NinaKammerlander /apps/dev/src/inline-editor/** @thomaspink /apps/dev/src/input/** @thomaspink @@ -197,6 +199,7 @@ /libs/examples/src/formatters/** @ffriedl89 @rowa-audil /libs/examples/src/highlight/** @lukasholzer @thomaspink /libs/examples/src/icon/** @thomaspink +/libs/examples/src/indicator/** @ffriedl89 @rowa-audil /libs/examples/src/info-group/** @ffriedl89 @NinaKammerlander /libs/examples/src/inline-editor/** @thomaspink /libs/examples/src/input/** @thomaspink diff --git a/angular.json b/angular.json index 58a2309737..1d86e9586e 100644 --- a/angular.json +++ b/angular.json @@ -2135,6 +2135,46 @@ }, "schematics": {} }, + "indicator": { + "projectType": "library", + "root": "libs/barista-components/indicator", + "sourceRoot": "libs/barista-components/indicator/src", + "prefix": "dt", + "architect": { + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "libs/barista-components/indicator/tsconfig.lib.json", + "libs/barista-components/indicator/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**", + "!libs/barista-components/indicator/**" + ] + } + }, + "lint-styles": { + "builder": "./dist/libs/workspace:stylelint", + "options": { + "stylelintConfig": ".stylelintrc", + "reportFile": "dist/stylelint/report.xml", + "exclude": ["**/node_modules/**"], + "files": ["libs/barista-components/indicator/**/*.scss"] + } + }, + "test": { + "builder": "@nrwl/jest:jest", + "options": { + "jestConfig": "libs/barista-components/indicator/jest.config.js", + "tsConfig": "libs/barista-components/indicator/tsconfig.spec.json", + "setupFile": "libs/barista-components/indicator/src/test-setup.ts", + "passWithNoTests": true + } + } + }, + "schematics": {} + }, "info-group": { "projectType": "library", "root": "libs/barista-components/info-group", diff --git a/apps/dev/src/app.module.ts b/apps/dev/src/app.module.ts index 02f95c4d0c..671a0226c5 100644 --- a/apps/dev/src/app.module.ts +++ b/apps/dev/src/app.module.ts @@ -56,6 +56,7 @@ import { FormFieldDemo } from './form-field/form-field-demo.component'; import { FormattersDemo } from './formatters/formatters-demo.component'; import { HighlightDemo } from './highlight/highlight-demo.component'; import { IconDemo } from './icon/icon-demo.component'; +import { IndicatorDemo } from './indicator/indicator-demo.component'; import { InfoGroupDemo } from './info-group/info-group-demo.component'; import { InlineEditorDemo } from './inline-editor/inline-editor-demo.component'; import { InputDemo } from './input/input-demo.component'; @@ -156,6 +157,7 @@ export class NoopRouteComponent {} BarIndicatorDemo, TreeTableDemo, ToggleButtonGroupDemo, + IndicatorDemo, InfoGroupDemo, HighlightDemo, ConsumptionDemo, diff --git a/apps/dev/src/devapp-routing.module.ts b/apps/dev/src/devapp-routing.module.ts index 0922936a94..e33e16f29e 100644 --- a/apps/dev/src/devapp-routing.module.ts +++ b/apps/dev/src/devapp-routing.module.ts @@ -44,6 +44,7 @@ import { FormFieldDemo } from './form-field/form-field-demo.component'; import { FormattersDemo } from './formatters/formatters-demo.component'; import { HighlightDemo } from './highlight/highlight-demo.component'; import { IconDemo } from './icon/icon-demo.component'; +import { IndicatorDemo } from './indicator/indicator-demo.component'; import { InfoGroupDemo } from './info-group/info-group-demo.component'; import { InlineEditorDemo } from './inline-editor/inline-editor-demo.component'; import { InputDemo } from './input/input-demo.component'; @@ -104,6 +105,7 @@ const routes: Routes = [ { path: 'formatters', component: FormattersDemo }, { path: 'highlight', component: HighlightDemo }, { path: 'icon', component: IconDemo }, + { path: 'indicator', component: IndicatorDemo }, { path: 'info-group', component: InfoGroupDemo }, { path: 'inline-editor', component: InlineEditorDemo }, { path: 'input', component: InputDemo }, diff --git a/apps/dev/src/devapp.component.ts b/apps/dev/src/devapp.component.ts index f976b3d2f8..6dba1e2ac3 100644 --- a/apps/dev/src/devapp.component.ts +++ b/apps/dev/src/devapp.component.ts @@ -70,6 +70,7 @@ export class DevApp implements AfterContentInit, OnDestroy { { name: 'Formatters', route: '/formatters' }, { name: 'Highlight', route: '/highlight' }, { name: 'Icon', route: '/icon' }, + { name: 'Indicator', route: '/indicator' }, { name: 'Info-group', route: '/info-group' }, { name: 'Inline-editor', route: '/inline-editor' }, { name: 'Input', route: '/input' }, diff --git a/apps/dev/src/dt-components.module.ts b/apps/dev/src/dt-components.module.ts index 2c6eaa0608..12b83c9179 100644 --- a/apps/dev/src/dt-components.module.ts +++ b/apps/dev/src/dt-components.module.ts @@ -43,6 +43,7 @@ import { DtFormFieldModule } from '@dynatrace/barista-components/form-field'; import { DtFormattersModule } from '@dynatrace/barista-components/formatters'; import { DtHighlightModule } from '@dynatrace/barista-components/highlight'; import { DtIconModule } from '@dynatrace/barista-components/icon'; +import { DtIndicatorModule } from '@dynatrace/barista-components/indicator'; import { DtInfoGroupModule } from '@dynatrace/barista-components/info-group'; import { DtInlineEditorModule } from '@dynatrace/barista-components/inline-editor'; import { DtInputModule } from '@dynatrace/barista-components/input'; @@ -102,6 +103,7 @@ import { DtTreeTableModule } from '@dynatrace/barista-components/tree-table'; DtFormattersModule, DtHighlightModule, DtIconModule, + DtIndicatorModule, DtInfoGroupModule, DtInlineEditorModule, DtInputModule, diff --git a/apps/dev/src/indicator/indicator-demo.component.ts b/apps/dev/src/indicator/indicator-demo.component.ts new file mode 100644 index 0000000000..57361ae2e6 --- /dev/null +++ b/apps/dev/src/indicator/indicator-demo.component.ts @@ -0,0 +1,236 @@ +/** + * @license + * Copyright 2020 Dynatrace LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component } from '@angular/core'; +import { ThreadNode, ThreadFlatNode } from './tree-table-example-types'; +import { + DtTreeDataSource, + DtTreeControl, + DtTreeFlattener, +} from '@dynatrace/barista-components/core'; +import { FlatTreeControl } from '@angular/cdk/tree'; + +const TESTDATA: ThreadNode[] = [ + { + name: 'hz.hzInstance_1_cluster.thread', + icon: 'process', + threadlevel: 'S0', + totalTimeConsumption: 150, + waiting: 123, + running: 20, + blocked: 0, + children: [ + { + name: + 'hz.hzInstance_1_cluster.thread_1_hz.hzInstance_1_cluster.thread-1', + icon: 'process', + threadlevel: 'S1', + totalTimeConsumption: 150, + waiting: 123, + running: 20, + blocked: 0, + }, + { + name: 'hz.hzInstance_1_cluster.thread-2', + icon: 'process', + threadlevel: 'S1', + totalTimeConsumption: 150, + waiting: 130, + running: 0, + blocked: 0, + }, + ], + }, + { + name: 'jetty', + icon: 'process', + threadlevel: 'S0', + totalTimeConsumption: 150, + waiting: 123, + running: 20, + blocked: 10, + children: [ + { + name: 'jetty-422', + icon: 'process', + threadlevel: 'S1', + totalTimeConsumption: 150, + waiting: 123, + running: 20, + blocked: 10, + }, + { + name: 'jetty-423', + icon: 'process', + threadlevel: 'S1', + totalTimeConsumption: 150, + waiting: 130, + running: 0, + blocked: 0, + }, + { + name: 'jetty-424', + icon: 'process', + threadlevel: 'S1', + totalTimeConsumption: 150, + waiting: 130, + running: 0, + blocked: 0, + }, + ], + }, + { + name: 'Downtime timer', + icon: 'process', + threadlevel: 'S0', + totalTimeConsumption: 150, + waiting: 123, + running: 20, + blocked: 0, + }, +]; + +@Component({ + selector: 'demo-component', + template: ` + + + + Name + + + + + + + {{ row.name }} + {{ row.threadlevel }} + + + + + + + Blocked + + + {{ row.blocked }}ms + + + + + + Running + + {{ row.running }}ms + + + + + Waiting + + {{ row.waiting }}ms + + + + + Actions + + + + + + {{ row.name }} context dialog + + + + + + + + `, +}) +export class IndicatorDemo { + treeControl: FlatTreeControl; + treeFlattener: DtTreeFlattener; + dataSource: DtTreeDataSource; + + constructor() { + this.treeControl = new DtTreeControl( + this._getLevel, + this._isExpandable, + ); + this.treeFlattener = new DtTreeFlattener( + this.transformer, + this._getLevel, + this._isExpandable, + this._getChildren, + ); + this.dataSource = new DtTreeDataSource( + this.treeControl, + this.treeFlattener, + ); + this.dataSource.data = TESTDATA; + } + + hasChild = (_: number, _nodeData: ThreadFlatNode) => _nodeData.expandable; + + transformer = (node: ThreadNode, level: number): ThreadFlatNode => { + const flatNode = new ThreadFlatNode(); + flatNode.name = node.name; + flatNode.level = level; + flatNode.threadlevel = node.threadlevel; + flatNode.expandable = !!node.children; + flatNode.blocked = node.blocked; + flatNode.running = node.running; + flatNode.waiting = node.waiting; + flatNode.totalTimeConsumption = node.totalTimeConsumption; + flatNode.icon = node.icon; + return flatNode; + }; + + private _getLevel = (node: ThreadFlatNode) => node.level; + + private _isExpandable = (node: ThreadFlatNode) => node.expandable; + + private _getChildren = (node: ThreadNode): ThreadNode[] => + node.children || []; +} diff --git a/apps/dev/src/indicator/tree-table-example-types.ts b/apps/dev/src/indicator/tree-table-example-types.ts new file mode 100644 index 0000000000..791f002059 --- /dev/null +++ b/apps/dev/src/indicator/tree-table-example-types.ts @@ -0,0 +1,42 @@ +/** + * @license + * Copyright 2020 Dynatrace LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { DtIconType } from '@dynatrace/barista-icons'; + +export class ThreadNode { + name: string; + threadlevel?: string; + totalTimeConsumption?: number; + blocked: number; + running: number; + waiting: number; + icon?: DtIconType; + children?: ThreadNode[]; + isShowMore?: boolean; +} + +export class ThreadFlatNode { + name: string; + threadlevel?: string; + totalTimeConsumption?: number; + blocked: number; + running: number; + waiting: number; + icon?: DtIconType; + level: number; + expandable: boolean; + isShowMore?: boolean; +} diff --git a/apps/universal/src/app/barista.module.ts b/apps/universal/src/app/barista.module.ts index 4b5eaf036e..a31ef04a6f 100644 --- a/apps/universal/src/app/barista.module.ts +++ b/apps/universal/src/app/barista.module.ts @@ -34,6 +34,7 @@ import { DtQuickFilterModule } from '@dynatrace/barista-components/experimental/ import { DtFilterFieldModule } from '@dynatrace/barista-components/filter-field'; import { DtHighlightModule } from '@dynatrace/barista-components/highlight'; import { DtIconModule } from '@dynatrace/barista-components/icon'; +import { DtIndicatorModule } from '@dynatrace/barista-components/indicator'; import { DtInfoGroupModule } from '@dynatrace/barista-components/info-group'; import { DtInputModule } from '@dynatrace/barista-components/input'; import { DtLoadingDistractorModule } from '@dynatrace/barista-components/loading-distractor'; @@ -81,6 +82,7 @@ import { DtTreeTableModule } from '@dynatrace/barista-components/tree-table'; DtExpandableTextModule, DtFilterFieldModule, DtHighlightModule, + DtIndicatorModule, DtInfoGroupModule, DtInputModule, DtLoadingDistractorModule, diff --git a/libs/barista-components/core/index.ts b/libs/barista-components/core/index.ts index 6f3b93d60d..e3e82bd027 100644 --- a/libs/barista-components/core/index.ts +++ b/libs/barista-components/core/index.ts @@ -20,7 +20,6 @@ export * from './src/util/index'; export * from './src/logger/index'; export * from './src/viewport/index'; export * from './src/option/index'; -export * from './src/indicator/index'; export * from './src/tree/index'; export * from './src/animations/index'; export * from './src/overlay/index'; diff --git a/libs/barista-components/core/src/indicator/barista.json b/libs/barista-components/core/src/indicator/barista.json deleted file mode 100644 index 3b647dd508..0000000000 --- a/libs/barista-components/core/src/indicator/barista.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "title": "Indicator", - "description": "The dtIndicator directive can be used with any component to indicate a warning or an error.", - "properties": ["dev utility"], - "tags": ["indicator", "validation", "warning", "error"], - "navGroup": "other" -} diff --git a/libs/barista-components/core/src/indicator/README.md b/libs/barista-components/indicator/README.md similarity index 82% rename from libs/barista-components/core/src/indicator/README.md rename to libs/barista-components/indicator/README.md index 0a4b992cb9..12bf50d702 100644 --- a/libs/barista-components/core/src/indicator/README.md +++ b/libs/barista-components/indicator/README.md @@ -6,7 +6,10 @@ warning or an error. This directive was introduced to add indicators in the ``, but can be used in other components as well to handle error or warning indications. - + + +For a more complex example with the indicator in use visit: +[Tree Table with DtIndicator](/components/tree-table#dtindicator) ## Imports diff --git a/libs/barista-components/indicator/barista.json b/libs/barista-components/indicator/barista.json new file mode 100644 index 0000000000..9ca2c454be --- /dev/null +++ b/libs/barista-components/indicator/barista.json @@ -0,0 +1,22 @@ +{ + "title": "Indicator", + "description": "The dtIndicator directive can be used with any component to indicate a warning or an error.", + "category": "components", + "properties": ["dev utility"], + "contributors": { + "dev": [ + { + "name": "Fabian Friedl", + "githubuser": "ffriedl89" + } + ] + }, + "tags": [ + "component", + "angular", + "indicator", + "validation", + "warning", + "error" + ] +} diff --git a/libs/barista-components/indicator/index.ts b/libs/barista-components/indicator/index.ts new file mode 100644 index 0000000000..a8bfb220bd --- /dev/null +++ b/libs/barista-components/indicator/index.ts @@ -0,0 +1,18 @@ +/** + * @license + * Copyright 2020 Dynatrace LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export * from './src/indicator-module'; +export * from './src/indicator'; diff --git a/libs/barista-components/indicator/jest.config.js b/libs/barista-components/indicator/jest.config.js new file mode 100644 index 0000000000..f07aa4d421 --- /dev/null +++ b/libs/barista-components/indicator/jest.config.js @@ -0,0 +1,10 @@ +module.exports = { + name: 'indicator', + preset: '../../../jest.config.js', + coverageDirectory: '../../../coverage/components/indicator', + snapshotSerializers: [ + 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js', + 'jest-preset-angular/build/AngularSnapshotSerializer.js', + 'jest-preset-angular/build/HTMLCommentSerializer.js', + ], +}; diff --git a/libs/barista-components/indicator/package.json b/libs/barista-components/indicator/package.json new file mode 100644 index 0000000000..dedb72ce9c --- /dev/null +++ b/libs/barista-components/indicator/package.json @@ -0,0 +1,7 @@ +{ + "ngPackage": { + "lib": { + "entryFile": "index.ts" + } + } +} diff --git a/libs/barista-components/core/src/indicator/indicator-module.ts b/libs/barista-components/indicator/src/indicator-module.ts similarity index 100% rename from libs/barista-components/core/src/indicator/indicator-module.ts rename to libs/barista-components/indicator/src/indicator-module.ts diff --git a/libs/barista-components/core/src/indicator/indicator-theme.scss b/libs/barista-components/indicator/src/indicator-theme.scss similarity index 88% rename from libs/barista-components/core/src/indicator/indicator-theme.scss rename to libs/barista-components/indicator/src/indicator-theme.scss index 7f83307e6e..f886c535e9 100644 --- a/libs/barista-components/core/src/indicator/indicator-theme.scss +++ b/libs/barista-components/indicator/src/indicator-theme.scss @@ -1,4 +1,4 @@ -@import '../theming/theming'; +@import '../../core/src/theming/theming'; @mixin dt-theme-indicator($theme) { $palette-names: 'error', 'warning'; diff --git a/libs/barista-components/core/src/indicator/indicator.scss b/libs/barista-components/indicator/src/indicator.scss similarity index 79% rename from libs/barista-components/core/src/indicator/indicator.scss rename to libs/barista-components/indicator/src/indicator.scss index ec859c79ff..5a3fbcec3d 100644 --- a/libs/barista-components/core/src/indicator/indicator.scss +++ b/libs/barista-components/indicator/src/indicator.scss @@ -1,5 +1,5 @@ @import './indicator-theme'; -@import '../theming/theming'; +@import '../../core/src/theming/theming'; // Apply the indicator theme to all theme definitions @include dt-apply-theme() { diff --git a/libs/barista-components/core/src/indicator/indicator.spec.ts b/libs/barista-components/indicator/src/indicator.spec.ts similarity index 98% rename from libs/barista-components/core/src/indicator/indicator.spec.ts rename to libs/barista-components/indicator/src/indicator.spec.ts index 883247ef1f..8b1adbbcd5 100644 --- a/libs/barista-components/core/src/indicator/indicator.spec.ts +++ b/libs/barista-components/indicator/src/indicator.spec.ts @@ -24,7 +24,7 @@ import { By } from '@angular/platform-browser'; import { DtIndicator, DtIndicatorModule, -} from '@dynatrace/barista-components/core'; +} from '@dynatrace/barista-components/indicator'; describe('DtIndicator without table', () => { beforeEach(fakeAsync(() => { diff --git a/libs/barista-components/core/src/indicator/indicator.ts b/libs/barista-components/indicator/src/indicator.ts similarity index 95% rename from libs/barista-components/core/src/indicator/indicator.ts rename to libs/barista-components/indicator/src/indicator.ts index 8a671c8ec3..057d63ec0e 100644 --- a/libs/barista-components/core/src/indicator/indicator.ts +++ b/libs/barista-components/indicator/src/indicator.ts @@ -24,7 +24,11 @@ import { } from '@angular/core'; import { Subject } from 'rxjs'; -import { CanColor, Constructor, mixinColor } from '../common-behaviours/index'; +import { + CanColor, + Constructor, + mixinColor, +} from '@dynatrace/barista-components/core'; export type DtIndicatorThemePalette = 'error' | 'warning' | undefined; diff --git a/libs/barista-components/core/src/indicator/index.ts b/libs/barista-components/indicator/src/test-setup.ts similarity index 90% rename from libs/barista-components/core/src/indicator/index.ts rename to libs/barista-components/indicator/src/test-setup.ts index 2ad15aee98..3c66e43d72 100644 --- a/libs/barista-components/core/src/indicator/index.ts +++ b/libs/barista-components/indicator/src/test-setup.ts @@ -14,5 +14,4 @@ * limitations under the License. */ -export * from './indicator'; -export * from './indicator-module'; +import 'jest-preset-angular'; diff --git a/libs/barista-components/indicator/tsconfig.json b/libs/barista-components/indicator/tsconfig.json new file mode 100644 index 0000000000..08c7db8c96 --- /dev/null +++ b/libs/barista-components/indicator/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "types": ["node", "jest"] + }, + "include": ["**/*.ts"] +} diff --git a/libs/barista-components/indicator/tsconfig.lib.json b/libs/barista-components/indicator/tsconfig.lib.json new file mode 100644 index 0000000000..1c600457d3 --- /dev/null +++ b/libs/barista-components/indicator/tsconfig.lib.json @@ -0,0 +1,20 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "target": "es2015", + "declaration": true, + "inlineSources": true, + "types": [], + "lib": ["dom", "es2018"] + }, + "angularCompilerOptions": { + "annotateForClosureCompiler": true, + "skipTemplateCodegen": true, + "strictMetadataEmit": true, + "fullTemplateTypeCheck": true, + "strictInjectionParameters": true, + "enableResourceInlining": true + }, + "exclude": ["src/test-setup.ts", "**/*.spec.ts"] +} diff --git a/libs/barista-components/indicator/tsconfig.spec.json b/libs/barista-components/indicator/tsconfig.spec.json new file mode 100644 index 0000000000..fd405a65ef --- /dev/null +++ b/libs/barista-components/indicator/tsconfig.spec.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["**/*.spec.ts", "**/*.d.ts"] +} diff --git a/libs/barista-components/indicator/tslint.json b/libs/barista-components/indicator/tslint.json new file mode 100644 index 0000000000..95392b22f1 --- /dev/null +++ b/libs/barista-components/indicator/tslint.json @@ -0,0 +1,7 @@ +{ + "extends": "../../../tslint.json", + "rules": {}, + "linterOptions": { + "exclude": ["!**/*"] + } +} diff --git a/libs/barista-components/progress-bar/src/progress-bar-module.ts b/libs/barista-components/progress-bar/src/progress-bar-module.ts index 0a3af24619..738a14f674 100644 --- a/libs/barista-components/progress-bar/src/progress-bar-module.ts +++ b/libs/barista-components/progress-bar/src/progress-bar-module.ts @@ -15,7 +15,7 @@ */ import { NgModule } from '@angular/core'; -import { DtIndicatorModule } from '@dynatrace/barista-components/core'; +import { DtIndicatorModule } from '@dynatrace/barista-components/indicator'; import { DtProgressBar } from './progress-bar'; import { DtProgressBarCount } from './progress-bar-count'; diff --git a/libs/barista-components/style/main.scss b/libs/barista-components/style/main.scss index 262a35255c..5f2272b5f6 100644 --- a/libs/barista-components/style/main.scss +++ b/libs/barista-components/style/main.scss @@ -5,6 +5,7 @@ @import './font-mixins'; @import '../input/src/input'; +@import '../indicator/src/indicator'; @import './link'; @import '../core/src/style/overlay'; @@ -18,7 +19,3 @@ .dt-no-pointer { pointer-events: none; } - -// indicator styles import because the indicator is a directive -// and cannot be shipped with styles -@import '../core/src/indicator/indicator'; diff --git a/libs/barista-components/table/src/cell.ts b/libs/barista-components/table/src/cell.ts index 90b7a61310..7a18fab0a4 100644 --- a/libs/barista-components/table/src/cell.ts +++ b/libs/barista-components/table/src/cell.ts @@ -34,12 +34,12 @@ import { ViewEncapsulation, } from '@angular/core'; import { - DtIndicator, isDefined, _addCssClass, _parseCssValue, _removeCssClass, } from '@dynatrace/barista-components/core'; +import { DtIndicator } from '@dynatrace/barista-components/indicator'; import { merge, Subject, Subscription } from 'rxjs'; import { filter, startWith, switchMap, takeUntil } from 'rxjs/operators'; import { DtRow } from './row'; diff --git a/libs/barista-components/table/src/simple-columns/simple-column-base.ts b/libs/barista-components/table/src/simple-columns/simple-column-base.ts index 93b0ed95d7..86eb5b474e 100644 --- a/libs/barista-components/table/src/simple-columns/simple-column-base.ts +++ b/libs/barista-components/table/src/simple-columns/simple-column-base.ts @@ -25,7 +25,7 @@ import { SimpleChanges, ViewChild, } from '@angular/core'; -import { DtIndicatorThemePalette } from '@dynatrace/barista-components/core'; +import { DtIndicatorThemePalette } from '@dynatrace/barista-components/indicator'; import { DtFormattedValue } from '@dynatrace/barista-components/formatters'; import { DtCellDef, DtColumnDef } from '../cell'; import { DtHeaderCellDef } from '../header/header-cell'; diff --git a/libs/barista-components/table/src/simple-columns/simple-column.spec.ts b/libs/barista-components/table/src/simple-columns/simple-column.spec.ts index 652aff8b60..756d0475ac 100644 --- a/libs/barista-components/table/src/simple-columns/simple-column.spec.ts +++ b/libs/barista-components/table/src/simple-columns/simple-column.spec.ts @@ -24,7 +24,7 @@ import { TestBed, async, fakeAsync, flush } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { DtIndicatorThemePalette } from '@dynatrace/barista-components/core'; +import { DtIndicatorThemePalette } from '@dynatrace/barista-components/indicator'; import { DtFormattersModule, formatBytes, diff --git a/libs/barista-components/table/src/table-module.ts b/libs/barista-components/table/src/table-module.ts index 090ff8ae5a..46296af2c4 100644 --- a/libs/barista-components/table/src/table-module.ts +++ b/libs/barista-components/table/src/table-module.ts @@ -20,7 +20,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { DtButtonModule } from '@dynatrace/barista-components/button'; -import { DtIndicatorModule } from '@dynatrace/barista-components/core'; +import { DtIndicatorModule } from '@dynatrace/barista-components/indicator'; import { DtEmptyStateModule } from '@dynatrace/barista-components/empty-state'; import { DtFormFieldModule } from '@dynatrace/barista-components/form-field'; import { DtFormattersModule } from '@dynatrace/barista-components/formatters'; diff --git a/libs/barista-components/table/src/table.spec.ts b/libs/barista-components/table/src/table.spec.ts index 341aa523aa..e1cd885aac 100644 --- a/libs/barista-components/table/src/table.spec.ts +++ b/libs/barista-components/table/src/table.spec.ts @@ -52,7 +52,7 @@ import { TestBed, async, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; import { DtIconModule } from '@dynatrace/barista-components/icon'; -import { DtIndicatorModule } from '@dynatrace/barista-components/core'; +import { DtIndicatorModule } from '@dynatrace/barista-components/indicator'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { createComponent } from '@dynatrace/testing/browser'; diff --git a/libs/barista-components/tree-table/src/tree-table.spec.ts b/libs/barista-components/tree-table/src/tree-table.spec.ts index 9fd8e6c9c6..602e994b0a 100644 --- a/libs/barista-components/tree-table/src/tree-table.spec.ts +++ b/libs/barista-components/tree-table/src/tree-table.spec.ts @@ -31,11 +31,11 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { BehaviorSubject, Observable } from 'rxjs'; import { - DtIndicatorModule, DtTreeControl, DtTreeDataSource, DtTreeFlattener, } from '@dynatrace/barista-components/core'; +import { DtIndicatorModule } from '@dynatrace/barista-components/indicator'; import { DtIconModule } from '@dynatrace/barista-components/icon'; import { DtTreeTable, diff --git a/libs/examples/src/examples.module.ts b/libs/examples/src/examples.module.ts index 9a6f4c9900..9a32edd2e0 100644 --- a/libs/examples/src/examples.module.ts +++ b/libs/examples/src/examples.module.ts @@ -48,6 +48,7 @@ import { DtFormFieldExamplesModule } from './form-field/form-field-examples.modu import { DtFormattersExamplesModule } from './formatters/formatters-examples.module'; import { DtHighlightExamplesModule } from './highlight/highlight-examples.module'; import { DtIconExamplesModule } from './icon/icon-examples.module'; +import { DtIndicatorExamplesModule } from './indicator/indicator-examples.module'; import { DtInfoGroupExamplesModule } from './info-group/info-group-examples.module'; import { DtInlineEditorExamplesModule } from './inline-editor/inline-editor-examples.module'; import { DtInputExamplesModule } from './input/input-examples.module'; @@ -114,6 +115,7 @@ import { DtExamplesTreeTableModule } from './tree-table/tree-table-examples.modu DtFormattersExamplesModule, DtHighlightExamplesModule, DtIconExamplesModule, + DtIndicatorExamplesModule, DtInfoGroupExamplesModule, DtInlineEditorExamplesModule, DtInputExamplesModule, diff --git a/libs/examples/src/index.ts b/libs/examples/src/index.ts index b364c6935c..f90c290ec8 100644 --- a/libs/examples/src/index.ts +++ b/libs/examples/src/index.ts @@ -165,6 +165,7 @@ import { DtExampleHighlightCaseSensitive } from './highlight/highlight-case-sens import { DtExampleHighlightDefault } from './highlight/highlight-default-example/highlight-default-example'; import { DtExampleIconAll } from './icon/icon-all-example/icon-all-example'; import { DtExampleIconDefault } from './icon/icon-default-example/icon-default-example'; +import { DtExampleIndicatorDefault } from './indicator/indicator-default-example/indicator-default-example'; import { DtExampleInfoGroupDefault } from './info-group/info-group-default-example/info-group-default-example'; import { DtExampleInfoGroupInCard } from './info-group/info-group-in-card-example/info-group-in-card-example'; import { DtExampleInlineEditorApi } from './inline-editor/inline-editor-api-example/inline-editor-api-example'; @@ -346,6 +347,7 @@ export { DtFormFieldExamplesModule } from './form-field/form-field-examples.modu export { DtFormattersExamplesModule } from './formatters/formatters-examples.module'; export { DtHighlightExamplesModule } from './highlight/highlight-examples.module'; export { DtIconExamplesModule } from './icon/icon-examples.module'; +export { DtIndicatorExamplesModule } from './indicator/indicator-examples.module'; export { DtInfoGroupExamplesModule } from './info-group/info-group-examples.module'; export { DtInlineEditorExamplesModule } from './inline-editor/inline-editor-examples.module'; export { DtInputExamplesModule } from './input/input-examples.module'; @@ -521,6 +523,7 @@ export { DtExampleHighlightDefault, DtExampleIconAll, DtExampleIconDefault, + DtExampleIndicatorDefault, DtExampleInfoGroupDefault, DtExampleInfoGroupInCard, DtExampleInlineEditorApi, @@ -788,6 +791,7 @@ export const EXAMPLES_MAP = new Map>([ ['DtExampleDrawerDynamic', DtExampleDrawerDynamic], ['DtExampleDrawerNested', DtExampleDrawerNested], ['DtExampleDrawerOver', DtExampleDrawerOver], + ['DtExampleDrawerTableDefault', DtExampleDrawerTableDefault], ['DtExampleCustomEmptyStateTable', DtExampleCustomEmptyStateTable], ['DtExampleCustomEmptyState', DtExampleCustomEmptyState], ['DtExampleEmptyStateDefault', DtExampleEmptyStateDefault], @@ -855,6 +859,7 @@ export const EXAMPLES_MAP = new Map>([ ['DtExampleHighlightDefault', DtExampleHighlightDefault], ['DtExampleIconAll', DtExampleIconAll], ['DtExampleIconDefault', DtExampleIconDefault], + ['DtExampleIndicatorDefault', DtExampleIndicatorDefault], ['DtExampleInfoGroupDefault', DtExampleInfoGroupDefault], ['DtExampleInfoGroupInCard', DtExampleInfoGroupInCard], ['DtExampleInlineEditorApi', DtExampleInlineEditorApi], diff --git a/libs/examples/src/indicator/index.ts b/libs/examples/src/indicator/index.ts new file mode 100644 index 0000000000..49762ca6c7 --- /dev/null +++ b/libs/examples/src/indicator/index.ts @@ -0,0 +1,18 @@ +/** + * @license + * Copyright 2020 Dynatrace LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export * from './indicator-default-example/indicator-default-example'; +export * from './indicator-examples.module'; diff --git a/libs/examples/src/indicator/indicator-default-example/indicator-default-example.html b/libs/examples/src/indicator/indicator-default-example/indicator-default-example.html new file mode 100644 index 0000000000..03b0e0d1ce --- /dev/null +++ b/libs/examples/src/indicator/indicator-default-example/indicator-default-example.html @@ -0,0 +1,6 @@ +Indicator: Color +

+ + diff --git a/libs/examples/src/indicator/indicator-default-example/indicator-default-example.ts b/libs/examples/src/indicator/indicator-default-example/indicator-default-example.ts new file mode 100644 index 0000000000..a9e2eb0d34 --- /dev/null +++ b/libs/examples/src/indicator/indicator-default-example/indicator-default-example.ts @@ -0,0 +1,27 @@ +/** + * @license + * Copyright 2020 Dynatrace LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'dt-example-info-group-default', + templateUrl: 'indicator-default-example.html', +}) +export class DtExampleIndicatorDefault { + shown: boolean = true; + + color: 'warning' | 'error' = 'error'; +} diff --git a/libs/examples/src/indicator/indicator-examples.module.ts b/libs/examples/src/indicator/indicator-examples.module.ts new file mode 100644 index 0000000000..c7867035b9 --- /dev/null +++ b/libs/examples/src/indicator/indicator-examples.module.ts @@ -0,0 +1,27 @@ +/** + * @license + * Copyright 2020 Dynatrace LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { NgModule } from '@angular/core'; +import { DtButtonModule } from '@dynatrace/barista-components/button'; +import { DtIndicatorModule } from '@dynatrace/barista-components/indicator'; + +import { DtExampleIndicatorDefault } from './indicator-default-example/indicator-default-example'; + +@NgModule({ + imports: [DtIndicatorModule, DtButtonModule], + declarations: [DtExampleIndicatorDefault], +}) +export class DtIndicatorExamplesModule {} diff --git a/libs/examples/src/table/table-examples.module.ts b/libs/examples/src/table/table-examples.module.ts index 44ea5ed150..d39e905623 100644 --- a/libs/examples/src/table/table-examples.module.ts +++ b/libs/examples/src/table/table-examples.module.ts @@ -17,7 +17,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DtTableModule } from '@dynatrace/barista-components/table'; import { DtButtonModule } from '@dynatrace/barista-components/button'; -import { DtIndicatorModule } from '@dynatrace/barista-components/core'; +import { DtIndicatorModule } from '@dynatrace/barista-components/indicator'; import { DtPaginationModule } from '@dynatrace/barista-components/pagination'; import { DtShowMoreModule } from '@dynatrace/barista-components/show-more'; import { DtEmptyStateModule } from '@dynatrace/barista-components/empty-state'; diff --git a/libs/examples/src/tree-table/tree-table-examples.module.ts b/libs/examples/src/tree-table/tree-table-examples.module.ts index cae908373b..d23e12f528 100644 --- a/libs/examples/src/tree-table/tree-table-examples.module.ts +++ b/libs/examples/src/tree-table/tree-table-examples.module.ts @@ -24,7 +24,7 @@ import { DtContextDialogModule } from '@dynatrace/barista-components/context-dia import { DtTreeTableModule } from '@dynatrace/barista-components/tree-table'; import { DtIconModule } from '@dynatrace/barista-components/icon'; import { DtInfoGroupModule } from '@dynatrace/barista-components/info-group'; -import { DtIndicatorModule } from '@dynatrace/barista-components/core'; +import { DtIndicatorModule } from '@dynatrace/barista-components/indicator'; import { DtButtonModule } from '@dynatrace/barista-components/button'; import { DtProgressBarModule } from '@dynatrace/barista-components/progress-bar'; diff --git a/nx.json b/nx.json index ab1407e2c6..d73669cf51 100644 --- a/nx.json +++ b/nx.json @@ -92,6 +92,7 @@ "formatters", "highlight", "icon", + "indicator", "info-group", "inline-editor", "input", @@ -213,6 +214,9 @@ "icon": { "tags": ["scope:components", "type:library"] }, + "indicator": { + "tags": ["scope:components", "type:library"] + }, "info-group": { "tags": ["scope:components", "type:library"] }, diff --git a/tsconfig.json b/tsconfig.json index 2379a31007..c2f88f75f3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -107,6 +107,9 @@ "@dynatrace/barista-components/icon": [ "libs/barista-components/icon/index.ts" ], + "@dynatrace/barista-components/indicator": [ + "libs/barista-components/indicator/index.ts" + ], "@dynatrace/barista-components/info-group": [ "libs/barista-components/info-group/index.ts" ],