@momentum-design/components 0.120.23 → 0.120.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -170,8 +170,8 @@ class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(
170
170
  * @internal
171
171
  */
172
172
  this.handleDestroyEvent = (event) => {
173
- const destroyedElement = event.target;
174
- if (!this.isValidItem(destroyedElement) || destroyedElement.tabIndex !== 0) {
173
+ const destroyedElement = event.detail.originalTarget;
174
+ if (destroyedElement && (!this.isValidItem(destroyedElement) || destroyedElement.tabIndex !== 0)) {
175
175
  return;
176
176
  }
177
177
  const destroyedItemIndex = this.navItems.findIndex(node => node === destroyedElement);
@@ -69,7 +69,7 @@ class List extends ListNavigationMixin(CaptureDestroyEventForChildElement(Compon
69
69
  * @internal
70
70
  */
71
71
  this.handleDestroyEvent = (event) => {
72
- const destroyedElement = event.target;
72
+ const destroyedElement = event.detail.originalTarget;
73
73
  if (!this.isValidItem(destroyedElement) || destroyedElement.tabIndex !== 0) {
74
74
  return;
75
75
  }
@@ -1,4 +1,4 @@
1
- import type { CSSResult, PropertyValues } from 'lit';
1
+ import type { CSSResult, PropertyValues, TemplateResult } from 'lit';
2
2
  import type { IconNames } from '../icon/icon.types';
3
3
  import ListItem from '../listitem/listitem.component';
4
4
  declare const Option_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & typeof ListItem;
@@ -50,7 +50,8 @@ declare class Option extends Option_base {
50
50
  ariaLabel: string | null;
51
51
  connectedCallback(): void;
52
52
  update(changedProperties: PropertyValues): void;
53
- render(): import("lit-html").TemplateResult<1>;
53
+ private renderIcon;
54
+ render(): TemplateResult<1>;
54
55
  static styles: Array<CSSResult>;
55
56
  }
56
57
  export default Option;
@@ -9,7 +9,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
9
9
  };
10
10
  import { html, nothing } from 'lit';
11
11
  import { property } from 'lit/decorators.js';
12
- import { ifDefined } from 'lit/directives/if-defined.js';
13
12
  import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
14
13
  import { ROLE } from '../../utils/roles';
15
14
  import ListItem from '../listitem/listitem.component';
@@ -80,22 +79,20 @@ class Option extends FormInternalsMixin(ListItem) {
80
79
  this.dispatchModifiedEvent(this.selected ? 'selected' : 'unselected');
81
80
  }
82
81
  }
82
+ renderIcon(slotName, iconName) {
83
+ return html ` <mdc-icon length-unit="rem" slot="${slotName}" name="${iconName}"></mdc-icon> `;
84
+ }
83
85
  render() {
84
- const prefixIconContent = this.prefixIcon
85
- ? html `
86
- <div part="leading-icon">
87
- <mdc-icon length-unit="rem" slot="leading-controls" name="${ifDefined(this.prefixIcon)}"></mdc-icon>
88
- </div>
89
- `
90
- : nothing;
91
- const trailingContent = this.selected
92
- ? html ` <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon> `
93
- : nothing;
86
+ const trailingContent = this.selected ? this.renderIcon('trailing-controls', SELECTED_ICON_NAME) : nothing;
94
87
  return html `
95
- ${prefixIconContent}
96
- <div part="leading-text">
97
- ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
98
- ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
88
+ <div part="leading">
89
+ <slot name="leading-controls">
90
+ ${this.prefixIcon ? this.renderIcon('leading-controls', this.prefixIcon) : nothing}
91
+ </slot>
92
+ <div part="leading-text">
93
+ ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
94
+ ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
95
+ </div>
99
96
  </div>
100
97
  <div part="trailing">${trailingContent}</div>
101
98
  `;
@@ -9,7 +9,6 @@ const styles = [
9
9
  flex-shrink: 0;
10
10
  }
11
11
 
12
- :host::part(leading-icon),
13
12
  :host::part(trailing) {
14
13
  display: flex;
15
14
  align-items: center;
@@ -20,9 +19,6 @@ const styles = [
20
19
  flex: 1;
21
20
  }
22
21
 
23
- :host::part(leading-icon) {
24
- margin-inline-end: var(--mdc-listitem-column-gap);
25
- }
26
22
  :host::part(trailing) {
27
23
  margin-inline-start: var(--mdc-listitem-column-gap);
28
24
  }