fix(resize): add slot attribute and remove mutation observer

Author: mtsvyatkova

src/components/resize-container/resize-container.ts

@@ -194,27 +194,23 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
     this.emitEvent('igcResizeCancel', { bubbles: false, cancelable: false });
   }
 
+  protected _renderAdorner(name: 'side' | 'corner' | 'bottom', part: string) {
+    return html`
+      <slot ${ref(this._adorners[name])} part=${part} name="${name}-adorner">
+        <div part="adorner-indicator"></div>
+      </slot>
+    `;
+  }
+
   protected _renderAdorners() {
     if (!this._isActive && !this.active) {
       return nothing;
     }
 
     return html`
-      <slot
-        ${ref(this._adorners.side)}
-        part="trigger-side"
-        name="side-adorner"
-      ></slot>
-      <slot
-        ${ref(this._adorners.corner)}
-        part="trigger"
-        name="corner-adorner"
-      ></slot>
-      <slot
-        ${ref(this._adorners.bottom)}
-        part="trigger-bottom"
-        name="bottom-adorner"
-      ></slot>
+      ${this._renderAdorner('side', 'trigger-side')}
+      ${this._renderAdorner('corner', 'trigger')}
+      ${this._renderAdorner('bottom', 'trigger-bottom')}
     `;
   }
 

src/components/resize-container/themes/resize-container.base.scss

@@ -17,15 +17,23 @@
         --igx-icon-size: #{$icon-size};
     }
 
