From 898ae234d12a0af2a3f5d124fa058f0d219f392a Mon Sep 17 00:00:00 2001 From: Christopher Bergwein <55480857+christopher-bergwein-siemens@users.noreply.github.com> Date: Thu, 15 Jun 2023 12:35:40 +0200 Subject: [PATCH] feat(core/event-list): enable shadow dom (#565) Co-authored-by: Bergwein, Christopher (RC-AT DI PA SW) Co-authored-by: Daniel Leroux --- packages/core/component-doc.json | 23 ++- .../mixins/shadow-dom/_host-disabled.scss | 14 ++ packages/core/src/components.d.ts | 6 +- .../event-list-item/event-list-item.scss | 171 ++++++++++-------- .../event-list-item/event-list-item.tsx | 59 +++--- .../src/components/event-list/event-list.scss | 63 ++----- .../src/components/event-list/event-list.tsx | 57 ++++-- .../event-list/test/event-list.spec.tsx | 46 +++-- .../src/tests/event-list/chevron/index.html | 14 +- .../tests/event-list/custom-height/index.html | 5 + ...-1-chromium---theme-classic-dark-linux.png | Bin 7647 -> 9781 bytes ...1-chromium---theme-classic-light-linux.png | Bin 7599 -> 9714 bytes 12 files changed, 254 insertions(+), 204 deletions(-) create mode 100644 packages/core/scss/mixins/shadow-dom/_host-disabled.scss diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 78f322fcab..d5ce943d58 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -3768,7 +3768,7 @@ "usage": {}, "docs": "", "docsTags": [], - "encapsulation": "scoped", + "encapsulation": "shadow", "dependents": [], "dependencies": [], "dependencyGraph": {}, @@ -3867,10 +3867,16 @@ "usage": {}, "docs": "", "docsTags": [], - "encapsulation": "none", + "encapsulation": "shadow", "dependents": [], - "dependencies": [], - "dependencyGraph": {}, + "dependencies": [ + "ix-icon" + ], + "dependencyGraph": { + "ix-event-list-item": [ + "ix-icon" + ] + }, "props": [ { "name": "chevron", @@ -3894,8 +3900,13 @@ "mutable": false, "attr": "color", "reflectToAttr": false, - "docs": "Color of the status indicator.\nAllowed values are all Core UI color names.", - "docsTags": [], + "docs": "Color of the status indicator.\nYou can find a list of all available colors in our documentation.\nExample values are `--theme-color-alarm` or `color-alarm`", + "docsTags": [ + { + "name": "see", + "text": "https://ix.siemens.io/docs/theming/colors/" + } + ], "values": [ { "type": "string" diff --git a/packages/core/scss/mixins/shadow-dom/_host-disabled.scss b/packages/core/scss/mixins/shadow-dom/_host-disabled.scss new file mode 100644 index 0000000000..58ebf8a301 --- /dev/null +++ b/packages/core/scss/mixins/shadow-dom/_host-disabled.scss @@ -0,0 +1,14 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +@mixin host-disabled { + :host(.disabled) { + pointer-events: none; + } +} diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 1e473517d5..6761ff1f7f 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -759,7 +759,8 @@ export namespace Components { */ "chevron": boolean; /** - * Color of the status indicator. Allowed values are all Core UI color names. + * Color of the status indicator. You can find a list of all available colors in our documentation. Example values are `--theme-color-alarm` or `color-alarm` + * @see https://ix.siemens.io/docs/theming/colors/ */ "color": string; /** @@ -3512,7 +3513,8 @@ declare namespace LocalJSX { */ "chevron"?: boolean; /** - * Color of the status indicator. Allowed values are all Core UI color names. + * Color of the status indicator. You can find a list of all available colors in our documentation. Example values are `--theme-color-alarm` or `color-alarm` + * @see https://ix.siemens.io/docs/theming/colors/ */ "color"?: string; /** diff --git a/packages/core/src/components/event-list-item/event-list-item.scss b/packages/core/src/components/event-list-item/event-list-item.scss index e0ceb8ffaa..362600f349 100644 --- a/packages/core/src/components/event-list-item/event-list-item.scss +++ b/packages/core/src/components/event-list-item/event-list-item.scss @@ -9,104 +9,123 @@ @import 'mixins/text-truncation'; @import 'mixins/hover'; +@import 'mixins/shadow-dom/component'; +@import 'mixins/shadow-dom/host-disabled'; @import 'common-variables'; -$height-single-line: 2.5rem; - -.ix-event-list-item { - display: flex; - align-items: center; - position: relative; - height: $height-single-line; - max-height: $height-single-line; - border-radius: $default-border-radius; - background-color: var(--theme-event-item--background); - overflow: hidden; - transition: $default-time; - cursor: pointer; - - .indicator { - height: 100%; - width: $small-space; - max-width: $small-space; - min-width: $small-space; - border-top-left-radius: $default-border-radius; - border-bottom-left-radius: $default-border-radius; - } - - .indicator-empty { - border: var(--theme-weak-bdr-1); - border-right: none; - } +$default-event-list-item-height: 2.5rem; - .event-list-item-container { - @include ellipsis; +:host { + @include ix-component; + .event-list-item { display: flex; - flex-grow: 1; - width: calc(100% - (#{$default-space} + #{$small-space})); - height: 100%; - border: 0.062rem solid; - border-color: var(--theme-event-item--border); - border-top-left-radius: 0; - border-top-right-radius: $default-border-radius; - border-bottom-left-radius: 0; - border-bottom-right-radius: $default-border-radius; - border-left: none; - padding-left: $default-space; - } - - &:not(.selected) { - @include hover { - background-color: var(--theme-event-item--background--hover); + align-items: center; + position: relative; + height: var(--event-list-item-height, $default-event-list-item-height); + max-height: var(--event-list-item-height, $default-event-list-item-height); + border-radius: var(--event-list-item-border-radius, $default-border-radius); + background-color: var(--theme-event-item--background); + overflow: hidden; + transition: $default-time; + cursor: pointer; + margin-bottom: var(--event-list-item-margin-bottom, $small-space); + + .indicator { + height: 100%; + width: $small-space; + max-width: $small-space; + min-width: $small-space; + border-top-left-radius: var( + --event-list-item-border-radius, + $default-border-radius + ); + border-bottom-left-radius: var( + --event-list-item-border-radius, + $default-border-radius + ); } - @include active { - background-color: var(--theme-event-item--background--active); + .indicator-empty { + border: var(--theme-weak-bdr-1); + border-right: none; } .event-list-item-container { + @include ellipsis; + + display: flex; + flex-grow: 1; + width: calc(100% - (#{$default-space} + #{$small-space})); + height: 100%; + border: 0.062rem solid; + border-color: var(--theme-event-item--border); + border-top-left-radius: 0; + border-top-right-radius: var( + --event-list-item-border-radius, + $default-border-radius + ); + border-bottom-left-radius: 0; + border-bottom-right-radius: var( + --event-list-item-border-radius, + $default-border-radius + ); + border-left: none; + padding-left: $default-space; + } + + .event-content { + display: flex; + align-items: center; + width: 100%; + height: var(--event-list-item-height, 100%); + max-height: var(--event-list-item-height, 100%); + white-space: var(--event-list-item-content-white-space, inherit); + overflow: hidden; + } + + .chevron-icon { + margin-left: auto; + margin-right: $small-space; + opacity: 0.6; + align-self: center; + } + + &:not(.selected) { @include hover { - border-color: var(--theme-event-item--border--hover); + background-color: var(--theme-event-item--background--hover); } @include active { - border-color: var(--theme-event-item--border--active); + background-color: var(--theme-event-item--background--active); + } + + .event-list-item-container { + @include hover { + border-color: var(--theme-event-item--border--hover); + } + + @include active { + border-color: var(--theme-event-item--border--active); + } } } - } - &.selected { - .event-list-item-container { + &.selected .event-list-item-container { background-color: var(--theme-event-item--background--selected); border-color: var(--theme-event-item--border--selected); } - } - &[disabled], - &.disabled { - pointer-events: none; + &[disabled], + &.disabled { + pointer-events: none; - .event-list-item-container { - background-color: var(--theme-event-item--background--disabled); - border-color: var(--theme-event-item--border--disabled); + .event-list-item-container { + background-color: var(--theme-event-item--background--disabled); + border-color: var(--theme-event-item--border--disabled); + } } } - - .chevron-icon { - margin-left: auto; - margin-right: $small-space; - opacity: 0.6; - align-self: center; - } - - .event-content { - display: flex; - align-items: center; - width: 100%; - height: 100%; - overflow: hidden; - } - - margin-bottom: $small-space; } + +@include host-disabled; diff --git a/packages/core/src/components/event-list-item/event-list-item.tsx b/packages/core/src/components/event-list-item/event-list-item.tsx index ebcb35fe35..002f7c25f9 100644 --- a/packages/core/src/components/event-list-item/event-list-item.tsx +++ b/packages/core/src/components/event-list-item/event-list-item.tsx @@ -9,10 +9,10 @@ import { Component, - Element, Event, EventEmitter, h, + Host, Listen, Prop, } from '@stencil/core'; @@ -20,14 +20,15 @@ import { @Component({ tag: 'ix-event-list-item', styleUrl: 'event-list-item.scss', - scoped: false, + shadow: true, }) export class EventListItem { - @Element() el!: HTMLIxEventListItemElement; - /** * Color of the status indicator. - * Allowed values are all Core UI color names. + * You can find a list of all available colors in our documentation. + * Example values are `--theme-color-alarm` or `color-alarm` + * + * @see https://ix.siemens.io/docs/theming/colors/ */ @Prop() color: string; @@ -65,35 +66,45 @@ export class EventListItem { } render() { + const color = this.color?.startsWith('--theme') + ? `var(${this.color})` + : `var(--theme-${this.color})`; + return ( -
+ > +
-
-
- +
+
+ +
+ {this.chevron && ( + + )}
- {this.chevron ? ( - - ) : ( - '' - )}
-
+ ); } } diff --git a/packages/core/src/components/event-list/event-list.scss b/packages/core/src/components/event-list/event-list.scss index 46bac511b6..0608096a9e 100644 --- a/packages/core/src/components/event-list/event-list.scss +++ b/packages/core/src/components/event-list/event-list.scss @@ -7,64 +7,27 @@ * LICENSE file in the root directory of this source tree. */ -$item-height-l: 6.5rem; +@import 'mixins/shadow-dom/component'; :host { + @include ix-component; + display: block; position: relative; -} - -ul { - list-style: none; - padding: 0; - margin-bottom: 0; -} -:host:not(.item-size-s), -:host:not(.item-size-l) { - ::slotted(& .ix-event-list-item) { - display: none; + ul { + list-style: none; + padding: 0; + margin-bottom: 0; } } -:host.chevron ::slotted(* .ix-event-list-item) .chevron-icon { - display: initial; +:host(.item-size-l) { + --event-list-item-height: 6.5rem; + --event-list-item-content-white-space: normal; } -.item-size-l { - ::slotted(* .ix-event-list-item) { - height: $item-height-l; - max-height: $item-height-l; - - .event-content { - height: $item-height-l; - max-height: $item-height-l; - white-space: normal; - } - } -} - -.compact { - ::slotted(* .ix-event-list-item) { - margin-bottom: 0px; - border-radius: 0px; - - .indicator { - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; - } - - .event-list-item-container { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - } - - .compact:not(:last-child) { - .event-list-item-container { - border-bottom: none; - } - } +:host(.compact) { + --event-list-item-border-radius: 0; + --event-list-item-margin-bottom: 0; } diff --git a/packages/core/src/components/event-list/event-list.tsx b/packages/core/src/components/event-list/event-list.tsx index a7918e32d2..6d3b467c79 100644 --- a/packages/core/src/components/event-list/event-list.tsx +++ b/packages/core/src/components/event-list/event-list.tsx @@ -7,14 +7,14 @@ * LICENSE file in the root directory of this source tree. */ -import { Component, Element, h, Host, Prop } from '@stencil/core'; +import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'; import { createMutationObserver } from '../utils/mutation-observer'; import { convertToRemString } from '../utils/rwd.util'; @Component({ tag: 'ix-event-list', styleUrl: 'event-list.scss', - scoped: true, + shadow: true, }) export class EventList { private readonly mutationObserver = createMutationObserver( @@ -24,7 +24,7 @@ export class EventList { private static readonly fadeOutDuration = 50; private static readonly fadeInDuration = 150; - @Element() el!: HTMLIxEventListElement; + @Element() hostElement!: HTMLIxEventListElement; /** * Determines the height of list items. @@ -49,20 +49,31 @@ export class EventList { */ @Prop() chevron: boolean; + @Watch('chevron') + watchChevron(chevron: boolean | undefined) { + this.handleChevron(chevron); + } + componentDidLoad() { if (this.animated) { this.triggerFadeIn(); } - if (typeof this.itemHeight === 'number') { - const height = convertToRemString(this.itemHeight); - this.el.querySelectorAll('.ix-event-list-item').forEach((item) => { - item.classList.add('d-flex'); - this.setCustomHeight(item as HTMLElement, height); - }); + if (!Number.isNaN(Number(this.itemHeight))) { + const height = convertToRemString(this.itemHeight as number); + this.hostElement + .querySelectorAll('ix-event-list-item') + .forEach((item) => { + this.setCustomHeight(item as HTMLElement, height); + }); } - this.mutationObserver.observe(this.el, { childList: true, subtree: true }); + this.handleChevron(this.chevron); + + this.mutationObserver.observe(this.hostElement, { + childList: true, + subtree: true, + }); } private onMutation(mutationRecords: Array) { @@ -75,23 +86,20 @@ export class EventList { .forEach((mutation) => mutation.addedNodes.forEach((item) => { const itemHtml = item as HTMLElement; - if (!itemHtml.classList?.contains('ix-event-list-item')) { - return; - } - itemHtml.classList.add('d-flex'); this.setCustomHeight(itemHtml, height); }) ); } + this.handleChevron(this.chevron); + this.triggerFadeIn(); }); } private setCustomHeight(item: HTMLElement, height: string) { - item.style.height = height; - item.style.maxHeight = height; + item.style.setProperty('--event-list-item-height', height); } private triggerFadeOut(): Promise { @@ -106,7 +114,7 @@ export class EventList { }, { opacity: 0 }, ]; - const listElement = this.el.querySelector('ul'); + const listElement = this.hostElement.shadowRoot.querySelector('ul'); return listElement.animate(keyframes, { duration: EventList.fadeOutDuration, }).finished; @@ -117,7 +125,7 @@ export class EventList { return; } - const listItems = this.el.querySelectorAll('.ix-event-list-item'); + const listItems = this.hostElement.querySelectorAll('ix-event-list-item'); listItems.forEach((e, i) => { const delay = i * 80; const offset = delay / (delay + EventList.fadeInDuration); @@ -134,6 +142,18 @@ export class EventList { }); } + private handleChevron(chevron: boolean | undefined): void { + const listItems = this.hostElement.querySelectorAll('ix-event-list-item'); + + listItems.forEach((e) => { + if (chevron) { + e.setAttribute('chevron', 'true'); + } else if (chevron !== undefined) { + e.removeAttribute('chevron'); + } + }); + } + render() { return (
    diff --git a/packages/core/src/components/event-list/test/event-list.spec.tsx b/packages/core/src/components/event-list/test/event-list.spec.tsx index 848be15e3a..0f2587a473 100644 --- a/packages/core/src/components/event-list/test/event-list.spec.tsx +++ b/packages/core/src/components/event-list/test/event-list.spec.tsx @@ -32,9 +32,12 @@ describe('event-list', () => { }); expect(page.root).toEqualHtml(` -
      - -
    + +
      + +
    +     +     `); }); @@ -59,9 +62,12 @@ describe('event-list', () => { expect(page.root).toEqualHtml(` -
      - -
    + +
      + +
    +     +     `); }); @@ -74,7 +80,6 @@ describe('event-list', () => { const eventList = page.doc.createElement('ix-event-list'); const eventListItem = page.doc.createElement('ix-event-list-item'); - eventListItem.classList.add('ix-event-list-item'); eventListItem.animate = jest.fn(); @@ -86,11 +91,14 @@ describe('event-list', () => { expect(eventListItem.animate).toHaveBeenCalled(); expect(page.root).toEqualHtml(` - -
      - -
    -     + + +
      + +
    +     + +     `); }); @@ -104,7 +112,6 @@ describe('event-list', () => { eventList.animated = false; const eventListItem = page.doc.createElement('ix-event-list-item'); - eventListItem.classList.add('ix-event-list-item'); eventListItem.animate = jest.fn(); @@ -116,11 +123,14 @@ describe('event-list', () => { expect(eventListItem.animate).not.toHaveBeenCalled(); expect(page.root).toEqualHtml(` - -
      - -
    -     + + +
      + +
    +     + +     `); }); }); diff --git a/packages/core/src/tests/event-list/chevron/index.html b/packages/core/src/tests/event-list/chevron/index.html index a812c6e47e..af24454099 100644 --- a/packages/core/src/tests/event-list/chevron/index.html +++ b/packages/core/src/tests/event-list/chevron/index.html @@ -14,19 +14,15 @@ Stencil Component Starter - - + Text 1 - Text 2 - Text 2 + Text 3 - Text 4 + Text 4 diff --git a/packages/core/src/tests/event-list/custom-height/index.html b/packages/core/src/tests/event-list/custom-height/index.html index d029bde2f6..5eddd344ea 100644 --- a/packages/core/src/tests/event-list/custom-height/index.html +++ b/packages/core/src/tests/event-list/custom-height/index.html @@ -18,6 +18,11 @@ Test 1 Test 2 + + + Test 1 + Test 2 + diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-custom-height-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-custom-height-1-chromium---theme-classic-dark-linux.png index 43454ad6853bb10f4bc3736a7d2baacc925f6d4b..3fddd52a16e79c3fb44534764b1179598a580c77 100644 GIT binary patch literal 9781 zcmeHNc~n#9wvSS!R)O~V?nP#Mp-?N8A&fG_whAIh+S-E15EMg1Mnw{V3|gzUl|d7k zNvOqwEkl$D$dsU<7$6CQfB_Ol36PL5ha@C<=R|MUdT+h^Ui;R4tM3o~$U5iy&dJ{U z+h>1!|MuSB_n-TF>%3$54g>zsvPc$@(=V%p zM~PKlgF0uC{$)O10U0F6p=_h#1G`U@Sh}eqYCfwI-LKuCzL z&Xor3-VyZ?^zvNi=Ve)5#idqIYMtB>abG4a&>O!9zSN8;rqQ6Gp)5bx`h3h#y<>V* zX=kj|PxH(+s`^B->{Sj?#Qb*K&fe}NF{V1z5_}Y%yCRjAa$`y&E=XF@oXz0e4%(eN zchZbq?M>!P-vTFG65cuhUO)7Mfa6O~Hio}n8;08QOG0Xsr4@Gi(Le~|!q`*UT**;I zwKND-nC&R+MA)H}K1F+CcPu0Oyk-;Ei z478)scQF8+M2<(1K(#K-pwoBg%rSd|Ys8^2?BGe6=;xftCW)(MI-5N#ZN3(wX2m1J z!*{29ndgL7xzOM)o)K+n%&AgJd-{mV-$^O%9&W(L8m4>U>2XQf)JJ>D2sPrb1sMiV zOW0a>=2C}3%xQz?rT$3W2CgFhNUTz~`8{*5)3PK4r$2VcK3>IjjeY#YkK(Y$Hz$N> z;i{Y{oq8DrrOgj7ogXjEME2!Z%Vxjs=s8<`o-fn?z{hjHWEnS(Ag(Xup%wx1uzON) zU6-5-YPL2at=E82O9i#|~fhBIO@dvr8BEM?}Eh~MN^ zHc;8Ir?e<9psbJmK%<+R=bB-g*HbcbJw42g%$G)SQW4Dwxp=p{X{i!>diDFdXqHLx z^nf0!<%-@EUtxBpgwx<&4x9c8rrXHEs)*amX1*rT)h~fy*O^vJFDKxWRlfSD^+)GsOx>ISJ?2wG zaY*9ijT{?R6$e52ey8PKz%NK(=ztRy0X6Xirv~)g5u$O@vnBrQ*+Qe9Y=${U6} zwu3L)`t5gfgQ8(;4r=Z`lRD^2febw1rP`sax+9oB1drgME+B5A^85 zwER%B0}S1e#&ds8IP9T9v;g)8kehddV*HyW1dNskPHqf;zc$jfaLp?NVWgd&7lxxN zZR+R8*U`Nt%0Wdr)W0J?NeFduS<@fTFLZ@%XSqy2NQA;v1?N0evN_Z z9s<2YonXcECEz6xNzK9ho&q~oByqBJB9l{B6q1{$PiA0nid7U%2q&bpD9}ksuL5C+ zBGMEkKTxia2Ek-^^#s0w)~v4)O-`8}s)L@3V_ey?Onq}pk-IZoIi{x|ybpe5mxG-b zhtjmvy3GPgswYP&lbGOe28M&A(%Kka1Agsc%Ocm;hM78&=x0bK*GVqx)Ts(a+MAmX z0FiND!|8L8MG4qv83rU4+#}0~p(Mx1dBt@Y<)DLM`Z|_3YmGQ}EI=K@D`S&gPJT+q zbX3%-FYEXa2~Be&i?t{gr#w&cp2pLy!HO$JHo2T?{mz;p7IN!jgQr+9x6+S~=Q2r_ z$Qhz9(V~>F{=(QTI`VIn)G+_Tr3d9FXikWxvq6C8XS=C?vS4}($aMI+FEI;K-VVpt zpO>f`>g#)YdF0q3)y0H;+Te=gH^=H+YGdc;)tcIQ?4_qBZr!@IDp9~5J}=a>7fh0R z&N%e&c;v^AA2%-dba0zeF#*)joMZklXhncfhYSS-3|Zh3+6kWWXIdAGK(ZH? zTu03|;XSXNJ@7bAYlVqXY#5(;<-w}>9|-tbcDolt3IAcd4`<5y(c+R zv1;K%<7RaiH}nh)neGI=$8d|)O6urpCG2bZRbN*VnIt~( zmt&Tw+1t#SnHkS}7)^{u0}$k27NePF6taQ0Nmdf3ypvoOH=>YybBI8=PkkFySS<9^ zYI_z{adI&IMvifL5IA?~q{BokbWp8(033}rzc$v5u>5;Kity#idIp*UDh^1xGBPrD z=<1eCJhh_4NUg!SX4`0|f*FYf-bSD@8hA8t4$=bRxrjD&X>F}D4(Dcn>d8rOQPlDU z)ZnnI0j9Itpl?X=tNt?Y{!d4XHR)XZi&638WhsMbf^&nuIIDz1Vx*sgl$tM(1z!3; z22uCDi2pIK#r0|7oXgL2gli-)a(UM3=P|#-!fOeV+->CY9odNTG)UvyFp|4e+uaOUAnYG2y>3EW1qD( zP04@SZo`gujvb^narRF737&Sa0y-1Rq22#J3M?;f{jLFCIH9#6U83+5NqPsz|Ac8_G^z;;^H( z|1EOyu1`??B+-I7V+L~sfy-3^C1i2D4RLd#T6Q z1|=2qf|}5w{;tZ-hbJn~89Ex>q-m+%8y!e&U7j)E?#k1aG@y#A_mHfRb7agba~ixe zG+O-pGX~zp$P{ZU<*N@ES%MkTrO%E9YmHWhY9)_7)j!`eoJ^H&O+6pJXQ2K$r?fpWRr9!TgZ z7Di^=+v%Ax?V0%V!T1MpNBOdhS`>$Z_Se-2d#whqJvssR%xg0x{5>bM-esaK-B8Xxw3x1OQ1T z{&|G}EV1&jOfxG2@kt1r^SEI*$mwBFuvR!Rp*k)xuy(mV+`I=74ZTA{1$4T}f7M06^=+5O9q%sr0)%;&oX;jm!{rJDGlNbx zI9sie`742SX2!yku4%RrU>wF@k-!O%t3{!2T!C%$|*uk6lL%^;bmsxgq2J zf#7_~`r12e7`IQuE&XzHGbk8F84n6B1=3Q^V8B?BP?O?RtKW2_qoaeIe17Xq&FQ0! z3L&7VjZEzKWMY4osYDx3YgIB<^9$$iOoS!ky07XBY73m^2KXrQxfA{6!9_rsh4F|! z+9?Z4m@>$7kNT3ruXn5+mba{*ZDB|TG>#zQLqjm?c~GUzK-5$Hs>NT-=BGtDku0oC z30Ssr@=0OC^m>zUs1{ZbN|5&&@oUS<_A=x$d7*>!MPtthgCl2J;am{)r=lw5v(?F> z1*^qddK`8sM}6ITZL%(TR*&#fy&c?m&F`OjHWX>RhJkoWhnJGY9D-z8*wNKR0qXri z{z^-!Nj4`e#fPt;MD$FHI&pe2&sRp)1ArP5P&Ycy{on>v@$Cc@-I*JMpZ#TcZBBB! zS7OR)5)PDfpP3X015mOb3aaENVOWy5b=%Ixrru&L;KS^Fr5C@?{VkU6Jx=oWa{nQq?NEVeuB%YO2x^GkFIAE7Z~R z%uSULMs>(`DKGAY$gb|SPnx}rovPyK3`~Qh5)K0r{=O!Znz||hT4Ct}1P>03VXlvl z^g+)JI))U3zPS1QI~AJ}I5qO669Hh}`Rp5sSZ&ITZ`Ds94`H&$sA<%5P;PGYs^`dOf&>e3QT}! z0sb@ogsbL7oi4NY${Qk(;*cZ-pP+9oS6smz0=b?kc#jrXiRJ0_#)ULahO=IG(u)n^ z3%XSpO{V~&ov{Hq0ZnZnZqQ!-7}ENm@##8aRlLjb2bZ*#c^K_4$NzH0@8{7iorhXG zxEHf;mQ8Q#soT3rJFoTb{UZj)4K5~AR96s6Co>4--8Ut$Hyqw{v%Y{ly@wOX?Q= zaPa2s*U@_So6{(7I>2uZrEEOh(9rASN&meiq;CD?%h-=XV2(u4qg zR-=vc!%9;#O64PpSf4lj--N+nK5@H0-V1}h;rhAc;c`!xk|oPqTd zFc|zo+{b_3S9H-hlKoA6CQUL;FO+T)#uegfj&57^AsqPr(X#CHiA$^Eienf}hu)6p zf$eQLapkYvMvgx(rWl&RHNqY)0gyjBj9 zpL7t{7mQE$H>`j<*KXdpaie8^Mv9iFz#r10c?IGb_|JWW^73-IOok6irmoDg{t0@& zXU94?oE^hR3hED71~r`Dv19{em-)dwTxP?0*mCIc_OfWmEZ+oM;xf@89;=|o<15M_ zv+8pgG`8&EZ+B=)#$|G@gQpy-HbsnQDy1mXaq8rBqo`SwIQ#NPtf&y@mk^Mg1X-15AL1DCF`~qML(*gtOd3-tt1Q}Jw==IangZi)Y2WWY; zxvG}*L9x+jnd$>PJf3G&2 z$JkDGX40mc=}ZaTIwPRm!O0bh{S+-vkTd@%9?;eDf;&w^%w$8|g3~ClRjf0VZ*B;Y zNft9fd9~T;IeI1TJAJQ#!xoFPfmgAsl|SAMWNY3HC8{2M27<(~`D|xV+5DswzdQt|1+bme6v?@Y7sSANGW=6h#f+N|Y{z0>urB_bIE8)}@gf zkV3Kf2d@0#!#zedkCh{SUI$Em=ncxU_7MmKACoFsinJYbgmMGVUXKzyc&)%9w3GuR zy^&l(s;sO;85}!?!w2MS_!sCRbYV*MGSiD7b0j*@l>KL_42<#A@A-MpG!1 z{z)U7GcZ7-L_;6TYHRlF0l_{_N>X-qCALIj1aw9%(`wxU+(lzBXt}QYdK)%v9iX%2 zu)U^)!U5Eb8CyC_ARat;spF^$>+5(nX18Oy51d&Oq$X*7>kIzEP8Wd+E*{Nhvn`!0 zRI&lX1rzZ_8ZqiU=#$&}ugvmCtf#eCY0oadKSx{*H6C2we<8GGws8?-V4JGkfb_qB zZ%W@3!Cr@4JTD;wSS*%URCEhlI`=HOzhRMV))L@wIAX_+eL+tY^lnu<6l&PhD?A>r zIlc~$L?Y!;57Yk>VHMwBXD6qqt|USHP=+B%U+(tt5$|ybJ&6T}%{Gtgs$EbI%?anuf7zfB$1mc8br?i+foJY(xZU zO2?t9!j5XXiUX?_k#v3wHZ6@M5;0ab0DCOiPxe=qCq#->p^Gk_9zJ~dN(0^53Hq~^ z3Vd5@1}I|2&wWR8bFYVot67!oLP_NpX977x#}IznRUOhpnR$CB$Ekup()^^UT!F=6kDG+&>74jYo`kwQ_Zo9lj zS-Jt*?8k`@E`$=syO(t3>q2>%r1Wf+8sl&*MTBp+j~jy0=7_ytc_}KDxHMbNEmmoP z^rT?EEmN-1;L+&H7)DLH;O0~+zqzz)+RMVGi#nb9U@a~?I~y>a6oM`goD!1&+Us4L zO@MZ(Kxklv(M8)e3(<}vb5^^Rt!39oP!wbNx&(7IwE9ti!R+?f@x`Mnf@uMX#U-cJ z&sX2&?YzJP zDHKksP^saw1&kbr#uzNlA(OcigDuLA^aZMR{Yq%LT zq~?(@Bggu}439Hb?{gIl0|Nv8n)a54lBrq$fB=r1!e;rc*$P%yS7T`0K9t2~nMsdK zigIvcH;w)Q^7_)gZOqrB`2BWY)Gf7It-oDqo8oPE?Y81t8pa!yyDvLM1O`xFk5NY@ zz6#np6CG_kA6fh*`__D0ttz5@YiEI~sB&?FbANRa)QFIxY?q?aVgu=q`tbSccL{Rg z%0^6VmkkNXW_9xMPtNEs&IHfXjZrl9P5Zc|kxQ`88IFHeqnH{IN=QHRDgu^cG_W`v z4)y7S3p|>n3Iz2pvbbB4)g%|4H76KbZ``;+HQ$gJWRd_bdBi?qzb!ymtb7r#w--M> zcGravu3~3_>6|;)eU0Rt5G>44p#|?A8q&gs&Cil8e{YTlCcZsm@WJ5_uDM`43gU42 zmeU|8I5yiRcs1C^5(xtyXy_f?4fJW1t z-XE}dyd+AgNkJVI3k{Q@iQMPs=*^yWDi~x5kG` zSRL~1MPDEOli}Q|&Mki3Lf;KozW`Y7I{4Sr!N1)rGWSiQ`_}X~d_(L`e|P%3)8G9+ gl3QK<7jS_~qLTWVblZ1~sA00gY4{UcP8UO$Q diff --git a/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-custom-height-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/event-list/event-list.e2e.ts-snapshots/event-list-custom-height-1-chromium---theme-classic-light-linux.png index 9992a15ac750eba76cc72072d3cc83d69ee2aca2..6bef997e9b7ee5d7aee94c147c03b74712885aa2 100644 GIT binary patch literal 9714 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 H|IJ?jbE4$H literal 7599 zcmeHLdr(tX8V{o2mId5(sx1(3rlahv_0d|OfDv0CsiPQ0LJ%54Tk%1Fpb!EH0jw*G zTFA6+QQnJGBR7x$5|D)Os0vzM+K^lcBw=}z7y?2P$aC*uw=><&>`Zrd_OIstb8>FZ zJ>TPe=lA=*@7jsuSl2f^-aw&Hu17vO7=}WvLw>G#zTOEL2AJ{)WN=6c!+wn7_Iu5u zQ0NOs4t^A#UaFCk&dYU{?gd(ZAV2ZDMA^yi-*cZv?l{oXMfcr)eaj!CX8vmJJSokn zJU;jlW$M!n3+_^CLh+_jZrzP*>&td*>WRI}J+YS8`aEamPw%TLUOX=Lzwk}1@3WnM zdA+^twRkH=&+i`pb6|ybB~zgs_En}FhkKFdT75lz>^X-zQ$|xSKdm;lD;}x~)*wov zcDmL^a0Egj`7{paSJD@6`69KEn_(tYtmIONOx+y*wvAp9K+Vlj zEZbx<``qdlXOBD>syTFH6P`dIFwM_=B_EpSltGw{;KSWLVDHaAzvJOk8YG`R4c_IP zmY)9rk|z=%nBTNRvPrMei7Tv)5LDoeiQ3gV|1oBwZ!F>TrvybEG%*^>jWt%9XHVU7g>x>4+w5ZC{{nvOBe zRI%b?WB;beGHHs7iy=N4mNE@;g3G3N@23fg!ZZz3g=I;RkgAQWzcbfnniJ?{Wb&h2 zS4mQ{x@kCx!o?{CqOTvLwdisq>?q9$sEG7>0guJFhiN4fA;2-i#WL{KFcBNC-hO z^x3;EV6hzV;-7u9m7h4=6qLD~ zT!vvZb#-+CFH=`0ZxJ{Wh^m%K6e0#^C?V}q0@&o?ncfv_PRKx>PgbNRO_bBH?Hae1J1s%5&I z)2yI#VzMndx_;;!*=Du)?cSaI2lndCIZD7f#!@Jh{DK1MwT-^2>)W~aAzZeccIi?B zolcKOE}%dlh}Wqke7a60Yt2ZJ)77=qS1;>T$TKkmlubS|GebjhKW%9M#|sWf%*Me* zd(Nq<+2s({JL5YDN}C%wjoY_!CjYCi2A7snMJrP!k_3P9%IitLY^xc9g0jr%p~sKM z)EOQ>KIrP|DtZ3=1Rh@&M1^v5bK_G}m&W8*}P*{lZ1xr<7 zGoRBL3GXPOu^(BbU}$TZCOxrE+j+&A zEWQ`YzaYK`LJjM~Z1hi*g}0mJ+MW6xtEkbPy2F}b>zyVh$9Gq4CT{{t#BM?}w4(kH zhgF#AMcaYp*Whp6VeL0h%F4k7MBR=Pi^Y<7K6Fw11BFKar&kN}SuFVbt1g^{o)U^` z>0Pj}9%jI%@4VzuuH^p|S6CYR=n(~N;azqyVcT5n4$NP45sjeO1Nh@iJ+VOYT{ld|F z;oQvASRk!qGmMxa6bcJ9zsCD^_WMPW5J~2`&uFzgIEJCw13No8sRU}SDU8u>e%&L1 zVZ!26pNXYLNRDGM82~Q;_+Vw5$BmutS@U=M0XpOyJqeFh7zQ#G>)2^~jU;sP>xpN@ zw{PEvRyoRLSL=y^y^Fmqy2+kfaNI4T{;C1+qD~FNmmQts|Ni~e%{4Y1FT1uZm?m{} z-+Kc7G$j-rc$AOPx$iFG%^SRh_4xL<~cb#uiK9(fwG=UT?$6A z*=%*Evri4ej14iF3s30Qm1%N%`or=p<17N^>GQF!Zf??Y3`6xTA*LGG`vnUVfkbVZ zRzbw$cZrsMT(`i3RCyuh&k{!-E{xc2-n{AO?;oLD?h4r1-?wTnVgLU?q*;|IXV0Eh zHMd(5nbX0_YHgN5n35U*OqiGKnf7t8?)Ax9{tWSsV6rfJXQZdMH@B^=E$Gt3Cx}Az z(wft!U{W?yp8Uv_H1k!qMNQ&=(Oux-;Q^t8(|V;p5#M=KX-Ia~j;O}_ZeAbG7r}cC zBPlv*G)1E3wZ{zXGbL!0?d?uZPF9ksA~5Biclzk%C_(B4ixF<;t}IRu{A{CF8ci(% zbU_!#4iYauc@wXjrRfk#j6lvg^w_a*BuB1|5eXuAF~pJp3OAY};uoNUBZx#|g^(tc zb4lj0&HT@wT$i;m8GasUOXD73YwAHP=j9LIZYN71Jd#OqgP6wDGDMMbx~iH!@ii8L z;-~w|bQ3pm(x*>90Vz=lrR{Xz*$0KYNLh0i+Qz$C@WjN#I)-f)m%YmCNM@xTXN7Pp zD=UFF>g(%o&{;s#^CM{HnmR~Tndc2%zI<8M5OnX6PSx7${Hlac?dF%g|R36vwg(^gMvXGZb}4sTSc?>>vym!ZMKb(IMguN3I`;- zJP~3V8rUhbfC$;|OZ|`JoVE5Xpw#VXJ2?KTGALiM^+qrT&?8cM-D9&kl6d_1y>FFs zKk=}qj}Pyv%jSsjTLH?!pX#yq{rvD%RaJhOug@?OXMa=`7Znu+zULo-^P=NX?rbaXKs5)*jpL)wvD~JW$)zu xmb;er=B~Yw{TpuD+r!@;{`T