refactor(cc-block)!: rework component and introduce slot stack

BREAKING CHANGE: the properties have changed
- `noHead`: property has been deleted
- `state`: property has been renamed to `toggle`
- `overlay`: property has been deleted

Fixes #225

src/components/cc-block/cc-block.types.d.ts

@@ -0,0 +1 @@
+export type BlockToggleState = 'off' | 'open' | 'close';

src/components/common.types.d.ts

@@ -188,8 +188,6 @@ interface Zone {
   lon: number; // Longitude
 }
 
-type ToggleStateType = 'off' | 'open' | 'close';
-
 type AppStatus =
   | 'restart-failed'
   | 'restarting'

src/directives/hasSlottedChildren.js

@@ -0,0 +1,76 @@
+import { nothing } from 'lit';
+import { AsyncDirective, directive, PartType } from 'lit/async-directive.js';
+import { EventHandler } from '../lib/events.js';
+
+/**
+ * @typedef {import('lit/directive.js').Part} Part
+ * @typedef {import('lit/directive.js').PartInfo} PartInfo
+ * @typedef {import('../lib/events.types.js').EventWithTarget<HTMLSlotElement>} SlotEventWithTarget
+ */
+
+/**
+ * A Lit directive that checks if an element has slotted children.
+ * If it is the case, the directive adds an `${changedSlot.name}-is-slotted` attribute to the element.
+ * If it is the default slot, the directive adds 'is-slotted' attribute to the element.
+ * If not, the `${changedSlot.name}-is-slotted` (or 'is-slotted' in case of default slot) attribute is removed.
+ */
+
+class HasSlottedChildrenDirective extends AsyncDirective {
+  /**
+   * @param {PartInfo} partInfo
+   */
+  constructor(partInfo) {
+    super(partInfo);
+    /** @type {HTMLElement} element */
+    this.element = null;
+    this.eventHandler = null;
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.eventHandler?.disconnect();
+  }
+
+  /**
+   * @param {Part} part
+   * @returns {unknown}
+   */
+  update(part) {
+    if (part.type !== PartType.ELEMENT) {
+      throw new Error('This directive must be set as on Element.');
+    }
+    if (!(part.element instanceof HTMLElement)) {
+      throw new Error('This directive must be set on a HTMLElement.');
+    }
+    if (part.element !== this.element) {
+      this.eventHandler?.disconnect();
+      this.element = part.element;
+      this.eventHandler = new EventHandler(
+        this.element,
+        'slotchange',
+        /** @param {SlotEventWithTarget} e */
+        (e) => {
+          const container = e.currentTarget;
+          const changedSlot = e.target;
+          const slotName = changedSlot.name;
+          const attributeName = slotName === '' ? 'is-slotted' : `${slotName}-is-slotted`;
+
+          if (changedSlot.assignedNodes().length > 0) {
+            container.setAttribute(attributeName, '');
+          } else {
+            container.removeAttribute(attributeName);
+          }
+        },
+      );
+      this.eventHandler.connect();
+    }
+
+    return this.render();
+  }
+
+  render() {
+    return nothing;
+  }
+}
+
+export const hasSlottedChildren = directive(HasSlottedChildrenDirective);

src/directives/hasSlottedChildren.test.js

