From 29d87246f5a3923345c97f1c84fefc74560646fe Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Sun, 6 Oct 2024 14:39:05 +0300 Subject: [PATCH 01/25] chore(isct-381): start with TextWithDroppedListComponent --- .../text-with-dropped-list/v4/index.ts | 1 + .../text-with-dropped-list/v4/ng-package.json | 7 +++++ .../text-with-dropped-list/v4/public-api.ts | 1 + .../v4/text-with-dropped-list.component.html | 1 + .../v4/text-with-dropped-list.component.scss | 0 .../text-with-dropped-list.component.spec.ts | 23 ++++++++++++++++ ...ext-with-dropped-list.component.stories.ts | 26 +++++++++++++++++++ .../v4/text-with-dropped-list.component.ts | 11 ++++++++ 8 files changed, 70 insertions(+) create mode 100644 projects/fusion-ui/components/text-with-dropped-list/v4/index.ts create mode 100644 projects/fusion-ui/components/text-with-dropped-list/v4/ng-package.json create mode 100644 projects/fusion-ui/components/text-with-dropped-list/v4/public-api.ts create mode 100644 projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html create mode 100644 projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss create mode 100644 projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts create mode 100644 projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts create mode 100644 projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/index.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/index.ts new file mode 100644 index 000000000..7e1a213e3 --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/ng-package.json b/projects/fusion-ui/components/text-with-dropped-list/v4/ng-package.json new file mode 100644 index 000000000..d9b2030ce --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + }, + "allowedNonPeerDependencies": ["."] +} diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/public-api.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/public-api.ts new file mode 100644 index 000000000..a21157442 --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/public-api.ts @@ -0,0 +1 @@ +export * from './text-with-dropped-list.component'; diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html new file mode 100644 index 000000000..f298805d2 --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html @@ -0,0 +1 @@ +

text-with-dropped-list works!

diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts new file mode 100644 index 000000000..bd66492ba --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TextWithDroppedListComponent } from './text-with-dropped-list.component'; + +describe('TextWithDroppedListComponent', () => { + let component: TextWithDroppedListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TextWithDroppedListComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TextWithDroppedListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts new file mode 100644 index 000000000..3193c4292 --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts @@ -0,0 +1,26 @@ +import {componentWrapperDecorator, Meta, moduleMetadata, StoryObj} from '@storybook/angular'; +import {CommonModule} from '@angular/common'; +import {TextWithDroppedListComponent} from './text-with-dropped-list.component'; + +export default { + title: 'V4/Components/DataDisplay/Text with dropped list', + component: TextWithDroppedListComponent, + decorators: [ + moduleMetadata({ + declarations: [], + imports: [CommonModule] + }), + componentWrapperDecorator(story => `
${story}
`) + ], + tags: ['autodocs'], + parameters: { + options: { + showPanel: true, + panelPosition: 'bottom' + } + } +} as Meta; + +type Story = StoryObj; + +export const Basic: Story = {}; diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts new file mode 100644 index 000000000..9bc0ab02c --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts @@ -0,0 +1,11 @@ +import {ChangeDetectionStrategy, Component} from '@angular/core'; + +@Component({ + selector: 'fusion-text-with-dropped-list', + standalone: true, + imports: [], + templateUrl: './text-with-dropped-list.component.html', + styleUrl: './text-with-dropped-list.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class TextWithDroppedListComponent {} From 6838ed6a95f7d641736e95d0604fd8452fd29aac Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Sun, 6 Oct 2024 15:53:32 +0300 Subject: [PATCH 02/25] chore(isct-381): added text styles in TextWithDroppedListComponent --- .../text-with-dropped-list/index.ts | 1 + .../text-with-dropped-list/ng-package.json | 7 ++++ .../text-with-dropped-list/public-api.ts | 1 + .../v4/text-with-dropped-list.component.html | 5 ++- .../v4/text-with-dropped-list.component.scss | 39 +++++++++++++++++++ ...ext-with-dropped-list.component.stories.ts | 27 +++++++++++++ .../v4/text-with-dropped-list.component.ts | 15 ++++++- .../v4/text-with-dropped-list.entities.ts | 6 +++ 8 files changed, 98 insertions(+), 3 deletions(-) create mode 100644 projects/fusion-ui/components/text-with-dropped-list/index.ts create mode 100644 projects/fusion-ui/components/text-with-dropped-list/ng-package.json create mode 100644 projects/fusion-ui/components/text-with-dropped-list/public-api.ts create mode 100644 projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.entities.ts diff --git a/projects/fusion-ui/components/text-with-dropped-list/index.ts b/projects/fusion-ui/components/text-with-dropped-list/index.ts new file mode 100644 index 000000000..7e1a213e3 --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/projects/fusion-ui/components/text-with-dropped-list/ng-package.json b/projects/fusion-ui/components/text-with-dropped-list/ng-package.json new file mode 100644 index 000000000..c154cd4ee --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + }, + "allowedNonPeerDependencies": ["."] +} diff --git a/projects/fusion-ui/components/text-with-dropped-list/public-api.ts b/projects/fusion-ui/components/text-with-dropped-list/public-api.ts new file mode 100644 index 000000000..a86af1af2 --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/public-api.ts @@ -0,0 +1 @@ +export * from './v4'; diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html index f298805d2..452a5cee1 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html @@ -1 +1,4 @@ -

text-with-dropped-list works!

+
{{text}}
+
    +
  • +
diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss index e69de29bb..47a33a29f 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss @@ -0,0 +1,39 @@ +@import '../../../src/style/scss/v4/vars/vars'; +@import '../../../src/style/scss/v4/mixins/mixins'; + +:host { + @extend %reset; + + --fu-text-color: var(--text-primary, #{$color-v4-text-primary}); + --fu-text-disabled-color: var(--text-disabled, #{$color-v4-text-disabled}); + --fu-text-border-width: 1px; + --fu-text-border-type: dashed; + --fu-text-border-color: var(--text-secondary, #{$color-v4-text-secondary}); + --fu-text-disabled-border-color: var(--text-disabled, #{$color-v4-text-disabled}); + + display: flex; + align-items: center; + position: relative; + + + .fu-text{ + @extend %font-v4-body-1; + color: var(--fu-text-color); + border-bottom: var(--fu-text-border-width) var(--fu-text-border-type) var(--fu-text-border-color); + } + .fu-list-wrapper{ + display: none; + } + &.fu-small{ + .fu-text{ + @extend %font-v4-body-2; + } + } + &.fu-disabled{ + .fu-text{ + pointer-events: none; + color: var(--fu-text-disabled-color); + border-bottom-color: var(--fu-text-disabled-border-color); + } + } +} \ No newline at end of file diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts index 3193c4292..86aa8e69e 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts @@ -18,9 +18,36 @@ export default { showPanel: true, panelPosition: 'bottom' } + }, + args: { + text: 'Text with help border' } } as Meta; type Story = StoryObj; export const Basic: Story = {}; + +export const Size: Story = { + render: args => ({ + props: {...args}, + template: ` +
+ + +
+` + }) +}; + +export const Disabled: Story = { + render: args => ({ + props: {...args}, + template: ` +
+ + +
+` + }) +}; diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts index 9bc0ab02c..655e2279b 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts @@ -1,11 +1,22 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; +import {DroppedListOption} from './text-with-dropped-list.entities'; @Component({ selector: 'fusion-text-with-dropped-list', standalone: true, + host: { + class: 'fusion-v4', + '[class.fu-disabled]': 'disabled', + '[class.fu-small]': 'size === "small"' + }, imports: [], templateUrl: './text-with-dropped-list.component.html', styleUrl: './text-with-dropped-list.component.scss', changeDetection: ChangeDetectionStrategy.OnPush }) -export class TextWithDroppedListComponent {} +export class TextWithDroppedListComponent { + @Input() size: 'small' | 'medium' = 'medium'; + @Input() text: string; + @Input() disabled = false; + @Input() list: DroppedListOption[] = []; +} diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.entities.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.entities.ts new file mode 100644 index 000000000..a7bf918ca --- /dev/null +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.entities.ts @@ -0,0 +1,6 @@ +export interface DroppedListOption { + id?: string | number; + label: string; + flag?: string; + imageUrl?: string; +} From 3343eb0f0df90dbe577f2f1c9f5f036e31fd7fc1 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Mon, 7 Oct 2024 13:50:56 +0300 Subject: [PATCH 03/25] feat(isct-381): added dropped-list component --- .../v4/dropped-list.component.html | 14 +++++++ .../v4/dropped-list.component.scss | 41 +++++++++++++++++++ .../v4/dropped-list.component.spec.ts | 23 +++++++++++ .../v4/dropped-list.component.stories.ts | 40 ++++++++++++++++++ .../dropped-list/v4/dropped-list.component.ts | 17 ++++++++ .../v4/dropped-list.entities.ts} | 4 +- .../dropped-list/v4/dropped-list.mock.ts | 19 +++++++++ .../components/dropped-list/v4/index.ts | 1 + .../dropped-list/v4/ng-package.json | 7 ++++ .../components/dropped-list/v4/public-api.ts | 2 + .../src/style/scss/v4/vars/_vars.scss | 4 +- 11 files changed, 169 insertions(+), 3 deletions(-) create mode 100644 projects/fusion-ui/components/dropped-list/v4/dropped-list.component.html create mode 100644 projects/fusion-ui/components/dropped-list/v4/dropped-list.component.scss create mode 100644 projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts create mode 100644 projects/fusion-ui/components/dropped-list/v4/dropped-list.component.stories.ts create mode 100644 projects/fusion-ui/components/dropped-list/v4/dropped-list.component.ts rename projects/fusion-ui/components/{text-with-dropped-list/v4/text-with-dropped-list.entities.ts => dropped-list/v4/dropped-list.entities.ts} (52%) create mode 100644 projects/fusion-ui/components/dropped-list/v4/dropped-list.mock.ts create mode 100644 projects/fusion-ui/components/dropped-list/v4/index.ts create mode 100644 projects/fusion-ui/components/dropped-list/v4/ng-package.json create mode 100644 projects/fusion-ui/components/dropped-list/v4/public-api.ts diff --git a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.html b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.html new file mode 100644 index 000000000..d96579368 --- /dev/null +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.html @@ -0,0 +1,14 @@ +
    + @for (listItem of list; track listItem){ +
  • + @if (listItem.flag){ + + } + @if (listItem.imageUrl){ + listItem.label + } +
    {{listItem.label}}
    +
    • + } +
+ diff --git a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.scss b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.scss new file mode 100644 index 000000000..39d701d56 --- /dev/null +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.scss @@ -0,0 +1,41 @@ +@import '../../../src/style/scss/v4/vars/vars'; +@import '../../../src/style/scss/v4/mixins/mixins'; + +:host { + @extend %reset; + + .fu-list-wrapper{ + display: flex; + flex-direction: column; + width: var(--fu-item-list-width, 224px); + padding: var(--fu-item-list-padding, 0 8px); + margin: 0; + list-style-type: none; + border-radius: var(--fu-item-list-border-radius, 8px); + border: var(--fu-item-list-border, 1px solid var(--common-divider, #{$color-v4-common-divider})); + box-shadow: var(--fu-item-list-box-shadow, #{$boxShadowV4-MD}); + background-color: var(--fu-item-list-background-color, var(--background-default, #{$color-v4-background-default})); + max-height: var(--fu-item-list-max-height, 210px); + overflow-x: hidden; + overflow-y: auto; + --fu-custom-scroll-bg-color: transparent; + @extend %customScroll; + + .fu-list-item{ + display: flex; + align-items: center; + gap: 8px; + @extend %font-v4-body-2; + color: var(--fu-item-color, var(--text-primary, #{$color-v4-text-primary})); + padding: var(--fu-item-padding, 6px 8px); + + .fu-list-item-image{ + @include size(20px); + border-radius: 4px; + } + } + } + .truncate{ + @extend %truncate; + } +} \ No newline at end of file diff --git a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts new file mode 100644 index 000000000..f9468ac20 --- /dev/null +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DroppedListComponent } from './dropped-list.component'; + +describe('DroppedListComponent', () => { + let component: DroppedListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DroppedListComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DroppedListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.stories.ts b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.stories.ts new file mode 100644 index 000000000..87840f04d --- /dev/null +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.stories.ts @@ -0,0 +1,40 @@ +import {componentWrapperDecorator, Meta, moduleMetadata, StoryObj} from '@storybook/angular'; +import {CommonModule} from '@angular/common'; +import {APPLICATION_LIST_OPTIONS, BASE_LIST_OPTIONS, COUNTRY_LIST_OPTIONS} from './dropped-list.mock'; +import {DroppedListComponent} from './dropped-list.component'; +import {SvgModule} from '@ironsource/fusion-ui/components/svg'; +import {environment} from '../../../../../stories/environments/environment'; +import {FlagComponent} from '@ironsource/fusion-ui/components/flag/v4'; +import {TooltipDirective} from '@ironsource/fusion-ui/components/tooltip/v4'; + +export default { + title: 'V4/Components/DataDisplay/Text with dropped list/Dropped List', + component: DroppedListComponent, + decorators: [ + moduleMetadata({ + declarations: [], + imports: [CommonModule, SvgModule.forRoot({assetsPath: environment.assetsPath}), FlagComponent, TooltipDirective] + }), + componentWrapperDecorator(story => `
${story}
`) + ], + tags: ['autodocs'], + parameters: { + options: { + showPanel: true, + panelPosition: 'bottom' + } + }, + args: { + list: BASE_LIST_OPTIONS + } +} as Meta; + +type Story = StoryObj; + +export const Basic: Story = {}; + +export const WithFlag: Story = {}; +WithFlag.args = {list: COUNTRY_LIST_OPTIONS}; + +export const WithApplication: Story = {}; +WithApplication.args = {list: APPLICATION_LIST_OPTIONS}; diff --git a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.ts b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.ts new file mode 100644 index 000000000..915da0a11 --- /dev/null +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.ts @@ -0,0 +1,17 @@ +import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; +import {DroppedListOption} from './dropped-list.entities'; +import {FlagComponent} from '@ironsource/fusion-ui/components/flag/v4'; +import {TooltipDirective} from '@ironsource/fusion-ui/components/tooltip/v4'; + +@Component({ + selector: 'fusion-dropped-list', + standalone: true, + host: {class: 'fusion-v4'}, + imports: [FlagComponent, TooltipDirective], + templateUrl: './dropped-list.component.html', + styleUrl: './dropped-list.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DroppedListComponent { + @Input() list: DroppedListOption[] = []; +} diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.entities.ts b/projects/fusion-ui/components/dropped-list/v4/dropped-list.entities.ts similarity index 52% rename from projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.entities.ts rename to projects/fusion-ui/components/dropped-list/v4/dropped-list.entities.ts index a7bf918ca..c2ef35922 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.entities.ts +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.entities.ts @@ -1,6 +1,8 @@ +import {CountryCode} from '@ironsource/fusion-ui/components/flag/v4'; + export interface DroppedListOption { id?: string | number; label: string; - flag?: string; + flag?: CountryCode; imageUrl?: string; } diff --git a/projects/fusion-ui/components/dropped-list/v4/dropped-list.mock.ts b/projects/fusion-ui/components/dropped-list/v4/dropped-list.mock.ts new file mode 100644 index 000000000..3e42ba5c7 --- /dev/null +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.mock.ts @@ -0,0 +1,19 @@ +import { + MOCK_OPTIONS_COUNTRIES, + MOK_APPLICATIONS_ONE_LINE_OPTIONS +} from '@ironsource/fusion-ui/components/dropdown/v3/stories/dropdown.mock'; +import {CountryCode} from '@ironsource/fusion-ui/components/flag/v4'; + +export const BASE_LIST_OPTIONS = new Array(10).fill(null).map((_, index) => ({ + label: `Option ${index + 1}` +})); + +export const COUNTRY_LIST_OPTIONS = MOCK_OPTIONS_COUNTRIES.map(country => ({ + flag: country.flag.toLowerCase() as CountryCode, + label: country.title +})); + +export const APPLICATION_LIST_OPTIONS = MOK_APPLICATIONS_ONE_LINE_OPTIONS.map(country => ({ + label: country.displayText, + imageUrl: country.image +})); diff --git a/projects/fusion-ui/components/dropped-list/v4/index.ts b/projects/fusion-ui/components/dropped-list/v4/index.ts new file mode 100644 index 000000000..7e1a213e3 --- /dev/null +++ b/projects/fusion-ui/components/dropped-list/v4/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/projects/fusion-ui/components/dropped-list/v4/ng-package.json b/projects/fusion-ui/components/dropped-list/v4/ng-package.json new file mode 100644 index 000000000..d9b2030ce --- /dev/null +++ b/projects/fusion-ui/components/dropped-list/v4/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + }, + "allowedNonPeerDependencies": ["."] +} diff --git a/projects/fusion-ui/components/dropped-list/v4/public-api.ts b/projects/fusion-ui/components/dropped-list/v4/public-api.ts new file mode 100644 index 000000000..c0fed58f9 --- /dev/null +++ b/projects/fusion-ui/components/dropped-list/v4/public-api.ts @@ -0,0 +1,2 @@ +export * from './dropped-list.component'; +export * from './dropped-list.entities'; diff --git a/projects/fusion-ui/src/style/scss/v4/vars/_vars.scss b/projects/fusion-ui/src/style/scss/v4/vars/_vars.scss index b37b54af6..0eddd7be1 100644 --- a/projects/fusion-ui/src/style/scss/v4/vars/_vars.scss +++ b/projects/fusion-ui/src/style/scss/v4/vars/_vars.scss @@ -49,13 +49,13 @@ $scrollBarColor: rgba(83, 87, 91, 0.3); %customScroll{ /* total width */ &::-webkit-scrollbar { - background-color: #fff; + background-color: var(--fu-custom-scroll-bg-color, #fff); width: 12px; } /* background of the scrollbar except button or resizer */ &::-webkit-scrollbar-track { - background-color: #fff; + background-color: var(--fu-custom-scroll-bg-color, #fff); } /* scrollbar itself */ From 0c033897b41b02ad991179958520f148a818d419 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Mon, 7 Oct 2024 14:16:00 +0300 Subject: [PATCH 04/25] ci(isct-381): added dropped-list component unit-tests --- .../v4/dropped-list.component.spec.ts | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts index f9468ac20..e646f294b 100644 --- a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts @@ -1,6 +1,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { DroppedListComponent } from './dropped-list.component'; +import { + APPLICATION_LIST_OPTIONS, + BASE_LIST_OPTIONS, + COUNTRY_LIST_OPTIONS +} from "@ironsource/fusion-ui/components/dropped-list/v4/dropped-list.mock"; +import {getLocaleFirstDayOfWeek} from "@angular/common"; describe('DroppedListComponent', () => { let component: DroppedListComponent; @@ -14,10 +20,61 @@ describe('DroppedListComponent', () => { fixture = TestBed.createComponent(DroppedListComponent); component = fixture.componentInstance; + component.list = BASE_LIST_OPTIONS; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); + + it('should has li list elements', () => { + const itemsEl = fixture.nativeElement.querySelectorAll('li'); + expect(itemsEl.length).toBe(BASE_LIST_OPTIONS.length); + }); + + it('should has li item with text', () => { + const itemsEl = fixture.nativeElement.querySelectorAll('li'); + itemsEl.forEach((item, index) => { + expect(item.textContent).toBe(BASE_LIST_OPTIONS[index].label); + }); + }); + + describe('DroppedListComponent with countries', () => { + beforeEach(async () => { + fixture = TestBed.createComponent(DroppedListComponent); + component = fixture.componentInstance; + component.list = COUNTRY_LIST_OPTIONS; + fixture.detectChanges(); + }); + + it('should has li item with Country flag and name', () => { + const itemsEl = fixture.nativeElement.querySelectorAll('li'); + itemsEl.forEach((item, index) => { + const flagEl = item.querySelector('fusion-flag'); + expect(flagEl.getAttribute('ng-reflect-country-code')).toBe(COUNTRY_LIST_OPTIONS[index].flag); + expect(item.textContent).toBe(COUNTRY_LIST_OPTIONS[index].label); + }); + }); + }); + + describe('DroppedListComponent with applications', () => { + beforeEach(async () => { + fixture = TestBed.createComponent(DroppedListComponent); + component = fixture.componentInstance; + component.list = APPLICATION_LIST_OPTIONS; + fixture.detectChanges(); + }); + + it('should has li item with application image and name', () => { + const itemsEl = fixture.nativeElement.querySelectorAll('li'); + itemsEl.forEach((item, index) => { + const appImageEl = item.querySelector('img.fu-list-item-image'); + expect(appImageEl.getAttribute('src')).toBe(APPLICATION_LIST_OPTIONS[index].imageUrl); + expect(item.textContent).toBe(APPLICATION_LIST_OPTIONS[index].label); + }); + }); + }); + + }); From 3a72f8e8aa337937c472e7ada87c1b0b01cc4112 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Mon, 7 Oct 2024 14:36:49 +0300 Subject: [PATCH 05/25] chore(isct-381): re-arrange dropped-list component stories --- .../dropped-list/v4/dropped-list.component.stories.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.stories.ts b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.stories.ts index 87840f04d..bc062dc19 100644 --- a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.stories.ts +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.stories.ts @@ -33,8 +33,8 @@ type Story = StoryObj; export const Basic: Story = {}; -export const WithFlag: Story = {}; -WithFlag.args = {list: COUNTRY_LIST_OPTIONS}; - export const WithApplication: Story = {}; WithApplication.args = {list: APPLICATION_LIST_OPTIONS}; + +export const WithFlag: Story = {}; +WithFlag.args = {list: COUNTRY_LIST_OPTIONS}; From 452c8d20cf5dc964fd5a88126fe8f7d402b90ff0 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Mon, 7 Oct 2024 16:46:05 +0300 Subject: [PATCH 06/25] feat(isct-381): added text-with-dropped-list component --- .../v4/text-with-dropped-list.component.html | 14 ++++-- .../v4/text-with-dropped-list.component.scss | 14 ++++-- ...ext-with-dropped-list.component.stories.ts | 28 ++++++++--- .../v4/text-with-dropped-list.component.ts | 50 +++++++++++++++++-- 4 files changed, 86 insertions(+), 20 deletions(-) diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html index 452a5cee1..bde1f6cc1 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html @@ -1,4 +1,10 @@ -
{{text}}
-
    -
  • -
+
{{text}}
+@if (showedList$ | async){ + +} diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss index 47a33a29f..3a3df9402 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss @@ -12,18 +12,17 @@ --fu-text-disabled-border-color: var(--text-disabled, #{$color-v4-text-disabled}); display: flex; + width: fit-content; align-items: center; position: relative; - .fu-text{ @extend %font-v4-body-1; color: var(--fu-text-color); border-bottom: var(--fu-text-border-width) var(--fu-text-border-type) var(--fu-text-border-color); + cursor: default; } - .fu-list-wrapper{ - display: none; - } + &.fu-small{ .fu-text{ @extend %font-v4-body-2; @@ -36,4 +35,11 @@ border-bottom-color: var(--fu-text-disabled-border-color); } } + + .fu-dropped-list{ + position: absolute; + top: calc(100% + 4px); + right: var(--fu-dropped-list-right); + z-index: getZIndexLayerOffset(notification, 3); + } } \ No newline at end of file diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts index 86aa8e69e..b4c1d34f5 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.stories.ts @@ -1,6 +1,13 @@ import {componentWrapperDecorator, Meta, moduleMetadata, StoryObj} from '@storybook/angular'; import {CommonModule} from '@angular/common'; import {TextWithDroppedListComponent} from './text-with-dropped-list.component'; +import { + APPLICATION_LIST_OPTIONS, + BASE_LIST_OPTIONS, + COUNTRY_LIST_OPTIONS +} from '@ironsource/fusion-ui/components/dropped-list/v4/dropped-list.mock'; +import {SvgModule} from '@ironsource/fusion-ui/components/svg'; +import {environment} from '../../../../../stories/environments/environment'; export default { title: 'V4/Components/DataDisplay/Text with dropped list', @@ -8,9 +15,9 @@ export default { decorators: [ moduleMetadata({ declarations: [], - imports: [CommonModule] + imports: [CommonModule, SvgModule.forRoot({assetsPath: environment.assetsPath})] }), - componentWrapperDecorator(story => `
${story}
`) + componentWrapperDecorator(story => `
${story}
`) ], tags: ['autodocs'], parameters: { @@ -20,7 +27,8 @@ export default { } }, args: { - text: 'Text with help border' + text: 'Text with help border', + list: BASE_LIST_OPTIONS } } as Meta; @@ -30,11 +38,15 @@ export const Basic: Story = {}; export const Size: Story = { render: args => ({ - props: {...args}, + props: { + ...args, + appList: APPLICATION_LIST_OPTIONS, + countryList: COUNTRY_LIST_OPTIONS + }, template: `
- - + +
` }) @@ -45,8 +57,8 @@ export const Disabled: Story = { props: {...args}, template: `
- - + +
` }) diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts index 655e2279b..78d07767e 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts @@ -1,5 +1,11 @@ -import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; -import {DroppedListOption} from './text-with-dropped-list.entities'; +import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {BehaviorSubject} from 'rxjs'; +import {computePosition, flip, shift} from '@floating-ui/dom'; +import {RepositionDirective} from '@ironsource/fusion-ui/directives/reposition'; +import {UniqueIdService} from '@ironsource/fusion-ui/services/unique-id'; +import {TeleportingModule} from '@ironsource/fusion-ui/directives/teleporting'; +import {DroppedListComponent, DroppedListOption} from '@ironsource/fusion-ui/components/dropped-list/v4'; @Component({ selector: 'fusion-text-with-dropped-list', @@ -7,9 +13,11 @@ import {DroppedListOption} from './text-with-dropped-list.entities'; host: { class: 'fusion-v4', '[class.fu-disabled]': 'disabled', - '[class.fu-small]': 'size === "small"' + '[class.fu-small]': 'size === "small"', + '(mouseenter)': 'moseEnter()', + '(mouseleave)': 'mouseLeave()' }, - imports: [], + imports: [CommonModule, TeleportingModule, RepositionDirective, DroppedListComponent], templateUrl: './text-with-dropped-list.component.html', styleUrl: './text-with-dropped-list.component.scss', changeDetection: ChangeDetectionStrategy.OnPush @@ -19,4 +27,38 @@ export class TextWithDroppedListComponent { @Input() text: string; @Input() disabled = false; @Input() list: DroppedListOption[] = []; + + #uniqueIdService: UniqueIdService = inject(UniqueIdService); + + /** @ignore */ + id = 'fu_' + this.#uniqueIdService.getUniqueId().toString(); + /** @ignore */ + showedList$ = new BehaviorSubject(false); + + /** @ignore */ + moseEnter() { + if (this.disabled) { + return; + } + + this.showedList$.next(true); + + setTimeout(() => { + const texEl = document.querySelector(`#${this.id}`); + const popListEl = document.querySelector(`#for_${this.id}`); + + computePosition(texEl, popListEl, { + placement: 'bottom', + middleware: [flip(), shift({padding: 5})] + }).then(({x, y}) => { + popListEl.style.left = x + 'px'; + popListEl.style.top = y + 'px'; + }); + }); + } + + /** @ignore */ + mouseLeave() { + this.showedList$.next(false); + } } From 6985d43db3ae68ce577710bc904e65c62fbfb26a Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Tue, 8 Oct 2024 10:14:53 +0300 Subject: [PATCH 07/25] feat(isct-381): added unit tests for text-with-dropped-list component --- .../v4/dropped-list.component.spec.ts | 1 - .../text-with-dropped-list.component.spec.ts | 26 ++++++++++++++++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts index e646f294b..d835e8acf 100644 --- a/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts +++ b/projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts @@ -6,7 +6,6 @@ import { BASE_LIST_OPTIONS, COUNTRY_LIST_OPTIONS } from "@ironsource/fusion-ui/components/dropped-list/v4/dropped-list.mock"; -import {getLocaleFirstDayOfWeek} from "@angular/common"; describe('DroppedListComponent', () => { let component: DroppedListComponent; diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts index bd66492ba..3a181e81c 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts @@ -1,6 +1,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { TextWithDroppedListComponent } from './text-with-dropped-list.component'; +import {BASE_LIST_OPTIONS} from "@ironsource/fusion-ui/components/dropped-list/v4/dropped-list.mock"; + +const TEXT = 'Test text'; describe('TextWithDroppedListComponent', () => { let component: TextWithDroppedListComponent; @@ -14,10 +16,32 @@ describe('TextWithDroppedListComponent', () => { fixture = TestBed.createComponent(TextWithDroppedListComponent); component = fixture.componentInstance; + component.text = TEXT; + component.list = BASE_LIST_OPTIONS + component.size = 'small'; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); + + it('should have text', () => { + const textEl = fixture.nativeElement.querySelector('.fu-text'); + expect(textEl).toBeTruthy(); + expect(textEl.textContent).toBe(TEXT); + }); + + it('should have class small', () => { + expect(fixture.nativeElement.classList).toContain('fu-small') + }); + + it('should have list on mouseenter', () => { + fixture.nativeElement.dispatchEvent(new Event('mouseenter')); + fixture.detectChanges(); + const droppedListEl = fixture.nativeElement.querySelector('.fu-dropped-list'); + expect(droppedListEl).toBeTruthy(); + const textElId = fixture.nativeElement.querySelector('.fu-text').id; + expect(droppedListEl.id).toBe('for_'+textElId); + }); }); From 0546b0a248b7c5ffe4eb67f241195f3f1a4bf17a Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Tue, 8 Oct 2024 11:42:07 +0300 Subject: [PATCH 08/25] chore(isct-381): code refactor for text-with-dropped-list component --- .../v4/text-with-dropped-list.component.html | 5 +- .../v4/text-with-dropped-list.component.scss | 1 + .../v4/text-with-dropped-list.component.ts | 67 ++++++++++--------- 3 files changed, 39 insertions(+), 34 deletions(-) diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html index bde1f6cc1..cc6a5dcd5 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html @@ -1,10 +1,7 @@ -
{{text}}
+
{{text}}
@if (showedList$ | async){ } diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss index 3a3df9402..ca437627d 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss @@ -29,6 +29,7 @@ } } &.fu-disabled{ + pointer-events: none; .fu-text{ pointer-events: none; color: var(--fu-text-disabled-color); diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts index 78d07767e..e040c18c3 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.ts @@ -1,9 +1,9 @@ -import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, OnInit} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {BehaviorSubject} from 'rxjs'; +import {BehaviorSubject, from, Subject} from 'rxjs'; +import {debounceTime, filter, switchMap, takeUntil, tap} from 'rxjs/operators'; import {computePosition, flip, shift} from '@floating-ui/dom'; import {RepositionDirective} from '@ironsource/fusion-ui/directives/reposition'; -import {UniqueIdService} from '@ironsource/fusion-ui/services/unique-id'; import {TeleportingModule} from '@ironsource/fusion-ui/directives/teleporting'; import {DroppedListComponent, DroppedListOption} from '@ironsource/fusion-ui/components/dropped-list/v4'; @@ -14,51 +14,58 @@ import {DroppedListComponent, DroppedListOption} from '@ironsource/fusion-ui/com class: 'fusion-v4', '[class.fu-disabled]': 'disabled', '[class.fu-small]': 'size === "small"', - '(mouseenter)': 'moseEnter()', - '(mouseleave)': 'mouseLeave()' + '(mouseenter)': 'showedList$.next(true)', + '(mouseleave)': 'showedList$.next(false)' }, imports: [CommonModule, TeleportingModule, RepositionDirective, DroppedListComponent], templateUrl: './text-with-dropped-list.component.html', styleUrl: './text-with-dropped-list.component.scss', changeDetection: ChangeDetectionStrategy.OnPush }) -export class TextWithDroppedListComponent { +export class TextWithDroppedListComponent implements OnInit, OnDestroy { @Input() size: 'small' | 'medium' = 'medium'; @Input() text: string; @Input() disabled = false; @Input() list: DroppedListOption[] = []; - #uniqueIdService: UniqueIdService = inject(UniqueIdService); - - /** @ignore */ - id = 'fu_' + this.#uniqueIdService.getUniqueId().toString(); /** @ignore */ showedList$ = new BehaviorSubject(false); - /** @ignore */ - moseEnter() { - if (this.disabled) { - return; - } + #onDestroy$ = new Subject(); + #hostElement: HTMLElement = this.hostElementRef.nativeElement; + #textLabel: HTMLElement; + #droppedList: HTMLElement; - this.showedList$.next(true); + constructor(private hostElementRef: ElementRef) {} - setTimeout(() => { - const texEl = document.querySelector(`#${this.id}`); - const popListEl = document.querySelector(`#for_${this.id}`); - - computePosition(texEl, popListEl, { - placement: 'bottom', - middleware: [flip(), shift({padding: 5})] - }).then(({x, y}) => { - popListEl.style.left = x + 'px'; - popListEl.style.top = y + 'px'; + ngOnInit() { + this.showedList$ + .asObservable() + .pipe( + takeUntil(this.#onDestroy$), + filter(isShow => isShow && !this.list.length), + debounceTime(0), + tap(() => { + this.#textLabel = this.#hostElement.querySelector(`.fu-text`); + this.#droppedList = this.#hostElement.querySelector(`fusion-dropped-list`); + }), + switchMap(() => + from( + computePosition(this.#textLabel, this.#droppedList, { + placement: 'bottom', + middleware: [flip(), shift({padding: 5})] + }) + ) + ) + ) + .subscribe(({x, y}) => { + this.#droppedList.style.left = x + 'px'; + this.#droppedList.style.top = y + 'px'; }); - }); } - /** @ignore */ - mouseLeave() { - this.showedList$.next(false); + ngOnDestroy(): void { + this.#onDestroy$.next(); + this.#onDestroy$.complete(); } } From 0d73a5341112eeb44eb4dfa91877da9ae35c400e Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Tue, 8 Oct 2024 11:43:07 +0300 Subject: [PATCH 09/25] chore(isct-381): update unit test by changes --- .../v4/text-with-dropped-list.component.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts index 3a181e81c..62caca660 100644 --- a/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts +++ b/projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts @@ -41,7 +41,5 @@ describe('TextWithDroppedListComponent', () => { fixture.detectChanges(); const droppedListEl = fixture.nativeElement.querySelector('.fu-dropped-list'); expect(droppedListEl).toBeTruthy(); - const textElId = fixture.nativeElement.querySelector('.fu-text').id; - expect(droppedListEl.id).toBe('for_'+textElId); }); }); From cb1f767044908bb53b0c01bf52b67bfcf1e37f5d Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Tue, 8 Oct 2024 13:21:48 +0300 Subject: [PATCH 10/25] chore(old-doc): some check on old doc --- .../table-docs/table-docs.component.html | 18 ++++++++++-------- .../table-docs/table-docs.component.ts | 6 ++++-- .../tooltip-docs/tooltip-docs.component.html | 14 ++++++-------- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.html b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.html index 83ee23eb9..34e5bdb02 100644 --- a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.html +++ b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.html @@ -3,8 +3,8 @@
Type
- Table - Example document.addEventListener("DOMContentLoaded", onLoad, false);' > - <!–code examples by framework–> + Server Error! Something wrong.... Try again later.Table - Example + +
Grouped Table
Table - Example [options]="optionsGroupedTable" > - - + <!–UI-Component Examples–> + <!–UI-Component Configuration Doc–>
Configuration
need to update this. Table - Example sortTableOnDataChanges = false; expandedRows: {[key: number]: boolean} = {}; -// ---- Interfaces and Enums +// ---- Interfaces and Enums interface TableOptions { sortingType?: string; @@ -3049,6 +3050,7 @@

Table - Example

expandRow(tableRowExpandData: TableRowExpandEmitter)" > +--> diff --git a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts index 61cb47217..3850daadd 100644 --- a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts +++ b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts @@ -35,7 +35,9 @@ const tblColumns: Array = [ digitsInfo: '1.0-3' }, customErrorMapping: { - required: {errorMessageKey: 'required'}, + required: { + errorMessageKey: 'required' + }, min: { errorMessageKey: 'min', textMapping: [{key: 'minValue', value: '10'}] @@ -174,7 +176,7 @@ export class TableDocsComponent implements OnInit, OnDestroy { // for base table will NOT use select column columnsBasic: Array = tblColumns.filter(cel => cel.key !== 'checkbox'); - optionsBasicTotals = { + optionsBasicTotals: TableOptions = { sortingType: 'local', hasTotalsRow: true }; diff --git a/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.html b/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.html index c76a68d16..d23c726ca 100644 --- a/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.html +++ b/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.html @@ -324,7 +324,7 @@
-
Tooltip on top
+
Tooltip on top
@@ -352,7 +352,6 @@
-
@@ -392,8 +391,8 @@ class="is-collapsible" code=" fusion-tooltip { - --tooltip-background-color: white; - --tooltip-text-color: grey; + --tooltip-background-color: white; + --tooltip-text-color: grey; } " > @@ -433,7 +432,7 @@ - <!–UI-Component Configuration Doc–> +
Configuration
---> From cb243511aca4a88f4ea3f3fd71d15781a67f93cf Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 10 Oct 2024 09:58:43 +0300 Subject: [PATCH 11/25] chore(old-doc): added example component to use in tooltip --- .../exml-for-tooltip.component.html | 11 ++++++++ .../exml-for-tooltip.component.scss | 28 +++++++++++++++++++ .../exml-for-tooltip.component.spec.ts | 23 +++++++++++++++ .../exml-for-tooltip.component.ts | 12 ++++++++ 4 files changed, 74 insertions(+) create mode 100644 projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.html create mode 100644 projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.scss create mode 100644 projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.spec.ts create mode 100644 projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.ts diff --git a/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.html b/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.html new file mode 100644 index 000000000..489025c12 --- /dev/null +++ b/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.html @@ -0,0 +1,11 @@ +
+ To locate your custom product page ID,
do the following: +
    +
  1. Open your product page in a web browser.
    2. +
  2. Locate the product page ID at the end of the URL.
    3. +
  3. Copy the product page ID.
    4. +
+
+
+ https://apps.apple.com/us/app/cubric/id1600377342?ppid={{ppid}} +
diff --git a/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.scss b/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.scss new file mode 100644 index 000000000..aad711e13 --- /dev/null +++ b/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.scss @@ -0,0 +1,28 @@ +:host { + width: 328px; + height: 172px; + pointer-events: none; + border-radius: 3px; + background: #12243D; + color: #fff; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30); + display: flex; + padding: 10px; + flex-direction: column; + justify-content: flex-end; + align-items: center; + gap: 10px; + align-self: stretch; + font-family: "Open Sans"; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; + + .exmpl-link{ + margin-bottom: 26px; + span{ + color: #3091F6; + } + } +} \ No newline at end of file diff --git a/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.spec.ts b/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.spec.ts new file mode 100644 index 000000000..c4510dada --- /dev/null +++ b/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExmlForTooltipComponent } from './exml-for-tooltip.component'; + +describe('ExmlForTooltipComponent', () => { + let component: ExmlForTooltipComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ExmlForTooltipComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ExmlForTooltipComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.ts b/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.ts new file mode 100644 index 000000000..dddc347e3 --- /dev/null +++ b/projects/fusion-docs/src/app/components/exml-for-tooltip/exml-for-tooltip.component.ts @@ -0,0 +1,12 @@ +import {Component, Input} from '@angular/core'; + +@Component({ + selector: 'fusion-exml-for-tooltip', + standalone: true, + imports: [], + templateUrl: './exml-for-tooltip.component.html', + styleUrl: './exml-for-tooltip.component.scss' +}) +export class ExmlForTooltipComponent { + @Input() ppid: string; +} From f1a02f7c57b7ad2207328b235c36d8da02c3b8ad Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 10 Oct 2024 09:59:16 +0300 Subject: [PATCH 12/25] chore(old-doc): set to use tooltip v1 in old docs app --- projects/fusion-docs/src/app/app.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/fusion-docs/src/app/app.module.ts b/projects/fusion-docs/src/app/app.module.ts index 35927a04c..0b0671988 100644 --- a/projects/fusion-docs/src/app/app.module.ts +++ b/projects/fusion-docs/src/app/app.module.ts @@ -4,7 +4,7 @@ import {AppComponent} from './app.component'; import {AppRoutingModule} from './app.routing'; import {environment} from '../environments/environment'; import {SvgModule} from '@ironsource/fusion-ui/components/svg'; -import {TooltipModule} from '@ironsource/fusion-ui/components/tooltip/v2'; +import {TooltipModule} from '@ironsource/fusion-ui/components/tooltip/v1'; import {ReactiveFormsModule} from '@angular/forms'; import {IconModule} from '@ironsource/fusion-ui/components/icon/v1'; import {ModalModule} from '@ironsource/fusion-ui/components/modal'; From ad30d35b2d6c46d43024d188162e7d3aa7996a08 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 10 Oct 2024 10:01:43 +0300 Subject: [PATCH 13/25] feat(tooltip): add support for custom component using in tooltip v1 (base) --- .../tooltip/common/base/tooltip.base.component.ts | 7 +++++-- .../tooltip/common/base/tooltip.base.directive.ts | 6 +++--- .../components/tooltip/common/base/tooltip.entities.ts | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.component.ts b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.component.ts index 0ee2ec53c..85c52b9ff 100644 --- a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.component.ts +++ b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.component.ts @@ -19,9 +19,12 @@ export abstract class TooltipBaseComponent implements AfterViewInit, OnChanges { this.hostEl = newTooltipData.parentEl; this.position = newTooltipData.position || TooltipPosition.Top; this.content = - newTooltipData.type === TooltipType.Html + newTooltipData.type === TooltipType.Html && typeof newTooltipData.content === 'string' ? this.sanitizer.bypassSecurityTrustHtml(newTooltipData.content) - : newTooltipData.content; + : newTooltipData.type === TooltipType.Component + ? newTooltipData.content + : ''; + this.width = newTooltipData.width; this.icon = newTooltipData.icon; this.type = newTooltipData.type || TooltipType.Html; diff --git a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts index 4610ec890..0508e1f6e 100644 --- a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts +++ b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, HostBinding, Inject, Input, OnDestroy, Renderer2} from '@angular/core'; +import {Component, Directive, ElementRef, HostBinding, Inject, Input, OnDestroy, Renderer2, Type} from '@angular/core'; import {ITooltipData, TooltipPosition, TooltipType} from './tooltip.entities'; import {TooltipService} from './tooltip.base.service'; import {Subject, fromEvent, merge, Observable, of} from 'rxjs'; @@ -8,7 +8,7 @@ import {DOCUMENT} from '@angular/common'; @Directive() export abstract class TooltipBaseDirective implements OnDestroy { - @Input() set fusionTooltip(tooltipContent: string) { + @Input() set fusionTooltip(tooltipContent: string | Type) { if (!!tooltipContent) { this.clearTooltipContentListener$.next(); this.fusionTooltipContent = tooltipContent; @@ -32,7 +32,7 @@ export abstract class TooltipBaseDirective implements OnDestroy { private clearHover$ = merge(this.clearTooltipContentListener$.asObservable(), this.onDestroy$.asObservable()); private takeUntil$ = merge(this.clearListeners$.asObservable(), this.onDestroy$.asObservable()); private onMouseEnterObservable$: Observable; - private fusionTooltipContent = ''; + private fusionTooltipContent: string | Type = ''; constructor( private elementRef: ElementRef, diff --git a/projects/fusion-ui/components/tooltip/common/base/tooltip.entities.ts b/projects/fusion-ui/components/tooltip/common/base/tooltip.entities.ts index 92276bdff..539602ad9 100644 --- a/projects/fusion-ui/components/tooltip/common/base/tooltip.entities.ts +++ b/projects/fusion-ui/components/tooltip/common/base/tooltip.entities.ts @@ -20,7 +20,7 @@ export enum TooltipType { export interface ITooltipData { parentEl?: ElementRef; position?: TooltipPosition; - content?: string; + content?: string | Type; width?: number; type?: TooltipType; icon?: IconData; From 7d6f6e400451edacd282874d11026aeb874ad54f Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 10 Oct 2024 11:06:52 +0300 Subject: [PATCH 14/25] chore(tooltip): refactor tooltip v1 repo template --- .../components/tooltip/v1/tooltip.component.html | 16 +++++++++------- .../components/tooltip/v1/tooltip.module.ts | 3 +-- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/projects/fusion-ui/components/tooltip/v1/tooltip.component.html b/projects/fusion-ui/components/tooltip/v1/tooltip.component.html index 6a448190e..586d760ec 100644 --- a/projects/fusion-ui/components/tooltip/v1/tooltip.component.html +++ b/projects/fusion-ui/components/tooltip/v1/tooltip.component.html @@ -1,7 +1,9 @@ - - -
- - - - +@if (isHtml){ + +
+} @else { + + +} diff --git a/projects/fusion-ui/components/tooltip/v1/tooltip.module.ts b/projects/fusion-ui/components/tooltip/v1/tooltip.module.ts index cb2ef7856..66bae48d2 100644 --- a/projects/fusion-ui/components/tooltip/v1/tooltip.module.ts +++ b/projects/fusion-ui/components/tooltip/v1/tooltip.module.ts @@ -1,13 +1,12 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {TooltipDirective} from './tooltip.directive'; -import {DynamicComponentsModule} from '@ironsource/fusion-ui/components/dynamic-components/v1'; import {IconModule} from '@ironsource/fusion-ui/components/icon/v1'; import {TooltipComponent} from './tooltip.component'; @NgModule({ declarations: [TooltipDirective, TooltipComponent], exports: [TooltipDirective, TooltipComponent], - imports: [CommonModule, DynamicComponentsModule, IconModule] + imports: [CommonModule, IconModule] }) export class TooltipModule {} From 374aab32428a211da22c11a6eb93e3038163213c Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 10 Oct 2024 11:13:55 +0300 Subject: [PATCH 15/25] chore(tooltip-doc): add example for using custom component in tooltip v1 --- .../components/tooltip-docs/tooltip-docs.component.html | 2 +- .../components/tooltip-docs/tooltip-docs.component.ts | 9 ++++++++- .../tooltip/common/base/tooltip.base.directive.ts | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.html b/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.html index d23c726ca..43c1aa199 100644 --- a/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.html +++ b/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.html @@ -324,7 +324,7 @@
-
Tooltip on top
+
Tooltip on top
diff --git a/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.ts b/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.ts index 8c8f00cea..798ec6e8a 100644 --- a/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.ts +++ b/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, OnInit, Renderer2} from '@angular/core'; +import {Component, ElementRef, OnInit, Renderer2, Type} from '@angular/core'; import {TooltipPosition, TooltipType} from '@ironsource/fusion-ui/components/tooltip/common/base'; import {DocsMenuItem} from '../../../components/docs-menu/docs-menu'; import {DocsLayoutService} from '../../docs/docs-layout.service'; @@ -6,6 +6,7 @@ import {BehaviorSubject} from 'rxjs'; import {delay, tap} from 'rxjs/operators'; import {VersionService} from '../../../services/version/version.service'; import {TableColumnTypeEnum} from '@ironsource/fusion-ui/components/table/common/entities'; +import {ExmlForTooltipComponent} from '../../../components/exml-for-tooltip/exml-for-tooltip.component'; @Component({ selector: 'fusion-tooltip-docs', @@ -16,6 +17,12 @@ export class TooltipDocsComponent implements OnInit { public tooltipPosition = TooltipPosition; private styleElement: HTMLStyleElement; tooltipTypeHtml = TooltipType.Html; + tooltipTypeComponent = TooltipType.Component; + tooltipCustomComponent = ExmlForTooltipComponent as Type; + tooltipCustomData = { + componentData: {ppid: 'a0ad70e0-bc66-414c-901b-35a410cffd50A'} + }; + rightMenu: DocsMenuItem[] = [ { title: 'Content', diff --git a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts index 0508e1f6e..b02b00552 100644 --- a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts +++ b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts @@ -95,7 +95,7 @@ export abstract class TooltipBaseDirective implements OnDestroy { icon: this.tooltipIcon, width: this.tooltipWidth, type: this.tooltipType, - componentData: this.tooltipComponentData + componentData: this.tooltipComponentData.componentData }; this.tooltipService.showTooltip(tooltipData); } From ae719f64049cc450d27ed1e71d1f9bb6102e5844 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 10 Oct 2024 11:29:02 +0300 Subject: [PATCH 16/25] feat(table-v1): add support to using custom component in table v1 header tooltip --- .../table/common/entities/table-column.ts | 2 ++ .../components/table/v1/table.component.html | 21 +++++++++++++------ .../components/table/v1/table.component.ts | 2 ++ 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/projects/fusion-ui/components/table/common/entities/table-column.ts b/projects/fusion-ui/components/table/common/entities/table-column.ts index 6a7cdb73c..994c9ed93 100644 --- a/projects/fusion-ui/components/table/common/entities/table-column.ts +++ b/projects/fusion-ui/components/table/common/entities/table-column.ts @@ -4,6 +4,7 @@ import {DropdownOption} from '@ironsource/fusion-ui/components/dropdown-option/e import {EventEmitter} from '@angular/core'; import {CellPosition} from './table-cell-position'; import {IconData} from '@ironsource/fusion-ui/components/icon/v1'; +import {TooltipCustom} from '@ironsource/fusion-ui/components/tooltip/common/base'; export type TableCellAlign = 'left' | 'center' | 'right'; @@ -24,6 +25,7 @@ export interface TableColumn { headerAlign?: TableCellAlign; tooltip?: string; tooltipIcon?: IconData; + tooltipCustom?: TooltipCustom; pipeOptions?: string; dataParser?: (data: any) => any; // used for data parsing (null to Undefined in budget for example) // customErrorMapping example, turn pattern error to decimal error: { pattern: { error: 'decimalMax', values: {'decimalMax': 2}}} diff --git a/projects/fusion-ui/components/table/v1/table.component.html b/projects/fusion-ui/components/table/v1/table.component.html index b56e2bc27..8a08c84f3 100644 --- a/projects/fusion-ui/components/table/v1/table.component.html +++ b/projects/fusion-ui/components/table/v1/table.component.html @@ -22,12 +22,21 @@ {{ column.title }} - + @if (column.tooltip){ + + } @else if (column.tooltipCustom){ + + } column.type === TableColumnTypeEnum.Checkbox && column.title !== '') : false; From 9ec2353541c0472cd09ab1a69697f628d6fd4b08 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 10 Oct 2024 11:34:28 +0300 Subject: [PATCH 17/25] docs(table-v1-doc): add example for using custom component in table header tooltip --- .../table-docs/table-docs.component.html | 5114 ++++++++--------- .../table-docs/table-docs.component.ts | 10 +- .../table-docs/table-docs.module.ts | 4 +- 3 files changed, 2569 insertions(+), 2559 deletions(-) diff --git a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.html b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.html index 34e5bdb02..e7c539666 100644 --- a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.html +++ b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.html @@ -7,9 +7,9 @@ ' > Table - Example

Table Component example

@@ -184,9 +184,9 @@

Table - Example

> Table - Example { // define data const tableColumns = [ { key: "id", title: "Id", sort: "asc" }, @@ -339,255 +339,196 @@

Table - Example

Server Error! Something wrong.... Try again later. + >Server Error! Something wrong.... Try again later. +
- + enum TableRowClassesEnum { + Selected = 'is-row-selected', + Disabled = 'is-row-disabled', + Loading = 'is-row-loading' + }" + > + + + + + + -->
diff --git a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts index 3850daadd..d8a68534e 100644 --- a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts +++ b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts @@ -16,11 +16,14 @@ import {Router} from '@angular/router'; import {TableCustomNoDataComponent} from '../../../components/table-custom-no-data/table-custom-no-data.component'; import {VersionService} from '../../../services/version/version.service'; import {StyleVersion} from '@ironsource/fusion-ui/components/fusion-base'; +import {ExmlForTooltipComponent} from '../../../components/exml-for-tooltip/exml-for-tooltip.component'; +import {TooltipCustom} from '@ironsource/fusion-ui/components/tooltip/common/base'; const tblOptions: TableOptions = { sortingType: 'local', remove: {active: true, onRemove: new EventEmitter()} }; + const tblColumns: Array = [ {key: 'checkbox', type: TableColumnTypeEnum.Checkbox, width: '35px'}, {key: 'id', title: 'Id', sort: 'asc'}, // 'asc' | 'desc' | '' @@ -45,7 +48,12 @@ const tblColumns: Array = [ }, title: 'Bid', width: '85px', - tooltip: 'Lorem ipsum dolor sit amet', + tooltipCustom: { + content: { + component: ExmlForTooltipComponent as Type, + dataInputs: {ppid: 'a0ad70e0-bc66-414c-901b-35a410cffd50A'} + } + } as TooltipCustom, align: 'right' }, {key: 'email', title: 'Email', sort: ''}, diff --git a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.module.ts b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.module.ts index 60ca228b8..e5668f780 100644 --- a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.module.ts +++ b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.module.ts @@ -11,6 +11,7 @@ import {IconModule} from '@ironsource/fusion-ui/components/icon/v1'; import {TableModule} from '@ironsource/fusion-ui/components/table/v1'; import {TableCellIconExampleModule} from '../../../components/table-cell-icon-exmpale'; import {TableCustomNoDataModule} from '../../../components/table-custom-no-data/table-custom-no-data.module'; +import {ExmlForTooltipComponent} from '../../../components/exml-for-tooltip/exml-for-tooltip.component'; const routes: Routes = [{path: '', component: TableDocsComponent}]; @@ -27,7 +28,8 @@ const routes: Routes = [{path: '', component: TableDocsComponent}]; IconModule, AlertModule, TableCellIconExampleModule, - TableCustomNoDataModule + TableCustomNoDataModule, + ExmlForTooltipComponent ] }) export class TableDocsModule {} From a91d5bf676c9f572760d967d4df392bdf85d3346 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Thu, 10 Oct 2024 08:46:47 +0000 Subject: [PATCH 18/25] chore(release): 8.4.0-rc.6 --- CHANGELOG.md | 21 +++++++++++++++++++++ package.json | 2 +- projects/fusion-ui/package.json | 2 +- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bc5203d1..7f897be48 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,27 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [8.4.0-rc.6](https://github.com/ironSource/fusion-ui/compare/v8.4.0-rc.5...v8.4.0-rc.6) (2024-10-10) + + +### Features + +* **isct-381:** added dropped-list component ([3343eb0](https://github.com/ironSource/fusion-ui/commit/3343eb0f0df90dbe577f2f1c9f5f036e31fd7fc1)) +* **isct-381:** added text-with-dropped-list component ([452c8d2](https://github.com/ironSource/fusion-ui/commit/452c8d20cf5dc964fd5a88126fe8f7d402b90ff0)) +* **isct-381:** added unit tests for text-with-dropped-list component ([6985d43](https://github.com/ironSource/fusion-ui/commit/6985d43db3ae68ce577710bc904e65c62fbfb26a)) +* **table-v1:** add support to using custom component in table v1 header tooltip ([ae719f6](https://github.com/ironSource/fusion-ui/commit/ae719f64049cc450d27ed1e71d1f9bb6102e5844)) +* **tooltip:** add support for custom component using in tooltip v1 (base) ([ad30d35](https://github.com/ironSource/fusion-ui/commit/ad30d35b2d6c46d43024d188162e7d3aa7996a08)) + + +### CI + +* **isct-381:** added dropped-list component unit-tests ([0c03389](https://github.com/ironSource/fusion-ui/commit/0c033897b41b02ad991179958520f148a818d419)) + + +### Docs + +* **table-v1-doc:** add example for using custom component in table header tooltip ([9ec2353](https://github.com/ironSource/fusion-ui/commit/9ec2353541c0472cd09ab1a69697f628d6fd4b08)) + ## [8.4.0-rc.5](https://github.com/ironSource/fusion-ui/compare/v8.4.0-rc.4...v8.4.0-rc.5) (2024-10-09) diff --git a/package.json b/package.json index 2bb303105..8cd07f045 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fusion-ui", - "version": "8.4.0-rc.5", + "version": "8.4.0-rc.6", "description": "UI library created by ironSource", "license": "MIT", "repository": { diff --git a/projects/fusion-ui/package.json b/projects/fusion-ui/package.json index 7e5eaec5c..000ad453a 100644 --- a/projects/fusion-ui/package.json +++ b/projects/fusion-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ironsource/fusion-ui", - "version": "8.4.0-rc.5", + "version": "8.4.0-rc.6", "dependencies": { "chart.js": "4.4.2", "@floating-ui/dom": "^1.0.9", From 4ef5e925fd857d9d4b9ea6b33625a6ec825f771e Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 10 Oct 2024 14:24:35 +0300 Subject: [PATCH 19/25] refactor(tooltip-table-v1): revert tooltip changes, update table header template --- .../components/tooltip-docs/tooltip-docs.component.ts | 6 +++--- .../fusion-ui/components/table/v1/table.component.html | 4 ++-- .../tooltip/common/base/tooltip.base.component.ts | 7 ++----- .../tooltip/common/base/tooltip.base.directive.ts | 8 ++++---- .../components/tooltip/common/base/tooltip.entities.ts | 2 +- 5 files changed, 12 insertions(+), 15 deletions(-) diff --git a/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.ts b/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.ts index 798ec6e8a..6246f0a23 100644 --- a/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.ts +++ b/projects/fusion-docs/src/app/pages/components/tooltip-docs/tooltip-docs.component.ts @@ -16,12 +16,12 @@ import {ExmlForTooltipComponent} from '../../../components/exml-for-tooltip/exml export class TooltipDocsComponent implements OnInit { public tooltipPosition = TooltipPosition; private styleElement: HTMLStyleElement; + tooltipTypeHtml = TooltipType.Html; + tooltipTypeComponent = TooltipType.Component; tooltipCustomComponent = ExmlForTooltipComponent as Type; - tooltipCustomData = { - componentData: {ppid: 'a0ad70e0-bc66-414c-901b-35a410cffd50A'} - }; + tooltipCustomData = {ppid: 'a0ad70e0-bc66-414c-901b-35a410cffd50A'}; rightMenu: DocsMenuItem[] = [ { diff --git a/projects/fusion-ui/components/table/v1/table.component.html b/projects/fusion-ui/components/table/v1/table.component.html index 8a08c84f3..2fbd68b29 100644 --- a/projects/fusion-ui/components/table/v1/table.component.html +++ b/projects/fusion-ui/components/table/v1/table.component.html @@ -33,8 +33,8 @@ class="icon-tooltip" [name]="column.tooltipIcon || configIconNames.iconInfo" [tooltipType]="tooltipTypeComponent" - [fusionTooltip]="column.tooltipCustom.content.component" - [tooltipComponentData]="{componentData: column.tooltipCustom.content.dataInputs}" + [fusionTooltip]="$any(column.tooltipCustom.content.component)" + [tooltipComponentData]="$any(column.tooltipCustom.content.dataInputs)" > } diff --git a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.component.ts b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.component.ts index 85c52b9ff..0ee2ec53c 100644 --- a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.component.ts +++ b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.component.ts @@ -19,12 +19,9 @@ export abstract class TooltipBaseComponent implements AfterViewInit, OnChanges { this.hostEl = newTooltipData.parentEl; this.position = newTooltipData.position || TooltipPosition.Top; this.content = - newTooltipData.type === TooltipType.Html && typeof newTooltipData.content === 'string' + newTooltipData.type === TooltipType.Html ? this.sanitizer.bypassSecurityTrustHtml(newTooltipData.content) - : newTooltipData.type === TooltipType.Component - ? newTooltipData.content - : ''; - + : newTooltipData.content; this.width = newTooltipData.width; this.icon = newTooltipData.icon; this.type = newTooltipData.type || TooltipType.Html; diff --git a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts index b02b00552..4610ec890 100644 --- a/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts +++ b/projects/fusion-ui/components/tooltip/common/base/tooltip.base.directive.ts @@ -1,4 +1,4 @@ -import {Component, Directive, ElementRef, HostBinding, Inject, Input, OnDestroy, Renderer2, Type} from '@angular/core'; +import {Directive, ElementRef, HostBinding, Inject, Input, OnDestroy, Renderer2} from '@angular/core'; import {ITooltipData, TooltipPosition, TooltipType} from './tooltip.entities'; import {TooltipService} from './tooltip.base.service'; import {Subject, fromEvent, merge, Observable, of} from 'rxjs'; @@ -8,7 +8,7 @@ import {DOCUMENT} from '@angular/common'; @Directive() export abstract class TooltipBaseDirective implements OnDestroy { - @Input() set fusionTooltip(tooltipContent: string | Type) { + @Input() set fusionTooltip(tooltipContent: string) { if (!!tooltipContent) { this.clearTooltipContentListener$.next(); this.fusionTooltipContent = tooltipContent; @@ -32,7 +32,7 @@ export abstract class TooltipBaseDirective implements OnDestroy { private clearHover$ = merge(this.clearTooltipContentListener$.asObservable(), this.onDestroy$.asObservable()); private takeUntil$ = merge(this.clearListeners$.asObservable(), this.onDestroy$.asObservable()); private onMouseEnterObservable$: Observable; - private fusionTooltipContent: string | Type = ''; + private fusionTooltipContent = ''; constructor( private elementRef: ElementRef, @@ -95,7 +95,7 @@ export abstract class TooltipBaseDirective implements OnDestroy { icon: this.tooltipIcon, width: this.tooltipWidth, type: this.tooltipType, - componentData: this.tooltipComponentData.componentData + componentData: this.tooltipComponentData }; this.tooltipService.showTooltip(tooltipData); } diff --git a/projects/fusion-ui/components/tooltip/common/base/tooltip.entities.ts b/projects/fusion-ui/components/tooltip/common/base/tooltip.entities.ts index 539602ad9..92276bdff 100644 --- a/projects/fusion-ui/components/tooltip/common/base/tooltip.entities.ts +++ b/projects/fusion-ui/components/tooltip/common/base/tooltip.entities.ts @@ -20,7 +20,7 @@ export enum TooltipType { export interface ITooltipData { parentEl?: ElementRef; position?: TooltipPosition; - content?: string | Type; + content?: string; width?: number; type?: TooltipType; icon?: IconData; From 4de7a566e32ae6e0ab59e2f2e3e8336f193ba2c9 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Thu, 10 Oct 2024 11:26:24 +0000 Subject: [PATCH 20/25] chore(release): 8.4.0-rc.7 --- CHANGELOG.md | 7 +++++++ package.json | 2 +- projects/fusion-ui/package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f897be48..6baefb1cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [8.4.0-rc.7](https://github.com/ironSource/fusion-ui/compare/v8.4.0-rc.6...v8.4.0-rc.7) (2024-10-10) + + +### Code Refactoring + +* **tooltip-table-v1:** revert tooltip changes, update table header template ([4ef5e92](https://github.com/ironSource/fusion-ui/commit/4ef5e925fd857d9d4b9ea6b33625a6ec825f771e)) + ## [8.4.0-rc.6](https://github.com/ironSource/fusion-ui/compare/v8.4.0-rc.5...v8.4.0-rc.6) (2024-10-10) diff --git a/package.json b/package.json index 8cd07f045..f75e89ce2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fusion-ui", - "version": "8.4.0-rc.6", + "version": "8.4.0-rc.7", "description": "UI library created by ironSource", "license": "MIT", "repository": { diff --git a/projects/fusion-ui/package.json b/projects/fusion-ui/package.json index 000ad453a..b3b30b4c9 100644 --- a/projects/fusion-ui/package.json +++ b/projects/fusion-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ironsource/fusion-ui", - "version": "8.4.0-rc.6", + "version": "8.4.0-rc.7", "dependencies": { "chart.js": "4.4.2", "@floating-ui/dom": "^1.0.9", From ca88a67f5f15e285ad16024de91fac11f5329365 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Sun, 13 Oct 2024 10:55:55 +0300 Subject: [PATCH 21/25] fix(isct-428): update inline-input v1 in table v1 (with error icon) --- .../common/base/input-inline.base.component.html | 5 +++-- .../input-inline/common/base/input-inline.base.component.ts | 1 + projects/fusion-ui/components/input/v1/input.component.html | 4 ++-- projects/fusion-ui/components/input/v1/input.component.scss | 4 ++-- projects/fusion-ui/components/input/v2/input.component.html | 2 +- projects/fusion-ui/components/input/v3/input.component.html | 2 +- 6 files changed, 10 insertions(+), 8 deletions(-) diff --git a/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.html b/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.html index 146dde208..50a44f146 100644 --- a/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.html +++ b/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.html @@ -17,11 +17,12 @@
- +
diff --git a/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.ts b/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.ts index 11791cb64..895492a90 100644 --- a/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.ts +++ b/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.ts @@ -32,6 +32,7 @@ export abstract class InputInlineBaseComponent implements ControlValueAccessor, @Input() loading: boolean; @Input() readOnly: boolean; @Input() error: string; + @Input() errorType = 'error'; @Input() currencyPipeParameters: CurrencyPipeParameters; @Input() inputOptions: InputOptions; diff --git a/projects/fusion-ui/components/input/v1/input.component.html b/projects/fusion-ui/components/input/v1/input.component.html index 6bf6371c3..f4d8de0a3 100644 --- a/projects/fusion-ui/components/input/v1/input.component.html +++ b/projects/fusion-ui/components/input/v1/input.component.html @@ -79,7 +79,7 @@ @@ -105,7 +105,7 @@
diff --git a/projects/fusion-ui/components/input/v1/input.component.scss b/projects/fusion-ui/components/input/v1/input.component.scss index 128e0e413..7d3c4192e 100644 --- a/projects/fusion-ui/components/input/v1/input.component.scss +++ b/projects/fusion-ui/components/input/v1/input.component.scss @@ -318,8 +318,8 @@ $smallPadding: 4px 6px; } .fu-validation-icon-holder { position: absolute; - right: 6px; - top: 3px;; + right: var(--fu-validation-error-right, 6px); + top: 3px; ::ng-deep svg { width: 11px; height: 11px; diff --git a/projects/fusion-ui/components/input/v2/input.component.html b/projects/fusion-ui/components/input/v2/input.component.html index 9de59b60c..e49c76fe0 100644 --- a/projects/fusion-ui/components/input/v2/input.component.html +++ b/projects/fusion-ui/components/input/v2/input.component.html @@ -56,7 +56,7 @@ diff --git a/projects/fusion-ui/components/input/v3/input.component.html b/projects/fusion-ui/components/input/v3/input.component.html index 6aa9e5dc2..4e301050e 100644 --- a/projects/fusion-ui/components/input/v3/input.component.html +++ b/projects/fusion-ui/components/input/v3/input.component.html @@ -28,7 +28,7 @@ From cdcd4b50769026a56140952d2ef9b6b724aa2b0a Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Sun, 13 Oct 2024 11:59:35 +0300 Subject: [PATCH 22/25] chore(isct-428): update table-cell v1 error message for custom error --- .../components/table-docs/table-docs.component.ts | 12 ++++++++++-- .../components/table/common/entities/table-column.ts | 1 + .../v1/components/table-cell/table-cell.component.ts | 5 ++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts index d8a68534e..80968ee79 100644 --- a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts +++ b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts @@ -7,7 +7,7 @@ import { TableRowExpandEmitter } from '@ironsource/fusion-ui/components/table/common/entities'; import {InlineInputType} from '@ironsource/fusion-ui/components/input-inline/common/base'; -import {FormControl, Validators} from '@angular/forms'; +import {AbstractControl, FormControl, Validators} from '@angular/forms'; import {BehaviorSubject, Observable, of, Subject} from 'rxjs'; import {delay, take, takeUntil, tap} from 'rxjs/operators'; import {TableCellIconExampleComponent} from '../../../components/table-cell-icon-exmpale'; @@ -38,6 +38,10 @@ const tblColumns: Array = [ digitsInfo: '1.0-3' }, customErrorMapping: { + invalidBid: { + errorMessageKey: 'invalidBid', + errorText: 'Invalid bid value' + }, required: { errorMessageKey: 'required' }, @@ -834,7 +838,7 @@ export class TableDocsComponent implements OnInit, OnDestroy { .subscribe( data => { this.rows = data.map((item, _index) => { - const fcBid = new FormControl(_index + 23, [Validators.required, Validators.min(10)]); + const fcBid = new FormControl(_index + 23, [Validators.required, Validators.min(10), this.customValidator]); return { checkbox: false, id: item.id, @@ -934,4 +938,8 @@ export class TableDocsComponent implements OnInit, OnDestroy { successCallback(); }, failedCallback); } + + customValidator(control: AbstractControl) { + return control.value === '123' ? {invalidBid: 'Bid is invalid'} : null; + } } diff --git a/projects/fusion-ui/components/table/common/entities/table-column.ts b/projects/fusion-ui/components/table/common/entities/table-column.ts index 994c9ed93..b65c3097a 100644 --- a/projects/fusion-ui/components/table/common/entities/table-column.ts +++ b/projects/fusion-ui/components/table/common/entities/table-column.ts @@ -33,6 +33,7 @@ export interface TableColumn { [errorKey: string]: { errorMessageKey: string; textMapping?: {key: string; value: string}[]; + errorText?: string; }; }; filter?: { diff --git a/projects/fusion-ui/components/table/v1/components/table-cell/table-cell.component.ts b/projects/fusion-ui/components/table/v1/components/table-cell/table-cell.component.ts index b1f28cab0..ba6a128ed 100644 --- a/projects/fusion-ui/components/table/v1/components/table-cell/table-cell.component.ts +++ b/projects/fusion-ui/components/table/v1/components/table-cell/table-cell.component.ts @@ -259,7 +259,10 @@ export class TableCellComponent implements OnInit, OnChanges { } else { const allErrors = formControl.errors || {}; Object.keys(allErrors).forEach(errorKey => { - this.inputError$.next(this._getMessage(errorKey, this.column.customErrorMapping[errorKey] || {})); + this.inputError$.next( + this.column.customErrorMapping[errorKey]?.errorText ?? + this._getMessage(errorKey, this.column.customErrorMapping[errorKey] || {}) + ); }); } } From 50671c42e3e7f5afc2d7eca21d60f64ea00505cf Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Sun, 13 Oct 2024 09:03:15 +0000 Subject: [PATCH 23/25] chore(release): 8.4.0-rc.8 --- CHANGELOG.md | 7 +++++++ package.json | 2 +- projects/fusion-ui/package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6baefb1cc..25e0a059f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [8.4.0-rc.8](https://github.com/ironSource/fusion-ui/compare/v8.4.0-rc.7...v8.4.0-rc.8) (2024-10-13) + + +### Bug Fixes + +* **isct-428:** update inline-input v1 in table v1 (with error icon) ([ca88a67](https://github.com/ironSource/fusion-ui/commit/ca88a67f5f15e285ad16024de91fac11f5329365)) + ## [8.4.0-rc.7](https://github.com/ironSource/fusion-ui/compare/v8.4.0-rc.6...v8.4.0-rc.7) (2024-10-10) diff --git a/package.json b/package.json index f75e89ce2..f06dcb9d5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fusion-ui", - "version": "8.4.0-rc.7", + "version": "8.4.0-rc.8", "description": "UI library created by ironSource", "license": "MIT", "repository": { diff --git a/projects/fusion-ui/package.json b/projects/fusion-ui/package.json index b3b30b4c9..6f3bed303 100644 --- a/projects/fusion-ui/package.json +++ b/projects/fusion-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ironsource/fusion-ui", - "version": "8.4.0-rc.7", + "version": "8.4.0-rc.8", "dependencies": { "chart.js": "4.4.2", "@floating-ui/dom": "^1.0.9", From 0092774c2cc41b7be5ab74cf33e5cd458f49a7e3 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Sun, 13 Oct 2024 13:27:31 +0300 Subject: [PATCH 24/25] chore(isct-428): added prop inputErrorIconShow to the table-column entity inputErrorIconShow (default - false) user to show input-inline error as icon in table component v1 --- .../app/pages/components/table-docs/table-docs.component.ts | 1 + .../common/base/input-inline.base.component.html | 5 +++-- .../input-inline/common/base/input-inline.base.component.ts | 1 + .../components/table/common/entities/table-column.ts | 1 + .../table/v1/components/table-cell/table-cell.component.html | 1 + 5 files changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts index 80968ee79..8aebc79e5 100644 --- a/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts +++ b/projects/fusion-docs/src/app/pages/components/table-docs/table-docs.component.ts @@ -34,6 +34,7 @@ const tblColumns: Array = [ key: 'bid', type: TableColumnTypeEnum.InputEdit, inputType: InlineInputType.Currency, + inputErrorIconShow: true, currencyPipeParameters: { digitsInfo: '1.0-3' }, diff --git a/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.html b/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.html index 50a44f146..83a5679f0 100644 --- a/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.html +++ b/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.html @@ -22,7 +22,8 @@ [type]="inputType" [sanitationRegex]="sanitationRegex" [error]="error" - [errorType]="errorType" + [fusionTooltip]="!inputErrorIconShow && error" + [errorType]="inputErrorIconShow ? 'error' : null" [units]="inputUnits" unitPos="left" [options]="{size: 'small'}" @@ -30,7 +31,7 @@ [isDisabled]="loading" [formControl]="inputControl" > - +
diff --git a/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.ts b/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.ts index 895492a90..9e5acee38 100644 --- a/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.ts +++ b/projects/fusion-ui/components/input-inline/common/base/input-inline.base.component.ts @@ -33,6 +33,7 @@ export abstract class InputInlineBaseComponent implements ControlValueAccessor, @Input() readOnly: boolean; @Input() error: string; @Input() errorType = 'error'; + @Input() inputErrorIconShow: boolean; @Input() currencyPipeParameters: CurrencyPipeParameters; @Input() inputOptions: InputOptions; diff --git a/projects/fusion-ui/components/table/common/entities/table-column.ts b/projects/fusion-ui/components/table/common/entities/table-column.ts index b65c3097a..4fd633840 100644 --- a/projects/fusion-ui/components/table/common/entities/table-column.ts +++ b/projects/fusion-ui/components/table/common/entities/table-column.ts @@ -14,6 +14,7 @@ export interface TableColumn { groupName?: string; type?: TableColumnTypeEnum; inputType?: InlineInputType; + inputErrorIconShow?: boolean; // show error icon in input inline v1 inlineDropdownOptions?: DropdownOption[]; // used for inline dropdown in table v4 totalRowTypeAsString?: boolean; // data type represent in total string. default true component?: any; diff --git a/projects/fusion-ui/components/table/v1/components/table-cell/table-cell.component.html b/projects/fusion-ui/components/table/v1/components/table-cell/table-cell.component.html index 1e1b68575..b27abc624 100644 --- a/projects/fusion-ui/components/table/v1/components/table-cell/table-cell.component.html +++ b/projects/fusion-ui/components/table/v1/components/table-cell/table-cell.component.html @@ -49,6 +49,7 @@ [formControl]="data" [loading]="isInRequest$ | async" [error]="inputError$ | async" + [inputErrorIconShow]="column.inputErrorIconShow" [readOnly]="isReadOnly" [currencyPipeParameters]="column?.currencyPipeParameters" > From 1c614febc43ee4b267fcdb7710b07084416c3e88 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Sun, 13 Oct 2024 10:36:35 +0000 Subject: [PATCH 25/25] chore(release): 8.4.0-rc.9 --- CHANGELOG.md | 2 ++ package.json | 2 +- projects/fusion-ui/package.json | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 25e0a059f..31e91baf0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [8.4.0-rc.9](https://github.com/ironSource/fusion-ui/compare/v8.4.0-rc.8...v8.4.0-rc.9) (2024-10-13) + ## [8.4.0-rc.8](https://github.com/ironSource/fusion-ui/compare/v8.4.0-rc.7...v8.4.0-rc.8) (2024-10-13) diff --git a/package.json b/package.json index f06dcb9d5..dccbb278d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fusion-ui", - "version": "8.4.0-rc.8", + "version": "8.4.0-rc.9", "description": "UI library created by ironSource", "license": "MIT", "repository": { diff --git a/projects/fusion-ui/package.json b/projects/fusion-ui/package.json index 6f3bed303..7910e14ae 100644 --- a/projects/fusion-ui/package.json +++ b/projects/fusion-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ironsource/fusion-ui", - "version": "8.4.0-rc.8", + "version": "8.4.0-rc.9", "dependencies": { "chart.js": "4.4.2", "@floating-ui/dom": "^1.0.9",