-    &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        width: var(--_size);
-        height: var(--_size);
-        border-radius: 50%;
-        z-index: 1;
-    }
+    // &::after {
+    //     content: '';
+    //     position: absolute;
+    //     inset: 0;
+    //     width: var(--_size);
+    //     height: var(--_size);
+    //     border-radius: 50%;
+    //     z-index: 1;
+    // }
+}
+
+[part='adorner-indicator'] {
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background-color: grey;
+    z-index: 11111;
 }
 
 :host {

src/components/tile-manager/themes/tile.base.scss

@@ -123,4 +123,12 @@
 // ::slotted([slot='actions']) {
 //     padding-block: var(--pad-block);
 //     padding-inline: var(--pad-inline);
-// }
+// }
+
+[part='adorner-indicator'] {
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background-color: grey;
+    z-index: 11111;
+}

src/components/tile-manager/tile-manager.spec.ts

@@ -432,25 +432,44 @@ describe('Tile Manager component', () => {
       `);
     });
 
-    it('should correctly project adorners into the igc-resize component and not render in igc-tile', async () => {
-      const tile1 = tileManager.tiles[0];
-      const resize = tile1.shadowRoot?.querySelector(
-        'igc-resize'
-      ) as HTMLElement;
-
-      const sideAdorner = resize.querySelector('[slot="side-adorner"]');
-      const cornerAdorner = resize.querySelector('[slot="corner-adorner"]');
-      const bottomAdorner = resize.querySelector('[slot="bottom-adorner"]');
-
-      // Assert the adorners are projected inside igc-resize
-      expect(sideAdorner?.textContent).to.equal('Side Adorner');
-      expect(cornerAdorner?.textContent).to.equal('Corner Adorner');
-      expect(bottomAdorner?.textContent).to.equal('Bottom Adorner');
-
-      // Assert that the adorners are not rendered in the igc-tile itself
-      expect(tile1.querySelector('[slot="side-adorner"]')).to.be.null;
-      expect(tile1.querySelector('[slot="corner-adorner"]')).to.be.null;
-      expect(tile1.querySelector('[slot="bottom-adorner"]')).to.be.null;
+    const adornerTests: { slotName: string; expectedText: string }[] = [
+      { slotName: 'side-adorner', expectedText: 'Side Adorner' },
+      { slotName: 'corner-adorner', expectedText: 'Corner Adorner' },
+      { slotName: 'bottom-adorner', expectedText: 'Bottom Adorner' },
+    ];
+
+    adornerTests.forEach(({ slotName, expectedText }) => {
+      it(`should assign content to the ${slotName} slot`, () => {
+        const slot =
+          tileManager.tiles[0].shadowRoot!.querySelector<HTMLSlotElement>(
+            `slot[name="${slotName}"]`
+          );
+        expect(slot).to.exist;
+        expect(
+          slot!
+            .assignedNodes()
+            .some((node) => node.textContent?.trim() === expectedText)
+        ).to.be.true;
+      });
+    });
+
+    adornerTests.forEach(({ slotName, expectedText }) => {
+      it(`should correctly project adorners into the igc-resize ${slotName} slot`, async () => {
+        const tile1 = tileManager.tiles[0];
+        const resize = tile1.shadowRoot?.querySelector(
+          'igc-resize'
+        ) as HTMLElement;
+        const resizeSlot = resize.shadowRoot!.querySelector<HTMLSlotElement>(
+          `slot[name="${slotName}"]`
+        );
+        expect(resizeSlot).to.exist;
+        expect(
+          resizeSlot!
+            .assignedNodes({ flatten: true })
+            .some((node) => node.textContent?.trim() === expectedText)
+        ).to.be.true;
+        expect(resizeSlot!.assignedNodes()).lengthOf(1);
+      });
     });
 
     it('should hide igc-resize component and not render adorners in igc-tile when resize mode is "none"', async () => {

src/components/tile-manager/tile.ts

@@ -121,7 +121,6 @@ export default class IgcTileComponent extends EventEmitterMixin<
   private _position = -1;
   private _resizeState = createTileResizeState();
   private _dragStack = createTileDragStack();
-  private _mutationObserver: MutationObserver | null = null;
 
   // Tile manager context properties and helpers
 
@@ -352,42 +351,6 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
     this.style.viewTransitionName =
       this.style.viewTransitionName || `tile-transition-${this.tileId}`;
-
-    this._observeResizeElement();
-  }
-
-  /** @internal */
-  public override disconnectedCallback() {
-    super.disconnectedCallback();
-    this._mutationObserver?.disconnect();
-  }
-
-  private _observeResizeElement() {
-    if (!this.shadowRoot) return;
-
-    this._mutationObserver = new MutationObserver(() => {
-      const resize = this.shadowRoot?.querySelector('igc-resize');
-      if (resize) {
-        this._assignAdornersToResize();
-      }
-    });
-
-    this._mutationObserver.observe(this.shadowRoot, {
-      childList: true, // Detects when `igc-resize` is added or removed
-      subtree: true,
-    });
-  }
-
-  private _assignAdornersToResize() {
-    const resize = this.shadowRoot?.querySelector('igc-resize');
-    if (!resize) return;
-
-    ['side-adorner', 'corner-adorner', 'bottom-adorner'].forEach((slotName) => {
-      const assigned = this.querySelector(`[slot="${slotName}"]`);
-      if (assigned) {
-        resize.appendChild(assigned); // Move the adorner inside `igc-resize`
-      }
-    });
   }
 
   private _setDragState(state = true) {
@@ -621,6 +584,14 @@ export default class IgcTileComponent extends EventEmitterMixin<
     `;
   }
 
+  private _renderAdornerSlot(name: 'side' | 'corner' | 'bottom') {
+    return html`
+      <slot name="${name}-adorner" slot="${name}-adorner">
+        <div part="adorner-indicator"></div>
+      </slot>
+    `;
+  }
+
   protected _renderResizeContainer() {
     return html`
       <igc-resize
@@ -633,19 +604,9 @@ export default class IgcTileComponent extends EventEmitterMixin<
         @igcResizeEnd=${this._handleResizeEnd}
         @igcResizeCancel=${this._handleResizeCancel}
       >
-        ${this._renderContent()}
-        <slot
-          name="side-adorner"
-          @slotchange=${this._assignAdornersToResize}
-        ></slot>
-        <slot
-          name="corner-adorner"
-          @slotchange=${this._assignAdornersToResize}
-        ></slot>
-        <slot
-          name="bottom-adorner"
-          @slotchange=${this._assignAdornersToResize}
-        ></slot>
+        ${this._renderContent()} ${this._renderAdornerSlot('side')}
+        ${this._renderAdornerSlot('corner')}
+        ${this._renderAdornerSlot('bottom')}
       </igc-resize>
     `;
   }

stories/tile-manager.stories.ts

@@ -858,7 +858,7 @@ export const CustomActions: Story = {
     >
       <igc-tile disable-fullscreen disable-maximize>
         <h3 slot="title">Custom Actions</h3>
-        <!-- <div slot="side-adorner">🟨</div> -->
+        <div slot="side-adorner">🟨</div>
         <div slot="corner-adorner">🟩</div>
         <div slot="bottom-adorner">🟦</div>