From bb750110b164f2e30c85cc222afe1690b4d4dea9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Eikeland?= Date: Fri, 10 Nov 2023 10:05:24 +0100 Subject: [PATCH 1/9] feat(person-select): adding personlist-item for selected persons --- .../src/components/select/controller.ts | 40 +++++++++++++------ .../person/src/components/select/element.ts | 28 +++++++++++-- 2 files changed, 52 insertions(+), 16 deletions(-) diff --git a/packages/person/src/components/select/controller.ts b/packages/person/src/components/select/controller.ts index 9015a5571..335e44c09 100644 --- a/packages/person/src/components/select/controller.ts +++ b/packages/person/src/components/select/controller.ts @@ -27,7 +27,7 @@ export class PersonSelectController implements ReactiveController { protected timer?: ReturnType; protected _isOpen = false; public _listItems: Array = []; - public selectedItems: Set = new Set(); + public selectedIds: Set = new Set(); #externaCloseHandler?: (e: MouseEvent | KeyboardEvent) => void; #host: PersonSelectElement; @@ -91,6 +91,23 @@ export class PersonSelectController implements ReactiveController { * @return SearchableDropdownResult the selected item in array. */ // public handleSelect(event: CustomEvent): void { + public dataSourcefromId(azureId: string): PersonInfo | undefined { + if (!this.#host.listItems.length) { + console.debug('Missing element with azureId:', azureId); + return; + } + + const dataSource = Array.from(this.#host.listItems).find((item) => item.dataSource?.azureId === azureId) + ?.dataSource; + + if (!dataSource) { + console.debug('Missing dataSource with azureId', azureId); + return; + } + + return dataSource; + } + public handleSelect(event: ExplicitEventTarget): void { event.stopPropagation(); @@ -113,21 +130,20 @@ export class PersonSelectController implements ReactiveController { } if (this.#host.multiple) { - if (this.selectedItems.has(azureId)) { - this.selectedItems.delete(azureId); + if (this.selectedIds.has(azureId)) { + this.selectedIds.delete(azureId); } else { - this.selectedItems.add(azureId); - this.#host.value = dataSource?.name ?? ''; + this.selectedIds.add(azureId); + // this.#host.value = dataSource?.name ?? ''; } } else { this.isOpen = false; - if (this.selectedItems.has(azureId)) { - this.#host.value = ''; - this.selectedItems.clear(); + if (this.selectedIds.has(azureId)) { + this.selectedIds.clear(); } else { - this.selectedItems.clear(); - this.selectedItems.add(azureId); - this.#host.value = dataSource?.name ?? ''; + this.selectedIds.clear(); + this.selectedIds.add(azureId); + // this.#host.value = dataSource?.name ?? ''; } } @@ -171,7 +187,7 @@ export class PersonSelectController implements ReactiveController { } this.#host.value = ''; - this.selectedItems.clear(); + this.selectedIds.clear(); // this.#search = ''; this.#host.search = ''; diff --git a/packages/person/src/components/select/element.ts b/packages/person/src/components/select/element.ts index 32193fbb0..8c4e6fe0d 100644 --- a/packages/person/src/components/select/element.ts +++ b/packages/person/src/components/select/element.ts @@ -5,6 +5,7 @@ import { queryAll } from 'lit/decorators/query-all.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; +import { cache } from 'lit/directives/cache.js'; import { PersonSelectController } from './controller'; import { PersonSearchTask, PersonSearchControllerHost } from '../../tasks/person-search-task'; @@ -17,7 +18,8 @@ import AvatarElement from '@equinor/fusion-wc-avatar'; import IconElement from '@equinor/fusion-wc-icon'; import ListElement, { ListItemElement } from '@equinor/fusion-wc-list'; import TextInputElement from '@equinor/fusion-wc-textinput'; - +import { PersonListItemElement } from '../list-item'; +PersonListItemElement; AvatarElement; IconElement; ListElement; @@ -148,6 +150,7 @@ export class PersonSelectElement protected controllers = { element: new PersonSelectController(this), }; + /** * Render the menu if state is open * @returns HTMLTemplateResult @@ -184,7 +187,7 @@ export class PersonSelectElement return html` - ${item.name && html`${item.name}`} ${item.mail && html`${item.mail}`} @@ -216,14 +218,31 @@ export class PersonSelectElement `; } + protected selectedPersonsTemplate(): HTMLTemplateResult { + const people = Array.from(this.controllers.element.selectedIds).map((item) => ({ azureId: item })); + console.log('PS::people', people); + + return html`${cache( + html`
    + ${repeat( + people, + (item) => item.azureId, + (item) => { + return html`
    • `; + })} +
`, + )}`; + } + /** - * The main render function + * The main render functions * @returns HTMLTemplateResult */ protected render(): HTMLTemplateResult { const dense = ['page-dense', 'header', 'header-filled'].indexOf(this.variant) > -1 ? true : undefined; const variant = ['header', 'page-outlined'].indexOf(this.variant) > -1 ? 'outlined' : 'filled'; const disabled = this.disabled ? true : undefined; + const cssClasses = { 'fwc-sdd': true, 'list-open': this.controllers.element.isOpen, @@ -235,6 +254,7 @@ export class PersonSelectElement return html`
+ ${this.selectedPersonsTemplate()} Date: Fri, 10 Nov 2023 15:57:26 +0100 Subject: [PATCH 2/9] feat(person-select): adding selected person as person-list-items --- .../src/components/select/controller.ts | 32 +++------ .../person/src/components/select/element.ts | 67 +++++++++++++++---- 2 files changed, 65 insertions(+), 34 deletions(-) diff --git a/packages/person/src/components/select/controller.ts b/packages/person/src/components/select/controller.ts index 335e44c09..b88d47507 100644 --- a/packages/person/src/components/select/controller.ts +++ b/packages/person/src/components/select/controller.ts @@ -91,23 +91,6 @@ export class PersonSelectController implements ReactiveController { * @return SearchableDropdownResult the selected item in array. */ // public handleSelect(event: CustomEvent): void { - public dataSourcefromId(azureId: string): PersonInfo | undefined { - if (!this.#host.listItems.length) { - console.debug('Missing element with azureId:', azureId); - return; - } - - const dataSource = Array.from(this.#host.listItems).find((item) => item.dataSource?.azureId === azureId) - ?.dataSource; - - if (!dataSource) { - console.debug('Missing dataSource with azureId', azureId); - return; - } - - return dataSource; - } - public handleSelect(event: ExplicitEventTarget): void { event.stopPropagation(); @@ -134,7 +117,6 @@ export class PersonSelectController implements ReactiveController { this.selectedIds.delete(azureId); } else { this.selectedIds.add(azureId); - // this.#host.value = dataSource?.name ?? ''; } } else { this.isOpen = false; @@ -143,7 +125,6 @@ export class PersonSelectController implements ReactiveController { } else { this.selectedIds.clear(); this.selectedIds.add(azureId); - // this.#host.value = dataSource?.name ?? ''; } } @@ -161,6 +142,17 @@ export class PersonSelectController implements ReactiveController { this.#host.requestUpdate(); } + public deSelectId(azureId: string): boolean { + if (!azureId || !this.selectedIds.has(azureId)) { + return false; + } + + this.selectedIds.delete(azureId); + this.#host.textInputElement.focus(); + this.#host.requestUpdate(); + return true; + } + /** * Fires on click on close icon in textinput * Calls closeHandler callback set in resolver @@ -212,8 +204,6 @@ export class PersonSelectController implements ReactiveController { /* Settter: Open/Closed state for host */ public set isOpen(state: boolean) { this._isOpen = state; - // toogle close icon - this.#host.trailingIcon = state ? 'close' : ''; /* Close on escape key */ if (this._isOpen) { diff --git a/packages/person/src/components/select/element.ts b/packages/person/src/components/select/element.ts index 8c4e6fe0d..314aa1109 100644 --- a/packages/person/src/components/select/element.ts +++ b/packages/person/src/components/select/element.ts @@ -19,11 +19,13 @@ import IconElement from '@equinor/fusion-wc-icon'; import ListElement, { ListItemElement } from '@equinor/fusion-wc-list'; import TextInputElement from '@equinor/fusion-wc-textinput'; import { PersonListItemElement } from '../list-item'; -PersonListItemElement; +import { IconButtonElement } from '@equinor/fusion-wc-button'; AvatarElement; IconElement; ListElement; TextInputElement; +PersonListItemElement; +IconButtonElement; // TODO !!!! clean up when extending fwc-searchable-dropdown @@ -70,6 +72,28 @@ export class PersonSelectElement fwc-list-item { --fwc-list-item-vertical-padding: 0; } + #selected-persons { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: row; + flex-gap: 1em; + position: absolute; + top: 1px; + left: 0; + z-index: 1; + } + #selected-persons li { + position: relative; + background: #ffffff; + margin-right: 0.25em; + } + #selected-persons li fwc-icon-button { + position: absolute; + top: 0em; + right: 0em; + } `, ]; @@ -99,7 +123,7 @@ export class PersonSelectElement /* The trailing icon to display in fwc-textinput */ @property({ attribute: false, state: true }) - trailingIcon = ''; + trailingIcon = 'close'; /* The icon string to render in result list items on the meta slot */ @property() @@ -219,17 +243,32 @@ export class PersonSelectElement } protected selectedPersonsTemplate(): HTMLTemplateResult { - const people = Array.from(this.controllers.element.selectedIds).map((item) => ({ azureId: item })); - console.log('PS::people', people); + const { selectedIds } = this.controllers.element; + /* Empty template when no person is selected */ + if (selectedIds.size < 1) { + return html``; + } + + const people = Array.from(selectedIds).map((item) => ({ azureId: item })); + /* show all selected persons */ return html`${cache( html`
    ${repeat( people, (item) => item.azureId, (item) => { - return html`
    • `; - })} + return html`
  • + + this.controllers.element.deSelectId(item.azureId)} + > +
    • `; + }, + )}
`, )}`; } @@ -270,13 +309,15 @@ export class PersonSelectElement > - + ${this.controllers.element.selectedIds.size || this.controllers.element.isOpen + ? html`` + : html``}
From 85dd876f6df0408b93081e65793f9a4fe3d0ae43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Eikeland?= Date: Mon, 13 Nov 2023 09:26:05 +0100 Subject: [PATCH 3/9] chore(person-list-item): adding variable for background-color on list items --- packages/person/src/components/list-item/element.css.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/person/src/components/list-item/element.css.ts b/packages/person/src/components/list-item/element.css.ts index f81a9082c..bffd974b5 100644 --- a/packages/person/src/components/list-item/element.css.ts +++ b/packages/person/src/components/list-item/element.css.ts @@ -4,6 +4,7 @@ import { styles as theme } from '@equinor/fusion-web-theme'; const style: CSSResult = css` :host { --fwc-avatar-size: 2.5rem; + --fwc-person-list-item-background: initial; } :host([size='small']) { --fwc-avatar-size: 2rem; @@ -15,6 +16,7 @@ const style: CSSResult = css` display: flex; justify-content: space-between; column-gap: ${unsafeCSS(theme.spacing.comfortable.medium.getVariable('padding'))}; + background-color: var(--fwc-person-list-item-background); border: 1px solid; border-color: ${unsafeCSS(theme.colors.ui.background__medium.getVariable('color'))}; padding: calc( From 4128791f38233c197ebc1f76fb7f3193f00e35fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Eikeland?= Date: Mon, 13 Nov 2023 09:43:54 +0100 Subject: [PATCH 4/9] chore(person-select): adds background color to person-list --- packages/person/src/components/select/element.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/person/src/components/select/element.ts b/packages/person/src/components/select/element.ts index 314aa1109..ae0e57dc4 100644 --- a/packages/person/src/components/select/element.ts +++ b/packages/person/src/components/select/element.ts @@ -86,9 +86,11 @@ export class PersonSelectElement } #selected-persons li { position: relative; - background: #ffffff; margin-right: 0.25em; } + fwc-person-list-item { + --fwc-person-list-item-background: #ffffff; + } #selected-persons li fwc-icon-button { position: absolute; top: 0em; From 43761b2d8748d5512e702dbf33f0e73894022cf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Eikeland?= Date: Mon, 13 Nov 2023 10:09:17 +0100 Subject: [PATCH 5/9] chore(person-select): hiding selected person-list-item when input is focused --- .../src/components/select/element.css.ts | 38 +++++++++++++++ .../person/src/components/select/element.ts | 46 +++---------------- 2 files changed, 44 insertions(+), 40 deletions(-) create mode 100644 packages/person/src/components/select/element.css.ts diff --git a/packages/person/src/components/select/element.css.ts b/packages/person/src/components/select/element.css.ts new file mode 100644 index 000000000..6121064f3 --- /dev/null +++ b/packages/person/src/components/select/element.css.ts @@ -0,0 +1,38 @@ +import { css, type CSSResult } from 'lit'; +import { sddStyles } from '@equinor/fusion-wc-searchable-dropdown'; + +// TODO - maybe this styling should be changed in parent! +export const styles: CSSResult[] = [ + ...sddStyles, + css` + fwc-list { + --fwc-list-side-padding: 0.5rem; + } + fwc-list-item { + --fwc-list-item-vertical-padding: 0; + } + fwc-person-list-item { + --fwc-person-list-item-background: #ffffff; + } + #selected-persons { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: row; + flex-gap: 1em; + position: absolute; + top: 1px; + left: 0; + } + #selected-persons li { + position: relative; + margin-right: 0.25em; + } + #selected-persons li fwc-icon-button { + position: absolute; + top: 0em; + right: 0em; + } + `, +]; diff --git a/packages/person/src/components/select/element.ts b/packages/person/src/components/select/element.ts index ae0e57dc4..206217443 100644 --- a/packages/person/src/components/select/element.ts +++ b/packages/person/src/components/select/element.ts @@ -1,4 +1,4 @@ -import { html, LitElement, type HTMLTemplateResult, type CSSResult, css } from 'lit'; +import { html, LitElement, type HTMLTemplateResult, type CSSResult } from 'lit'; import { property, state } from 'lit/decorators.js'; import { query } from 'lit/decorators/query.js'; import { queryAll } from 'lit/decorators/query-all.js'; @@ -8,9 +8,10 @@ import { repeat } from 'lit/directives/repeat.js'; import { cache } from 'lit/directives/cache.js'; import { PersonSelectController } from './controller'; +import { styles as psStyles } from './element.css'; import { PersonSearchTask, PersonSearchControllerHost } from '../../tasks/person-search-task'; -import { SearchableDropdownControllerHost, sddStyles } from '@equinor/fusion-wc-searchable-dropdown'; +import { SearchableDropdownControllerHost } from '@equinor/fusion-wc-searchable-dropdown'; import type { PersonInfo } from '../../types'; @@ -62,42 +63,7 @@ export class PersonSelectElement implements SearchableDropdownControllerHost, PersonSearchControllerHost { /* style object css */ - // TODO - maybe this styling should be changed in parent! - static styles: CSSResult[] = [ - ...sddStyles, - css` - fwc-list { - --fwc-list-side-padding: 0.5rem; - } - fwc-list-item { - --fwc-list-item-vertical-padding: 0; - } - #selected-persons { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: row; - flex-gap: 1em; - position: absolute; - top: 1px; - left: 0; - z-index: 1; - } - #selected-persons li { - position: relative; - margin-right: 0.25em; - } - fwc-person-list-item { - --fwc-person-list-item-background: #ffffff; - } - #selected-persons li fwc-icon-button { - position: absolute; - top: 0em; - right: 0em; - } - `, - ]; + static styles: CSSResult[] = psStyles; /** * Label passed to the fwc-text-input component @@ -247,7 +213,7 @@ export class PersonSelectElement protected selectedPersonsTemplate(): HTMLTemplateResult { const { selectedIds } = this.controllers.element; /* Empty template when no person is selected */ - if (selectedIds.size < 1) { + if (selectedIds.size < 1 || this.controllers.element.isOpen) { return html``; } @@ -295,7 +261,6 @@ export class PersonSelectElement return html`
- ${this.selectedPersonsTemplate()} (this.controllers.element.isOpen = true)} @keyup=${this.controllers.element.handleKeyup} > + ${this.selectedPersonsTemplate()} ${this.controllers.element.selectedIds.size || this.controllers.element.isOpen From 34bc3cec97f80d2ea58587b424de265b6a5325e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Eikeland?= Date: Fri, 10 Nov 2023 16:02:13 +0100 Subject: [PATCH 6/9] docs: changeset --- .changeset/few-pugs-grow.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/few-pugs-grow.md diff --git a/.changeset/few-pugs-grow.md b/.changeset/few-pugs-grow.md new file mode 100644 index 000000000..45cd73b8c --- /dev/null +++ b/.changeset/few-pugs-grow.md @@ -0,0 +1,6 @@ +--- +'@equinor/fusion-wc-person': minor +--- + +- Adding ui with selected person as person-list-items +- Adding variable to person-list-item for setting background color From 1a9c7c6aac395ed6763c6727f04d5739454e48c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Eikeland?= Date: Mon, 13 Nov 2023 13:38:58 +0100 Subject: [PATCH 7/9] chore(person-select): controllers _listItem property now stores PersonInfo objects for later reuse --- .../src/components/select/controller.ts | 19 +++++++++++++++---- .../person/src/components/select/element.ts | 12 ++++++++---- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/person/src/components/select/controller.ts b/packages/person/src/components/select/controller.ts index b88d47507..34c6fa823 100644 --- a/packages/person/src/components/select/controller.ts +++ b/packages/person/src/components/select/controller.ts @@ -26,7 +26,7 @@ export class PersonSelectEvent extends CustomEvent { export class PersonSelectController implements ReactiveController { protected timer?: ReturnType; protected _isOpen = false; - public _listItems: Array = []; + public _listItems: Array = []; public selectedIds: Set = new Set(); #externaCloseHandler?: (e: MouseEvent | KeyboardEvent) => void; @@ -142,13 +142,24 @@ export class PersonSelectController implements ReactiveController { this.#host.requestUpdate(); } - public deSelectId(azureId: string): boolean { - if (!azureId || !this.selectedIds.has(azureId)) { + public deSelectId(person: PersonInfo): boolean { + if (!person?.azureId || !this.selectedIds.has(person.azureId)) { return false; } - this.selectedIds.delete(azureId); + this.selectedIds.delete(person.azureId); this.#host.textInputElement.focus(); + + /* Dispatch custom select event with our details */ + this.#host.dispatchEvent( + new PersonSelectEvent({ + detail: { + selected: person, + }, + bubbles: true, + }), + ); + this.#host.requestUpdate(); return true; } diff --git a/packages/person/src/components/select/element.ts b/packages/person/src/components/select/element.ts index 206217443..272048a25 100644 --- a/packages/person/src/components/select/element.ts +++ b/packages/person/src/components/select/element.ts @@ -169,7 +169,8 @@ export class PersonSelectElement `; } - this.controllers.element._listItems = result.map((item) => item.azureId); + // apend items to + this.controllers.element._listItems = result.map((item) => item); return html` ${repeat( @@ -211,13 +212,16 @@ export class PersonSelectElement } protected selectedPersonsTemplate(): HTMLTemplateResult { - const { selectedIds } = this.controllers.element; + const { selectedIds: selectedIds } = this.controllers.element; /* Empty template when no person is selected */ if (selectedIds.size < 1 || this.controllers.element.isOpen) { return html``; } - const people = Array.from(selectedIds).map((item) => ({ azureId: item })); + // convert selected azureId to PeronInfo for returning to PersonSelectEvent + const people = Array.from(selectedIds).map( + (sel) => this.controllers.element._listItems.find((li) => li.azureId === sel) ?? { azureId: sel }, + ); /* show all selected persons */ return html`${cache( @@ -232,7 +236,7 @@ export class PersonSelectElement icon="close_circle_outlined" size="x-small" color="secondary" - @click=${() => this.controllers.element.deSelectId(item.azureId)} + @click=${() => this.controllers.element.deSelectId(item)} > `; }, From 1e4a97d25ee0dbb6c07ab713f1d44599175bbb86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Eikeland?= Date: Mon, 13 Nov 2023 14:02:18 +0100 Subject: [PATCH 8/9] fix(person-select): extracting property from controller --- packages/person/src/components/select/element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/person/src/components/select/element.ts b/packages/person/src/components/select/element.ts index 272048a25..e31b780af 100644 --- a/packages/person/src/components/select/element.ts +++ b/packages/person/src/components/select/element.ts @@ -212,7 +212,7 @@ export class PersonSelectElement } protected selectedPersonsTemplate(): HTMLTemplateResult { - const { selectedIds: selectedIds } = this.controllers.element; + const { selectedIds, _listItems } = this.controllers.element; /* Empty template when no person is selected */ if (selectedIds.size < 1 || this.controllers.element.isOpen) { return html``; @@ -220,7 +220,7 @@ export class PersonSelectElement // convert selected azureId to PeronInfo for returning to PersonSelectEvent const people = Array.from(selectedIds).map( - (sel) => this.controllers.element._listItems.find((li) => li.azureId === sel) ?? { azureId: sel }, + (sel) => _listItems.find((li) => li.azureId === sel) ?? { azureId: sel }, ); /* show all selected persons */ From 2111d7f035971db25063239dc47c43fea946dae9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Eikeland?= Date: Thu, 16 Nov 2023 14:45:56 +0100 Subject: [PATCH 9/9] chore(person-select): renaming _listItems, full width person-list-item --- .../src/components/select/controller.ts | 17 +++++++++++--- .../src/components/select/element.css.ts | 11 +++------- .../person/src/components/select/element.ts | 22 +++++++++---------- 3 files changed, 27 insertions(+), 23 deletions(-) diff --git a/packages/person/src/components/select/controller.ts b/packages/person/src/components/select/controller.ts index 34c6fa823..07c68e29a 100644 --- a/packages/person/src/components/select/controller.ts +++ b/packages/person/src/components/select/controller.ts @@ -26,7 +26,8 @@ export class PersonSelectEvent extends CustomEvent { export class PersonSelectController implements ReactiveController { protected timer?: ReturnType; protected _isOpen = false; - public _listItems: Array = []; + + public listItems: Array = []; public selectedIds: Set = new Set(); #externaCloseHandler?: (e: MouseEvent | KeyboardEvent) => void; @@ -142,7 +143,7 @@ export class PersonSelectController implements ReactiveController { this.#host.requestUpdate(); } - public deSelectId(person: PersonInfo): boolean { + public deSelectPerson(person: PersonInfo): boolean { if (!person?.azureId || !this.selectedIds.has(person.azureId)) { return false; } @@ -191,7 +192,7 @@ export class PersonSelectController implements ReactiveController { this.#host.value = ''; this.selectedIds.clear(); - // this.#search = ''; + this.#host.search = ''; /* also runs task */ @@ -202,6 +203,16 @@ export class PersonSelectController implements ReactiveController { this.#externaCloseHandler(e); } + if (this.selectedIds.size) { + // TODO add support for multiple + this.selectedIds.forEach((azureId) => { + const deSelectedPerson = this.listItems.find((p) => p.azureId === azureId); + if (deSelectedPerson) { + this.deSelectPerson(deSelectedPerson); + } + }); + } + /* fire event for sdd closed */ const ddClosedEvent = new CustomEvent<{ date: number }>('dropdownClosed', { detail: { diff --git a/packages/person/src/components/select/element.css.ts b/packages/person/src/components/select/element.css.ts index 6121064f3..4404a9481 100644 --- a/packages/person/src/components/select/element.css.ts +++ b/packages/person/src/components/select/element.css.ts @@ -20,19 +20,14 @@ export const styles: CSSResult[] = [ margin: 0; display: flex; flex-direction: row; - flex-gap: 1em; + flex-gap: 0; position: absolute; top: 1px; left: 0; + width: 100%; } #selected-persons li { - position: relative; - margin-right: 0.25em; - } - #selected-persons li fwc-icon-button { - position: absolute; - top: 0em; - right: 0em; + flex: 1 0 auto; } `, ]; diff --git a/packages/person/src/components/select/element.ts b/packages/person/src/components/select/element.ts index e31b780af..464ca3837 100644 --- a/packages/person/src/components/select/element.ts +++ b/packages/person/src/components/select/element.ts @@ -170,7 +170,7 @@ export class PersonSelectElement } // apend items to - this.controllers.element._listItems = result.map((item) => item); + this.controllers.element.listItems = result.map((item) => item); return html` ${repeat( @@ -212,16 +212,16 @@ export class PersonSelectElement } protected selectedPersonsTemplate(): HTMLTemplateResult { - const { selectedIds, _listItems } = this.controllers.element; + const { selectedIds } = this.controllers.element; /* Empty template when no person is selected */ if (selectedIds.size < 1 || this.controllers.element.isOpen) { return html``; } // convert selected azureId to PeronInfo for returning to PersonSelectEvent - const people = Array.from(selectedIds).map( - (sel) => _listItems.find((li) => li.azureId === sel) ?? { azureId: sel }, - ); + const people = Array.from(selectedIds).map((sel) => ({ + azureId: sel, + })); /* show all selected persons */ return html`${cache( @@ -231,13 +231,11 @@ export class PersonSelectElement (item) => item.azureId, (item) => { return html`
  • - - this.controllers.element.deSelectId(item)} - > + (this.controllers.element.isOpen = true)} + >
    • `; }, )}