From 7aec49c4e78e3a6d59f99d995e511e4380dd2460 Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Tue, 9 Jan 2024 10:24:07 +0100 Subject: [PATCH 1/8] Docs/angular reactive forms samples (#2218) --- examples/angular-reactive-forms/package.json | 4 ++-- .../src/app/app.module.ts | 8 +++++-- .../reactive-form.component.html | 15 ++++++++++++ .../reactive-form/reactive-form.component.ts | 4 +++- .../src/directives/base-value-accessor.ts | 4 ++++ .../src/directives/date-value-accessor.ts | 24 +++++++++++++++++++ .../src/directives/select-value-accessor.ts | 24 +++++++++++++++++++ 7 files changed, 78 insertions(+), 5 deletions(-) create mode 100644 examples/angular-reactive-forms/src/directives/date-value-accessor.ts create mode 100644 examples/angular-reactive-forms/src/directives/select-value-accessor.ts diff --git a/examples/angular-reactive-forms/package.json b/examples/angular-reactive-forms/package.json index dbc791b86b..62778aa112 100644 --- a/examples/angular-reactive-forms/package.json +++ b/examples/angular-reactive-forms/package.json @@ -18,7 +18,7 @@ "@angular/platform-browser": "^14.2.10", "@angular/platform-browser-dynamic": "^14.2.10", "@angular/router": "^14.2.10", - "@telekom/scale-components-neutral": "^3.0.0-beta.117", + "@telekom/scale-components-neutral": "^3.0.0-beta.143", "rxjs": "~6.6.0", "tslib": "^2.1.0", "zone.js": "~0.11.4" @@ -41,4 +41,4 @@ "node": "14.17.0", "npm": "6.14.13" } -} \ No newline at end of file +} diff --git a/examples/angular-reactive-forms/src/app/app.module.ts b/examples/angular-reactive-forms/src/app/app.module.ts index e864a14b51..a6284f02ca 100644 --- a/examples/angular-reactive-forms/src/app/app.module.ts +++ b/examples/angular-reactive-forms/src/app/app.module.ts @@ -8,6 +8,8 @@ import { AppComponent } from './app.component'; import { TextValueAccessorDirective } from 'src/directives/text-value-accessor'; import { CheckedValueAccessorDirective } from 'src/directives/checked-value-accessor'; import { NumberValueAccessorDirective } from 'src/directives/number-value-accessor'; +import { SelectValueAccessorDirective } from 'src/directives/select-value-accessor'; +import { DateValueAccessorDirective } from 'src/directives/date-value-accessor'; import { ReactiveFormComponent } from './reactive-form/reactive-form.component'; import { SimpleBindingComponent } from './simple-binding/simple-binding.component'; import { TestingComponent } from './testing/testing.component'; @@ -17,18 +19,20 @@ import { VanillaExampleComponent } from './vanilla-example/vanilla-example.compo declarations: [ AppComponent, TextValueAccessorDirective, + SelectValueAccessorDirective, + DateValueAccessorDirective, CheckedValueAccessorDirective, NumberValueAccessorDirective, ReactiveFormComponent, SimpleBindingComponent, TestingComponent, - VanillaExampleComponent + VanillaExampleComponent, ], imports: [ BrowserModule, AppRoutingModule, ReactiveFormsModule, - FormsModule + FormsModule, ], providers: [], bootstrap: [AppComponent], diff --git a/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.html b/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.html index cc17b9c418..b37f38077e 100644 --- a/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.html +++ b/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.html @@ -8,6 +8,21 @@

+

+ + Foo + Bar + +

+ +

+ +

console.log Reset diff --git a/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.ts b/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.ts index 8829b0918c..9d75df5f48 100644 --- a/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.ts +++ b/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.ts @@ -16,7 +16,9 @@ export class ReactiveFormComponent implements OnInit { signupForm = new UntypedFormGroup({ username: new UntypedFormControl('admin'), password: new UntypedFormControl({ value: '', disabled: false }), - consent: new UntypedFormControl() + consent: new UntypedFormControl(), + select: new UntypedFormControl('foo'), + date: new UntypedFormControl(), }); onSubmit() { diff --git a/examples/angular-reactive-forms/src/directives/base-value-accessor.ts b/examples/angular-reactive-forms/src/directives/base-value-accessor.ts index 745e219d64..2831493254 100644 --- a/examples/angular-reactive-forms/src/directives/base-value-accessor.ts +++ b/examples/angular-reactive-forms/src/directives/base-value-accessor.ts @@ -40,4 +40,8 @@ export class BaseValueAccessorDirective implements ControlValueAccessor { this.onChange(value); } + _handleDatePickerSelect(target: any): void { + const value = target.querySelector('duet-date-picker').value; + this.onChange(value); + } } diff --git a/examples/angular-reactive-forms/src/directives/date-value-accessor.ts b/examples/angular-reactive-forms/src/directives/date-value-accessor.ts new file mode 100644 index 0000000000..29a0c733b6 --- /dev/null +++ b/examples/angular-reactive-forms/src/directives/date-value-accessor.ts @@ -0,0 +1,24 @@ +import { Directive, ElementRef } from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; + +import { BaseValueAccessorDirective } from './base-value-accessor'; + +@Directive({ + /* tslint:disable-next-line:directive-selector */ + selector: 'scale-date-picker[formControlName],[sclDateControl]', + host: { + '(scale-change)': '_handleDatePickerSelect($event.target)', + }, + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: DateValueAccessorDirective, + multi: true + } + ] +}) +export class DateValueAccessorDirective extends BaseValueAccessorDirective { + constructor(el: ElementRef) { + super(el); + } +} diff --git a/examples/angular-reactive-forms/src/directives/select-value-accessor.ts b/examples/angular-reactive-forms/src/directives/select-value-accessor.ts new file mode 100644 index 0000000000..813a433fe5 --- /dev/null +++ b/examples/angular-reactive-forms/src/directives/select-value-accessor.ts @@ -0,0 +1,24 @@ +import { Directive, ElementRef } from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; + +import { BaseValueAccessorDirective } from './base-value-accessor'; + +@Directive({ + /* tslint:disable-next-line:directive-selector */ + selector: 'scale-dropdown-select[formControlName],[sclSelectControl]', + host: { + '(scale-change)': '_handleInput($event.target.value)' + }, + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: SelectValueAccessorDirective, + multi: true + } + ] +}) +export class SelectValueAccessorDirective extends BaseValueAccessorDirective { + constructor(el: ElementRef) { + super(el); + } +} From bab9369d8761664454c74847b8d652929d21d743 Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Wed, 10 Jan 2024 18:47:12 +0100 Subject: [PATCH 2/8] fix: enable programmatic disabled #2248 --- packages/components/src/components/tab-nav/tab-nav.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/tab-nav/tab-nav.tsx b/packages/components/src/components/tab-nav/tab-nav.tsx index 9c52ddc4e0..9c199f36db 100644 --- a/packages/components/src/components/tab-nav/tab-nav.tsx +++ b/packages/components/src/components/tab-nav/tab-nav.tsx @@ -112,7 +112,9 @@ export class TabNav { getAllEnabledTabs(): HTMLScaleTabHeaderElement[] { return Array.from( - this.el.querySelectorAll('scale-tab-header:not([disabled])') + this.el.querySelectorAll( + 'scale-tab-header:not([disabled]), scale-tab-header[disabled="false"]' + ) ); } From c33b083d3895abe65545da6e0b3e62be4c3a9525 Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Wed, 10 Jan 2024 18:48:20 +0100 Subject: [PATCH 3/8] fix: allow sorting of dynamically added columns2 (#2246) --- .../components/src/components/table/table.tsx | 50 +++- .../src/html/table-dynamic-cols.html | 252 ++++++++++++++++++ 2 files changed, 293 insertions(+), 9 deletions(-) create mode 100644 packages/components/src/html/table-dynamic-cols.html diff --git a/packages/components/src/components/table/table.tsx b/packages/components/src/components/table/table.tsx index 52730fd025..a01b0252ae 100644 --- a/packages/components/src/components/table/table.tsx +++ b/packages/components/src/components/table/table.tsx @@ -9,7 +9,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { Component, Prop, h, Element, Host } from '@stencil/core'; +import { Component, Prop, h, Element, Host, State } from '@stencil/core'; import classNames from 'classnames'; import statusNote from '../../utils/status-note'; @@ -19,6 +19,8 @@ import statusNote from '../../utils/status-note'; shadow: false, }) export class Table { + mutationObserver: MutationObserver; + @Element() hostElement: HTMLElement; /** (optional) Display sort arrows on/off */ @Prop() showSort?: boolean = false; @@ -28,19 +30,36 @@ export class Table { @Prop() striped?: boolean = false; /** (optional) Injected CSS styles */ @Prop() styles?: string; + /** "forceUpdate" hack, set it to trigger and re-render */ + @State() forceUpdate: string; /** object of the slots in use */ slots: { header?: Element; table?: Element } = {}; + addSortIndicator(el) { + el.insertAdjacentHTML( + 'afterbegin', + ` + ` + ); + } + componentWillLoad() { this.hostElement.querySelectorAll('th').forEach((th) => { - th.insertAdjacentHTML( - 'afterbegin', - ` - ` - ); + this.addSortIndicator(th); + }); + } + + componentWillUpdate() { + this.hostElement.querySelectorAll('th').forEach((th) => { + // only cols that are NOT added dynamically have children (the sorting icon), added on componentWillLoad + if (th.children.length === 0) { + // this may not be needed + th.classList.add('dynamically-added'); + this.addSortIndicator(th); + } }); } @@ -52,6 +71,13 @@ export class Table { el.showStatus = false; }); } + this.mutationObserver = new MutationObserver(() => { + this.forceUpdate = String(Date.now()); + }); + this.mutationObserver.observe(this.hostElement, { + childList: true, + subtree: true, + }); } componentDidRender() { @@ -66,6 +92,12 @@ export class Table { } } + disconnectedCallback() { + if (this.mutationObserver) { + this.mutationObserver.disconnect(); + } + } + render() { return ( diff --git a/packages/components/src/html/table-dynamic-cols.html b/packages/components/src/html/table-dynamic-cols.html new file mode 100644 index 0000000000..fa019e848c --- /dev/null +++ b/packages/components/src/html/table-dynamic-cols.html @@ -0,0 +1,252 @@ + + + + + + Stencil Component Starter + + + + + + +

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Title + Tags + Stats + + Time + + Euros +
Jane + Other + N/A + Demo + +
+ 9.356 + +
+ 		00:00:20100.245,10
Jack + Other + N/A + Demo + +
+ 3.356 + +
+ 		00:00:30100.345,10
John + Other + N/A + Demo + +
+ 6.356 + +
+ 		00:00:40100.445,10
Total + + 00:00:20100.245,10lol
+ + + + From febd2dd1c88109b68b17038b8889b42ffba57653 Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Wed, 10 Jan 2024 18:48:37 +0100 Subject: [PATCH 4/8] Fix/data grid tags colors (#2220) --- .../data-grid/cell-handlers/tags-cell.tsx | 15 ++++++++++++--- .../components/data-grid/DataGrid.stories.mdx | 2 +- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx index cf43c54616..c1e4ef3cd8 100644 --- a/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx +++ b/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx @@ -19,13 +19,22 @@ export const TagsCell: Cell = { sortBy: 'text', }, render: ({ content }) => { - const tags = content.split(',').map((s) => s.trim()); + let tags = []; + // for backwards compatibility + if (typeof content === 'string') { + tags = content.split(',').map((el) => ({ + content: el, + color: 'standard', + })); + } else { + tags = content; + } return (