@@ -0,0 +1,108 @@
+/* eslint-env node, mocha */
+
+import { defineCE, elementUpdated, expect } from '@open-wc/testing';
+import { LitElement, html } from 'lit';
+import { getElement } from '../../test/helpers/element-helper.js';
+import { hasSlottedChildren } from './hasSlottedChildren.js';
+
+describe('hasSlottedChildrenDirective', () => {
+  it('Should set the right attribute when slot is used', async () => {
+    const slot = defineCE(
+      class extends LitElement {
+        hasIsSlottedAttribute(name) {
+          return this.shadowRoot.querySelector('.main').hasAttribute(`${name}-is-slotted`);
+        }
+
+        render() {
+          return html`<div class="main" ${hasSlottedChildren()}><slot name="slotName"></slot></div>`;
+        }
+      },
+    );
+
+    const element = await getElement(`<${slot}><div slot="slotName">toto</div></${slot}>`);
+
+    expect(element.hasIsSlottedAttribute('slotName')).equal(true);
+  });
+
+  it('Should not set the attribute when slot is not used', async () => {
+    const slot = defineCE(
+      class extends LitElement {
+        hasIsSlottedAttribute(name) {
+          return this.shadowRoot.querySelector('.main').hasAttribute(`${name}-is-slotted`);
+        }
+
+        render() {
+          return html`<div class="main" ${hasSlottedChildren()}><slot name="slotName"></slot></div>`;
+        }
+      },
+    );
+
+    const element = await getElement(`<${slot}><div>toto</div></${slot}>`);
+
+    expect(element.hasIsSlottedAttribute('slotName')).equal(false);
+  });
+
+  it('Should set the right attribute when stack slot is used', async () => {
+    const slot = defineCE(
+      class extends LitElement {
+        hasIsSlottedAttribute(name) {
+          return this.shadowRoot.querySelector('.main').hasAttribute(`${name}-is-slotted`);
+        }
+
+        render() {
+          return html`<div class="main" ${hasSlottedChildren()}>
+            <slot name="slotName"><slot name="innerSlotName"></slot></slot>
+          </div>`;
+        }
+      },
+    );
+
+    const element = await getElement(`<${slot}><div slot="innerSlotName">toto</div></${slot}>`);
+
+    expect(element.hasIsSlottedAttribute('slotName')).equal(false);
+    expect(element.hasIsSlottedAttribute('innerSlotName')).equal(true);
+  });
+
+  it('Should set the default attribute when default slot is used', async () => {
+    const slot = defineCE(
+      class extends LitElement {
+        hasDefaultIsSlottedAttribute() {
+          return this.shadowRoot.querySelector('.main').hasAttribute(`is-slotted`);
+        }
+
+        render() {
+          return html`<div class="main" ${hasSlottedChildren()}>
+            <slot></slot>
+          </div>`;
+        }
+      },
+    );
+
+    const element = await getElement(`<${slot}><div>toto</div></${slot}>`);
+
+    expect(element.hasDefaultIsSlottedAttribute()).equal(true);
+  });
+
+  it('Should remove the attribute when slot is not used anymore', async () => {
+    const slot = defineCE(
+      class extends LitElement {
+        hasIsSlottedAttribute(name) {
+          return this.shadowRoot.querySelector('.main').hasAttribute(`${name}-is-slotted`);
+        }
+
+        render() {
+          return html`<div class="main" ${hasSlottedChildren()}><slot name="slotName"></slot></div>`;
+        }
+      },
+    );
+
+    const element = await getElement(`<${slot}><div slot="slotName">toto</div></${slot}>`);
+
+    expect(element.hasIsSlottedAttribute('slotName')).equal(true);
+
+    element.innerHTML = 'toto';
+    await elementUpdated(element);
+
+    expect(element.hasIsSlottedAttribute('slotName')).equal(false);
+  });
+});

src/lib/events.types.d.ts

@@ -1,3 +1,14 @@
-export type EventWithTarget<T extends EventTarget> = GenericEventWithTarget<Event, T>;
+export type EventWithTarget<T extends EventTarget, U extends EventTarget = null | Element> = GenericEventWithTarget<
+  Event,
+  T,
+  U
+>;
 
-export type GenericEventWithTarget<E extends Event, T extends EventTarget> = E & { target: T };
+export type GenericEventWithTarget<
+  E extends Event,
+  T extends EventTarget,
+  U extends EventTarget = null | Element,
+> = E & {
+  target: T;
+  currentTarget: U;
+};

src/translations/translations.en.js

@@ -238,10 +238,6 @@ export const translations = {
   //#region cc-beta
   'cc-beta.label': `beta`,
   //#endregion
-  //#region cc-block
-  'cc-block.toggle.close': `Close`,
-  'cc-block.toggle.open': `Open`,
-  //#endregion
   //#region cc-button
   'cc-button.cancel': `Click to cancel`,
   //#endregion

src/translations/translations.fr.js

@@ -249,10 +249,6 @@ export const translations = {
   //#region cc-beta
   'cc-beta.label': `bêta`,
   //#endregion
-  //#region cc-block
-  'cc-block.toggle.close': `Fermer`,
-  'cc-block.toggle.open': `Ouvrir`,
-  //#endregion
   //#region cc-button
   'cc-button.cancel': `Cliquez pour annuler`,
   //#endregion