-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: replace
namedSlotChangeHandlerAspect with `NamedSlotState…
…Controller` functionality
- Loading branch information
1 parent
87d0e68
commit af25938
Showing
6 changed files
with
187 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| export * from './constructor'; | ||
| export * from './language-controller'; | ||
| export * from './named-slot-state-controller'; | ||
| export * from './slot-child-observer'; | ||
| export * from './update-scheduler'; |
62 changes: 62 additions & 0 deletions
62
src/components/core/common-behaviors/named-slot-state-controller.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { ReactiveController, ReactiveControllerHost } from 'lit'; | ||
|
|
||
| /** | ||
| * This controller checks for slotted children. From these it generates | ||
| * a list of used slot names (`unnamed` for children without a slot attribute) | ||
| * and adds this to the `data-slot-names` attribute, as a space separated list. | ||
| * | ||
| * This allows CSS attribute selector to display/hide/configure a section | ||
| * of the component as required (see [attr~=value] selector specifically). | ||
| * | ||
| * @example | ||
| * .example { | ||
| * display: none; | ||
| * | ||
| * :host([data-slot-names~="icon"]) & { | ||
| * display: inline; | ||
| * } | ||
| * } | ||
| * | ||
| * https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors | ||
| */ | ||
| export class NamedSlotStateController implements ReactiveController { | ||
| private _slots = new Set<string>(); | ||
|
|
||
| // We avoid using AbortController here, as it would mean creating | ||
| // a new instance for every NamedSlotStateController instance. | ||
| private _slotchangeHandler = (event: Event): void => { | ||
| this._syncSlots(event.target as HTMLSlotElement); | ||
| }; | ||
|
|
||
| public constructor(private _host: ReactiveControllerHost & Partial<HTMLElement>) { | ||
| this._host.addController(this); | ||
| } | ||
|
|
||
| public hostConnected(): void { | ||
| // TODO: Check if this is really needed with SSR. | ||
| this._syncSlots(...this._host.querySelectorAll('slot')); | ||
| this._host.shadowRoot?.addEventListener('slotchange', this._slotchangeHandler); | ||
| } | ||
|
|
||
| public hostDisconnected(): void { | ||
| this._host.shadowRoot?.removeEventListener('slotchange', this._slotchangeHandler); | ||
| } | ||
|
|
||
| private _syncSlots(...slots: HTMLSlotElement[]): void { | ||
| for (const slot of slots) { | ||
| const slotName = slot.name || 'unnamed'; | ||
| if (slot.assignedNodes()) { | ||
| this._slots.add(slotName); | ||
| } else { | ||
| this._slots.delete(slotName); | ||
| } | ||
| } | ||
|
|
||
| const joinedSlotNames = [...this._slots].sort().join(' '); | ||
| if (!joinedSlotNames) { | ||
| this._host.removeAttribute('data-slot-names'); | ||
| } else if (this._host.getAttribute('data-slot-names') !== joinedSlotNames) { | ||
| this._host.setAttribute('data-slot-names', joinedSlotNames); | ||
| } | ||
| } | ||
| } |
74 changes: 74 additions & 0 deletions
74
src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| /* @web/test-runner snapshot v1 */ | ||
| export const snapshots = {}; | ||
|
|
||
| snapshots["sbb-toggle-option renders"] = | ||
| `<input | ||
| aria-hidden="true" | ||
| id="sbb-toggle-option-id" | ||
| tabindex="-1" | ||
| type="radio" | ||
| value="Option 1" | ||
| > | ||
| <label | ||
| class="sbb-toggle-option" | ||
| for="sbb-toggle-option-id" | ||
| > | ||
| <slot name="icon"> | ||
| </slot> | ||
| <span class="sbb-toggle-option__label"> | ||
| <slot> | ||
| </slot> | ||
| </span> | ||
| </label> | ||
| `; | ||
| /* end snapshot sbb-toggle-option renders */ | ||
|
|
||
| snapshots["sbb-toggle-option renders with sbb-icon"] = | ||
| `<input | ||
| aria-hidden="true" | ||
| id="sbb-toggle-option-id" | ||
| tabindex="-1" | ||
| type="radio" | ||
| > | ||
| <label | ||
| class="sbb-toggle-option" | ||
| for="sbb-toggle-option-id" | ||
| > | ||
| <slot name="icon"> | ||
| <sbb-icon | ||
| aria-hidden="true" | ||
| data-namespace="default" | ||
| name="arrow-right-small" | ||
| role="img" | ||
| > | ||
| </sbb-icon> | ||
| </slot> | ||
| <span class="sbb-toggle-option__label"> | ||
| <slot> | ||
| </slot> | ||
| </span> | ||
| </label> | ||
| `; | ||
| /* end snapshot sbb-toggle-option renders with sbb-icon */ | ||
|
|
||
| snapshots["sbb-toggle-option renders with slotted sbb-icon"] = | ||
| `<input | ||
| aria-hidden="true" | ||
| id="sbb-toggle-option-id" | ||
| tabindex="-1" | ||
| type="radio" | ||
| > | ||
| <label | ||
| class="sbb-toggle-option" | ||
| for="sbb-toggle-option-id" | ||
| > | ||
| <slot name="icon"> | ||
| </slot> | ||
| <span class="sbb-toggle-option__label"> | ||
| <slot> | ||
| </slot> | ||
| </span> | ||
| </label> | ||
| `; | ||
| /* end snapshot sbb-toggle-option renders with slotted sbb-icon */ | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters