diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts index 17f77725d..d8b5639ef 100644 --- a/src/components/chip/chip.ts +++ b/src/components/chip/chip.ts @@ -1,5 +1,5 @@ import { LitElement, html, nothing } from 'lit'; -import { property } from 'lit/decorators.js'; +import { property, queryAssignedElements } from 'lit/decorators.js'; import { type Ref, createRef, ref } from 'lit/directives/ref.js'; import { themes } from '../../theming/theming-decorator.js'; @@ -7,6 +7,7 @@ import { addKeybindings } from '../common/controllers/key-bindings.js'; import { registerComponent } from '../common/definitions/register.js'; import type { Constructor } from '../common/mixins/constructor.js'; import { EventEmitterMixin } from '../common/mixins/event-emitter.js'; +import { isEmpty } from '../common/util.js'; import IgcIconComponent from '../icon/icon.js'; import type { StyleVariant } from '../types.js'; import { styles } from './themes/chip.base.css.js'; @@ -84,6 +85,18 @@ export default class IgcChipComponent extends EventEmitterMixin< @property({ reflect: true }) public variant!: StyleVariant; + @queryAssignedElements({ slot: 'prefix' }) + protected prefixes!: Array; + + @queryAssignedElements({ slot: 'start' }) + protected contentStart!: Array; + + @queryAssignedElements({ slot: 'suffix' }) + protected suffixes!: Array; + + @queryAssignedElements({ slot: 'end' }) + protected contentEnd!: Array; + constructor() { super(); @@ -120,7 +133,12 @@ export default class IgcChipComponent extends EventEmitterMixin< aria-disabled="${this.disabled ? 'true' : 'false'}" @click=${this.handleSelect} > - + ${this.selectable && this.selected ? html` @@ -130,7 +148,12 @@ export default class IgcChipComponent extends EventEmitterMixin< - + ${this.removable && !this.disabled diff --git a/src/components/chip/themes/shared/chip.common.scss b/src/components/chip/themes/shared/chip.common.scss index 1c3fbff92..57d9c0d71 100644 --- a/src/components/chip/themes/shared/chip.common.scss +++ b/src/components/chip/themes/shared/chip.common.scss @@ -30,7 +30,8 @@ $theme: $material; color: var-get($theme, 'disabled-text-color'); } - igc-icon { + igc-icon, + ::slotted(igc-icon) { --component-size: var(--chip-size); } diff --git a/src/components/chip/themes/shared/chip.indigo.scss b/src/components/chip/themes/shared/chip.indigo.scss index 6fdc4a562..84803401c 100644 --- a/src/components/chip/themes/shared/chip.indigo.scss +++ b/src/components/chip/themes/shared/chip.indigo.scss @@ -23,7 +23,8 @@ $theme: $indigo; border-color: var-get($theme, 'disabled-border-color'); } - igc-icon { + igc-icon, + ::slotted(igc-icon) { --size: #{sizable(rem(14px), rem(14px), rem(16px))}; } }